Update Ingest Page

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,
           });
         })
       ),

pages/maps/ingestion/+config.ts

@@ -0,0 +1,6 @@
+// /pages/+config.js
+
+export default {
+  // Applies to all pages
+  ssr: false,
+};

pages/maps/ingestion/+onBeforeRender.ts → 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,

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}`;