Merge pull request #288 from UW-Macrostrat/strat-name-prototype

Strat Name Prototype

Author: davenquinn

pages/index.ts

@@ -2,7 +2,7 @@ import h from "./layout.module.sass";
 import { MacrostratIcon } from "~/components";
 import { SETTINGS } from "@macrostrat-web/settings";
 import { DarkModeButton, useAPIResult } from "@macrostrat/ui-components";
-import { Spinner } from "@blueprintjs/core";
+import { Spinner, Card, Icon } from "@blueprintjs/core";
 
 export function Image({ src, className, width, height }) {
   const srcWithAddedPrefix =
@@ -76,3 +76,14 @@ export function BlankImage({ src, className, width, height }) {
 export function Loading() {
   return h("div.loading", h(Spinner));
 }
+
+export function SearchBar({ onChange, placeholder = "Search..." }) {
+  return h(Card, { className: "search-bar" }, [
+    h(Icon, { icon: "search" }),
+    h("input", {
+      type: "text",
+      placeholder,
+      onChange: (e) => onChange(e.target.value),
+    }),
+  ])
+}

pages/layout.module.sass

@@ -97,3 +97,23 @@
   display: flex
   flex-direction: column
   gap: 2em
+
+.search-bar 
+  display: flex
+  gap: 5px
+  align-items: center
+  justify-content: center
+
+  input 
+    width: 100%
+    padding: 0.5em
+    border-radius: 0.2em
+    border: none
+    background-color: var(--background-color)
+    color: var(--text-emphasized-color)
+    font-size: 1em
+    margin: 3px
+
+    &:focus 
+      outline: none
+      box-shadow: 0 0 0.2em var(--text-emphasized-color)

pages/lex/+Page.mdx

@@ -9,17 +9,11 @@ the USGS's [Geolex](https://ngmdb.usgs.gov/Geolex/search), and other
 sources. The lexicon is continually updated in partnership with
 researchers and data providers.
 
-## Stratigraphic names
+## Dictionaries
 
 <LinkCard href="/lex/strat-names" title="Stratigraphic names">
-  Names of rock units, organized hierarchically
-</LinkCard>
-<LinkCard href="/lex/strat-name-concepts" title="Stratigraphic concepts">
-  Concepts that capture relationships between differently-named rock units
+  Names of rock units, organized hierarchically as well as concepts that capture relationships between differently-named rock units
 </LinkCard>
-
-## Dictionaries
-
 <LinkCard href="/lex/intervals" title="Intervals">
   Time intervals
 </LinkCard>

pages/lex/strat-name-concepts/+Page.client.ts

@@ -1,110 +1,5 @@
-import h from "./main.module.scss";
-import {
-  useAPIResult,
-  InfiniteScroll,
-  LoadingPlaceholder,
-} from "@macrostrat/ui-components";
-import { SETTINGS } from "@macrostrat-web/settings";
-import {
-  PageHeader,
-  Link,
-  AssistantLinks,
-  DevLinkButton,
-  LinkCard,
-  PageBreadcrumbs,
-} from "~/components";
-import { Card, Icon, Spinner, RangeSlider } from "@blueprintjs/core";
-import { useState, useEffect, useRef } from "react";
-import { ContentPage } from "~/layouts";
-import { Loading } from "../../index";
+import { StratPage } from "../strat-names/+Page.client";
 
 export function Page() {
-  const [input, setInput] = useState("");
-  const [lastID, setLastID] = useState(0);
-  const [data, setData] = useState([]);
-  const pageSize = 20;
-  const result = useStratData(lastID, input, pageSize);
-
-  useEffect(() => {
-    if (result) {
-      setData((prevData) => [...prevData, ...result]);
-    }
-  }, [result]);
-
-  useEffect(() => {
-    // Example: Reset data if lastID changes
-    setData([]);
-  }, [input]);
-
-  if (data == null) return h(Loading);
-
-  const handleChange = (event) => {
-    setInput(event.target.value.toLowerCase());
-  };
-
-  return h(ContentPage, [
-    h(PageBreadcrumbs, { title: "Strat Name Concepts" }),
-    h("div.sift-link", [
-      h("p", "This page is is in development."),
-      h(
-        "a",
-        { href: "/sift/definitions/strat_name_concepts", target: "_blank" },
-        "View in Sift"
-      ),
-    ]),
-    h(Card, { className: "filters" }, [
-      h("h2", "Filter"),
-      h("div.search-bar", [
-        h(Icon, { icon: "search" }),
-        h("input", {
-          type: "text",
-          placeholder: "Filter by name...",
-          onChange: handleChange,
-        }),
-      ]),
-    ]),
-    h(
-      "div.strat-list",
-      h(
-        "div.strat-items",
-        data.map((data) => h(StratItem, { data }))
-      )
-    ),
-    LoadMoreTrigger({ data, setLastID, pageSize, result }),
-  ]);
-}
-
-function StratItem({ data }) {
-  const { name, concept_id } = data;
-
-  return h(LinkCard, { href: "/lex/strat-name-concepts/" + concept_id }, name);
-}
-
-function useStratData(lastID, input, pageSize) {
-  const result = useAPIResult(
-    `${SETTINGS.apiV2Prefix}/defs/strat_name_concepts?page_size=${pageSize}&last_id=${lastID}&concept_like=${input}`
-  );
-  return result?.success?.data;
-}
-
-function LoadMoreTrigger({ data, setLastID, pageSize, result }) {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    if (!ref.current) return;
-
-    const observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting) {
-        if (data.length > 0) {
-          setLastID(data[data.length - 1].concept_id);
-        }
-      }
-    });
-
-    observer.observe(ref.current);
-
-    return () => observer.disconnect();
-  }, [data, setLastID]);
-
-  return h.if(result?.length == pageSize)("div.load-more", { ref }, h(Spinner));
-}
+  return StratPage({ show: true });
+}

pages/lex/strat-name-concepts/@id/+Page.client.ts

@@ -5,4 +5,4 @@ export function Page() {
   const pageContext = usePageContext();
   const id = parseInt(pageContext.urlParsed.pathname.split("/")[3]);
   return IndividualPage(id, "concept_id", "strat_name_concepts");
-}
+}