Merge pull request #290 from UW-Macrostrat/strat-data

Strat Name Page Update

Author: davenquinn

pages/lex/strat-name-concepts/+data.ts

@@ -0,0 +1,9 @@
+import { fetchAPIData } from "~/_utils/fetch-helpers";
+
+export async function data() {
+  const res = await fetchAPIData(`/defs/strat_name_concepts`, {
+    page_size: 20,
+    last_id: 0,
+  });
+  return { res };
+}

pages/lex/strat-names/+Page.client.ts

@@ -6,16 +6,23 @@ import { Card, Switch, Spinner } from "@blueprintjs/core";
 import { useState, useEffect, useRef } from "react";
 import { ContentPage } from "~/layouts";
 import { Loading, SearchBar } from "../../index";
+import { useData } from "vike-react/useData";
 
 export function Page() {
   return StratPage({ show: false });
 }
 
 export function StratPage({ show }) {
+  const { res } = useData();
+  console.log("res", res);
+  const startingID = show
+    ? res[res?.length - 1]?.concept_id
+    : res[res?.length - 1]?.strat_name_id;
+
   const [input, setInput] = useState("");
   const [showConcepts, setShowConcepts] = useState(show ?? false);
-  const [lastID, setLastID] = useState(0);
-  const [data, setData] = useState([]);
+  const [lastID, setLastID] = useState(startingID);
+  const [data, setData] = useState(res);
   const pageSize = 20;
 
   const strat_name_vars = {
@@ -38,16 +45,40 @@ export function StratPage({ show }) {
 
   const result = useStratData(lastID, input, pageSize, data_route, like);
 
+  console.log(lastID);
+  console.log("data", data);
+
+  const prevInputRef = useRef(input);
+  const prevShowConceptsRef = useRef(showConcepts);
+
   useEffect(() => {
-    if (result) {
-      setData((prevData) => [...prevData, ...result]);
+    // Only reset if input or showConcepts actually changed from previous render
+    if (
+      prevInputRef.current !== input ||
+      prevShowConceptsRef.current !== showConcepts
+    ) {
+      // Reset data and lastID to starting ID for current mode
+      setData([]);
+      setLastID(0);
+
+      prevInputRef.current = input;
+      prevShowConceptsRef.current = showConcepts;
     }
-  }, [result]);
+  }, [input, showConcepts]);
 
   useEffect(() => {
-    setData([]);
-    setLastID(0);
-  }, [input, showConcepts]);
+    if (
+      result &&
+      data[data.length - 1]?.[showConcepts ? "concept_id" : "strat_name_id"] !==
+        result[result.length - 1]?.[
+          showConcepts ? "concept_id" : "strat_name_id"
+        ]
+    ) {
+      setData((prevData) => {
+        return [...prevData, ...result];
+      });
+    }
+  }, [result]);
 
   if (data == null) return h(Loading);
 
@@ -59,17 +90,43 @@ export function StratPage({ show }) {
     h(StickyHeader, { className: "header" }, [
       h(PageBreadcrumbs, { title }),
       h("div.header-description", [
-        h("p", [
-          h("strong", "Strat Names: "),
-          h("span", "names of rock units, organized hierarchically"),
-        ]),
-        h("p", [
-          h("strong", "Strat Concepts: "),
-          h(
-            "span",
-            "capture relationships between differently-named rock units"
-          ),
-        ]),
+        h(
+          Card,
+          {
+            className: !showConcepts ? "selected" : "unselected",
+            onClick: () => {
+              if (showConcepts) {
+                setShowConcepts(false);
+                setLastID(0);
+                setData([]);
+              }
+            },
+          },
+          [
+            h("strong", "Strat Names: "),
+            h("span", "names of rock units, organized hierarchically"),
+          ]
+        ),
+        h(
+          Card,
+          {
+            className: showConcepts ? "selected" : "unselected",
+            onClick: () => {
+              if (!showConcepts) {
+                setShowConcepts(true);
+                setLastID(0);
+                setData([]);
+              }
+            },
+          },
+          [
+            h("strong", "Strat Concepts: "),
+            h(
+              "span",
+              "capture relationships between differently-named rock units"
+            ),
+          ]
+        ),
       ]),
       h(Card, { className: "filter" }, [
         h(SearchBar, {
@@ -81,6 +138,8 @@ export function StratPage({ show }) {
           checked: showConcepts,
           onChange: (e) => {
             setShowConcepts(e.target.checked);
+            setLastID(0);
+            setData([]);
           },
         }),
       ]),

pages/lex/strat-names/+data.ts

@@ -0,0 +1,9 @@
+import { fetchAPIData } from "~/_utils/fetch-helpers";
+
+export async function data() {
+  const res = await fetchAPIData(`/defs/strat_names`, {
+    page_size: 20,
+    last_id: 0,
+  });
+  return { res };
+}

pages/lex/strat-names/main.module.scss

@@ -79,6 +79,15 @@
   flex-direction: column;
   gap: 1em;
 
+  .selected {
+    color: var(--text-emphasized-color) !important;
+    background-color: var(--secondary-background) !important;
+  }
+
+  .unselected {
+    cursor: pointer;
+  }
+
   p {
     display: flex;
     align-items: flex-end;