From da377bab6c848fc03248870f93a829db0d9c37e4 Mon Sep 17 00:00:00 2001
From: Cannon Lock <clock@wisc.edu>
Date: Wed, 7 Aug 2024 15:16:49 -0500
Subject: [PATCH] Update Ingest Page

---
 pages/maps/ingestion/+Page.ts                 | 39 ++++++++++---------
 pages/maps/ingestion/+config.ts               |  6 +++
 .../{+onBeforeRender.ts => +data.ts}          |  2 +-
 .../components/ingest-process-card.ts         |  2 -
 4 files changed, 28 insertions(+), 21 deletions(-)
 create mode 100644 pages/maps/ingestion/+config.ts
 rename pages/maps/ingestion/{+onBeforeRender.ts => +data.ts} (79%)

diff --git a/pages/maps/ingestion/+Page.ts b/pages/maps/ingestion/+Page.ts
index 6cbd3270..701431b6 100644
--- a/pages/maps/ingestion/+Page.ts
+++ b/pages/maps/ingestion/+Page.ts
@@ -1,9 +1,9 @@
 import { AnchorButton } from "@blueprintjs/core";
 import { ingestPrefix } from "@macrostrat-web/settings";
 import hyper from "@macrostrat/hyper";
-import { useEffect, useState } from "react";
+import react, { useCallback, useEffect, useState } from "react";
 import { PageBreadcrumbs } from "~/components";
-import { usePageProps } from "~/renderer/usePageProps";
+import { usePageContext } from "vike-react/usePageContext";
 import { IngestProcessCard } from "./components";
 import styles from "./main.module.sass";
 import { AuthStatus } from "@macrostrat/auth-components";
@@ -14,39 +14,42 @@ import Tag from "./components/Tag";
 const h = hyper.styled(styles);
 
 export function Page() {
-  const { user, url } = usePageProps();
+  const { user } = usePageContext();
+
   const [ingestProcess, setIngestProcess] = useState<IngestProcess[]>([]);
   const [ingestFilter, setIngestFilter] = useState<URLSearchParams>(undefined);
   const [tags, setTags] = useState<string[]>([]);
 
+  const updateTags = useCallback(() => {
+    getTags().then((tags) => setTags(tags));
+  }, []);
+
+  const updateIngestProcesses = useCallback(() => {
+    getIngestProcesses(ingestFilter).then((ingestProcesses) => {
+      setIngestProcess(ingestProcesses);
+    });
+  }, [ingestFilter]);
+
   // Get the initial data with the filter from the URL
-  useEffect(() => {
+  react.useEffect(() => {
     // Get the ingest process data
     const url = new URL(window.location.href);
     const searchParams = new URLSearchParams(url.search);
     searchParams.set("state", "not.eq.abandoned");
     setIngestFilter(searchParams);
-    getIngestProcesses(searchParams).then((ingestProcesses) => {
-      setIngestProcess(ingestProcesses);
-    });
-
-    // Get the current set of tags
-    getTags().then((tags) => setTags(tags));
+    updateIngestProcesses();
+    updateTags();
 
     // Set up the popstate event listener
     window.onpopstate = () => {
-      getIngestProcesses(ingestFilter).then((ingestProcesses) => {
-        setIngestProcess(ingestProcesses);
-      });
+      updateIngestProcesses();
     };
   }, []);
 
   // Re-fetch data when the filter changes
-  useEffect(() => {
+  react.useEffect(() => {
     if (ingestFilter) {
-      getIngestProcesses(ingestFilter).then((ingestProcesses) => {
-        setIngestProcess(ingestProcesses);
-      });
+      updateIngestProcesses();
     }
   }, [ingestFilter]);
 
@@ -76,7 +79,7 @@ export function Page() {
             ingestProcess: d,
             user: user,
             // What is this doing?
-            onUpdate: () => getTags().then((tags) => setTags(tags)),
+            onUpdate: updateTags,
           });
         })
       ),
diff --git a/pages/maps/ingestion/+config.ts b/pages/maps/ingestion/+config.ts
new file mode 100644
index 00000000..45da14ce
--- /dev/null
+++ b/pages/maps/ingestion/+config.ts
@@ -0,0 +1,6 @@
+// /pages/+config.js
+
+export default {
+  // Applies to all pages
+  ssr: false,
+};
diff --git a/pages/maps/ingestion/+onBeforeRender.ts b/pages/maps/ingestion/+data.ts
similarity index 79%
rename from pages/maps/ingestion/+onBeforeRender.ts
rename to pages/maps/ingestion/+data.ts
index 8a24ba7e..21751e44 100644
--- a/pages/maps/ingestion/+onBeforeRender.ts
+++ b/pages/maps/ingestion/+data.ts
@@ -1,6 +1,6 @@
 import { ingestPrefix } from "@macrostrat-web/settings";
 
-export async function onBeforeRender(pageContext) {
+export async function data(pageContext) {
   const pageProps = {
     user: pageContext.user,
     ingest_api: ingestPrefix,
diff --git a/pages/maps/ingestion/components/ingest-process-card.ts b/pages/maps/ingestion/components/ingest-process-card.ts
index 830ccf7f..bf67d7c1 100644
--- a/pages/maps/ingestion/components/ingest-process-card.ts
+++ b/pages/maps/ingestion/components/ingest-process-card.ts
@@ -48,8 +48,6 @@ export function IngestProcessCard({
     onUpdate();
   }, []);
 
-  console.log("ingestProcess", ingestProcess);
-
   const { id, tags } = _ingestProcess;
   const { slug, name, source_id, scale, raster_url } = _ingestProcess.source;
   const edit_href = `/maps/ingestion/${source_id}`;