Merge pull request #239 from UW-Macrostrat/update-cdr-ui

Enhance CDR Maps
UW-Macrostrat · Jul 29, 2024 · 4d00ede · 4d00ede
2 parents e936e18 + b6cc752
commit 4d00ede
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 24 deletions.
diff --git a/pages/integrations/criticalmaas/ta1-results/+Page.ts b/pages/integrations/criticalmaas/ta1-results/+Page.ts
@@ -4,18 +4,23 @@ import { AnchorButton, ButtonGroup } from "@blueprintjs/core";
 import { ContentPage } from "~/layouts";
 import { PageHeader } from "~/components";
 import { useData } from "vike-react/useData";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { getMapSources } from "./util";
 
 export function Page() {
   const data = useData();
   const [sources, setSources] = useState(data.sources);
   const [page, setPage] = useState(0);
+  const [loading, setLoading] = useState(false);
 
+  const firstUpdate = useRef(true);
   useEffect(() => {
-    (async () => {
-      setSources(await getMapSources(page, 10));
-    })();
+    if (firstUpdate.current) {
+      firstUpdate.current = false;
+      return;
+    } else {
+      updateResultList(page, 10, setSources, setLoading);
+    }
   }, [page]);
 
   return h(ContentPage, [
@@ -25,23 +30,38 @@ export function Page() {
       sources.map((d) => h(SourceItem, { source: d, key: d.source_id }))
     ),
     // Add two buttons to change the page of the list
-    h(ButtonGroup, [
-      h(AnchorButton, {
-        icon: "chevron-left",
-        onClick: () => setPage((p) => Math.max(p - 1, 0)),
-      }),
-      h(
-        AnchorButton,
-        {
-          disabled: true,
-        },
-        `Page ${page + 1}`
-      ),
-      h(AnchorButton, {
-        icon: "chevron-right",
-        onClick: () => setPage((p) => p + 1),
-      }),
-    ]),
+    h(
+      ButtonGroup,
+      {
+        style: { display: "flex", justifyContent: "center" },
+      },
+      [
+        h(AnchorButton, {
+          icon: "chevron-left",
+          disabled: loading,
+          onClick: () => setPage((p) => Math.max(p - 1, 0)),
+        }),
+        h.if(!loading)(
+          AnchorButton,
+          {
+            disabled: true,
+          },
+          `Page ${page + 1}`
+        ),
+        h.if(loading)(
+          AnchorButton,
+          {
+            disabled: true,
+          },
+          `Loading...`
+        ),
+        h(AnchorButton, {
+          disabled: loading,
+          icon: "chevron-right",
+          onClick: () => setPage((p) => p + 1),
+        }),
+      ]
+    ),
   ]);
 }
 
@@ -56,3 +76,9 @@ function SourceItem({ source }) {
     h("a", { href }, [system, system_version]),
   ]);
 }
+
+async function updateResultList(page, pageSize, setSources, setLoading) {
+  setLoading(true);
+  setSources(await getMapSources(page, pageSize));
+  setLoading(false);
+}
diff --git a/pages/integrations/criticalmaas/ta1-results/+data.ts b/pages/integrations/criticalmaas/ta1-results/+data.ts
@@ -2,7 +2,9 @@ export async function data(pageContext): Promise<any> {
   const baseURL = pageContext.urlParsed.origin;
 
   // Fetch data from local api
-  const url = `${baseURL}/cdr/v1/tiles/sources`;
+  const url = new URL(`${baseURL}/cdr/v1/tiles/sources`);
+  url.searchParams.set("page_size", "10");
+  url.searchParams.set("page", "0");
   const res = await fetch(url);
   const data = await res.json();
 

diff --git a/pages/integrations/criticalmaas/ta1-results/util.ts b/pages/integrations/criticalmaas/ta1-results/util.ts
@@ -1,8 +1,9 @@
 export const getMapSources = async (page, pageSize) => {
-  const url = new URL("http://localhost:3003/tiles/sources");
+  const url = new URL(window.location.origin + "/cdr/v1/tiles/sources");
   url.searchParams.set("page_size", pageSize);
   url.searchParams.set("page", page);
   const res = await fetch(url);
   const data = await res.json();
-  return data;
+  const nullFilteredData = data.filter((source) => source.web_geom !== null);
+  return nullFilteredData;
 };