refactor: state (#131)

Author: gadomski

src/app.tsx

@@ -2,12 +2,15 @@ import {
   Alert,
   Box,
   Container,
+  FileUpload,
   Flex,
   GridItem,
   SimpleGrid,
   useBreakpointValue,
+  useFileUpload,
 } from "@chakra-ui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { MapProvider } from "react-map-gl/dist/esm/exports-maplibre";
 import Header from "./components/header";
@@ -17,31 +20,75 @@ import { Toaster } from "./components/ui/toaster";
 import { StacMapProvider } from "./provider";
 
 export default function App() {
+  const [href, setHref] = useState<string | undefined>(getInitialHref());
+  const fileUpload = useFileUpload({ maxFiles: 1 });
   const queryClient = new QueryClient({});
   const isHeaderAboveMap = useBreakpointValue({ base: true, md: false });
 
+  useEffect(() => {
+    function handlePopState() {
+      setHref(new URLSearchParams(location.search).get("href") ?? "");
+    }
+
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (href && new URLSearchParams(location.search).get("href") != href) {
+      history.pushState(null, "", "?href=" + href);
+    }
+  }, [href]);
+
+  useEffect(() => {
+    // It should never be more than 1.
+    if (fileUpload.acceptedFiles.length == 1) {
+      setHref(fileUpload.acceptedFiles[0].name);
+    }
+  }, [fileUpload.acceptedFiles]);
+
+  const header = (
+    <Header href={href} setHref={setHref} fileUpload={fileUpload}></Header>
+  );
+
   return (
     <QueryClientProvider client={queryClient}>
       <MapProvider>
-        <StacMapProvider>
+        <StacMapProvider
+          href={href}
+          fileUpload={fileUpload}
+          temporalFilter={undefined} // TODO re-add temporal filtering: https://github.com/developmentseed/stac-map/issues/123
+        >
           <Box zIndex={0} position={"absolute"} top={0} left={0}>
-            <ErrorBoundary FallbackComponent={MapFallback}>
-              <Map></Map>
-            </ErrorBoundary>
+            <FileUpload.RootProvider value={fileUpload} unstyled={true}>
+              <FileUpload.Dropzone
+                disableClick={true}
+                style={{
+                  height: "100dvh",
+                  width: "100dvw",
+                }}
+              >
+                <ErrorBoundary FallbackComponent={MapFallback}>
+                  <Map></Map>
+                </ErrorBoundary>
+              </FileUpload.Dropzone>
+            </FileUpload.RootProvider>
           </Box>
           <Container zIndex={1} fluid h={"dvh"} py={4} pointerEvents={"none"}>
             <SimpleGrid columns={{ base: 1, md: 3 }} gap={4}>
-              {isHeaderAboveMap && (
-                <GridItem colSpan={1}>
-                  <Header></Header>
-                </GridItem>
-              )}
+              {isHeaderAboveMap && <GridItem colSpan={1}>{header}</GridItem>}
               <GridItem colSpan={1}>
-                <Panel></Panel>
+                <Panel
+                  href={href}
+                  setHref={setHref}
+                  fileUpload={fileUpload}
+                ></Panel>
               </GridItem>
               {!isHeaderAboveMap && (
                 <GridItem colSpan={2} hideBelow={"md"}>
-                  <Header></Header>
+                  {header}
                 </GridItem>
               )}
             </SimpleGrid>
@@ -68,3 +115,13 @@ function MapFallback({ error }: { error: Error }) {
     </Flex>
   );
 }
+
+function getInitialHref() {
+  const href = new URLSearchParams(location.search).get("href") || "";
+  try {
+    new URL(href);
+  } catch {
+    return undefined;
+  }
+  return href;
+}

src/components/catalog.tsx

@@ -1,13 +1,20 @@
 import { Stack } from "@chakra-ui/react";
 import type { StacCatalog } from "stac-ts";
+import type { SetHref } from "../types/app";
 import { Children } from "./children";
 import Value from "./value";
 
-export function Catalog({ catalog }: { catalog: StacCatalog }) {
+export function Catalog({
+  catalog,
+  setHref,
+}: {
+  catalog: StacCatalog;
+  setHref: SetHref;
+}) {
   return (
     <Stack>
       <Value value={catalog}></Value>
-      <Children value={catalog}></Children>
+      <Children value={catalog} setHref={setHref}></Children>
     </Stack>
   );
 }

src/components/children.tsx

@@ -4,62 +4,74 @@ import { LuFolderPlus, LuFolderSearch } from "react-icons/lu";
 import { MarkdownHooks } from "react-markdown";
 import type { StacCatalog, StacCollection } from "stac-ts";
 import useStacMap from "../hooks/stac-map";
+import { useChildren } from "../hooks/stac-value";
+import type { SetHref } from "../types/app";
 import { CollectionSearch } from "./search/collection";
 import Section from "./section";
 
-export function Children({ value }: { value: StacCatalog | StacCollection }) {
-  const { catalogs, collections } = useStacMap();
+export function Children({
+  value,
+  setHref,
+}: {
+  value: StacCatalog | StacCollection;
+  setHref: SetHref;
+}) {
+  const { collections } = useStacMap();
+  const children = useChildren(value, !!collections);
   const selfHref = value?.links?.find((link) => link.rel === "self")?.href;
 
   return (
     <>
       {collections && collections?.length > 0 && (
-        <Section
-          title={
-            <HStack>
-              <Icon>
-                <LuFolderSearch></LuFolderSearch>
-              </Icon>{" "}
-              Collection search
-            </HStack>
-          }
-        >
-          <CollectionSearch
-            href={selfHref}
-            collections={collections}
-          ></CollectionSearch>
-        </Section>
-      )}
+        <>
+          <Section
+            title={
+              <HStack>
+                <Icon>
+                  <LuFolderSearch></LuFolderSearch>
+                </Icon>{" "}
+                Collection search
+              </HStack>
+            }
+          >
+            <CollectionSearch
+              href={selfHref}
+              setHref={setHref}
+              collections={collections}
+            ></CollectionSearch>
+          </Section>
 
-      {catalogs && catalogs.length > 0 && (
-        <Section title="Catalogs">
-          <Stack>
-            {catalogs.map((catalog) => (
-              <ChildCard
-                child={catalog}
-                key={"catalog-" + catalog.id}
-              ></ChildCard>
-            ))}
-          </Stack>
-        </Section>
+          <Section
+            title={
+              <HStack>
+                <Icon>
+                  <LuFolderPlus></LuFolderPlus>
+                </Icon>{" "}
+                Collections ({collections.length})
+              </HStack>
+            }
+          >
+            <Stack>
+              {collections.map((collection) => (
+                <ChildCard
+                  child={collection}
+                  setHref={setHref}
+                  key={"collection-" + collection.id}
+                ></ChildCard>
+              ))}
+            </Stack>
+          </Section>
+        </>
       )}
 
-      {collections && collections.length > 0 && (
-        <Section
-          title={
-            <HStack>
-              <Icon>
-                <LuFolderPlus></LuFolderPlus>
-              </Icon>{" "}
-              Collections ({collections.length})
-            </HStack>
-          }
-        >
+      {children && children.length > 0 && (
+        <Section title="Children">
           <Stack>
-            {collections.map((collection) => (
+            {children.map((child) => (
               <ChildCard
-                child={collection}
-                key={"collection-" + collection.id}
+                child={child}
+                setHref={setHref}
+                key={"child-" + child.id}
               ></ChildCard>
             ))}
           </Stack>
@@ -72,11 +84,12 @@ export function Children({ value }: { value: StacCatalog | StacCollection }) {
 export function ChildCard({
   child,
   footer,
+  setHref,
 }: {
   child: StacCatalog | StacCollection;
   footer?: ReactNode;
+  setHref: SetHref;
 }) {
-  const { setHref } = useStacMap();
   const selfHref = child.links.find((link) => link.rel === "self")?.href;
 
   return (

src/components/collection.tsx

@@ -8,16 +8,34 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { LuFileSearch } from "react-icons/lu";
-import type { StacCollection } from "stac-ts";
-import useStacMap from "../hooks/stac-map";
+import type { StacCollection, StacLink } from "stac-ts";
+import { useStacLinkContainer } from "../hooks/stac-value";
+import type { SetHref } from "../types/app";
+import type { StacSearch } from "../types/stac";
 import { ChildCard, Children } from "./children";
 import { SpatialExtent, TemporalExtent } from "./extents";
 import ItemSearch from "./search/item";
 import Section from "./section";
 import Value from "./value";
 
-export function Collection({ collection }: { collection: StacCollection }) {
-  const { root } = useStacMap();
+export function Collection({
+  collection,
+  setHref,
+  search,
+  setSearch,
+  setSearchLink,
+  autoLoad,
+  setAutoLoad,
+}: {
+  collection: StacCollection;
+  setHref: SetHref;
+  search: StacSearch | undefined;
+  setSearch: (search: StacSearch | undefined) => void;
+  setSearchLink: (link: StacLink | undefined) => void;
+  autoLoad: boolean;
+  setAutoLoad: (autoLoad: boolean) => void;
+}) {
+  const root = useStacLinkContainer(collection, "root");
   const searchLinks =
     (root && root.links?.filter((link) => link.rel == "search")) || [];
 
@@ -39,25 +57,36 @@ export function Collection({ collection }: { collection: StacCollection }) {
             </HStack>
           }
         >
-          <ItemSearch collection={collection} links={searchLinks}></ItemSearch>
+          <ItemSearch
+            collection={collection}
+            links={searchLinks}
+            search={search}
+            setSearch={setSearch}
+            setSearchLink={setSearchLink}
+            autoLoad={autoLoad}
+            setAutoLoad={setAutoLoad}
+          ></ItemSearch>
         </Section>
       )}
 
-      <Children value={collection}></Children>
+      <Children value={collection} setHref={setHref}></Children>
     </Stack>
   );
 }
 
 export function CollectionCard({
   collection,
+  setHref,
   explanation,
 }: {
   collection: StacCollection;
+  setHref: SetHref;
   explanation?: string;
 }) {
   return (
     <ChildCard
       child={collection}
+      setHref={setHref}
       footer={
         <Stack>
           <HStack>