refactor: pull out some logic into functions

Author: gadomski

src/components/value.tsx

@@ -32,8 +32,8 @@ import {
   Span,
   Stack,
 } from "@chakra-ui/react";
-import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import type { StacCatalog, StacCollection, StacItem, StacLink } from "stac-ts";
+import { useQuery } from "@tanstack/react-query";
+import type { StacCatalog, StacCollection, StacItem } from "stac-ts";
 import Assets from "./assets";
 import Catalogs from "./catalogs";
 import CollectionSearch from "./collection-search";
@@ -44,15 +44,10 @@ import Items from "./items";
 import Links from "./links";
 import Properties from "./properties";
 import { Prose } from "./ui/prose";
+import useStacCollections from "../hooks/stac-collections";
 import type { BBox2D } from "../types/map";
-import type {
-  DatetimeBounds,
-  StacAssets,
-  StacCollections,
-  StacSearch,
-  StacValue,
-} from "../types/stac";
-import { fetchStac } from "../utils/stac";
+import type { DatetimeBounds, StacSearch, StacValue } from "../types/stac";
+import { deconstructStac, fetchStac, getImportantLinks } from "../utils/stac";
 
 export interface SharedValueProps {
   catalogs: StacCatalog[] | undefined;
@@ -94,88 +89,51 @@ export function Value({
   const [numberOfCollections, setNumberOfCollections] = useState<number>();
   const [fetchAllCollections, setFetchAllCollections] = useState(false);
   const [thumbnailError, setThumbnailError] = useState(false);
+
   const selfHref = value.links?.find((link) => link.rel === "self")?.href;
+
   const { links, assets, properties } = useMemo(() => {
-    if (value) {
-      if (value.type === "Feature") {
-        return {
-          links: value.links,
-          assets: value.assets as StacAssets | undefined,
-          properties: value.properties,
-        };
-      } else {
-        const { links, assets, ...properties } = value;
-        return { links, assets: assets as StacAssets | undefined, properties };
-      }
-    } else {
-      return { links: undefined, assets: undefined, properties: undefined };
-    }
+    return deconstructStac(value);
   }, [value]);
+  // Description is handled at the top of the panel, so we don't need it down in
+  // the properties.
+  if (properties?.description) delete properties["description"];
+
   const { rootLink, collectionsLink, nextLink, prevLink, filteredLinks } =
     useMemo(() => {
-      let rootLink: StacLink | undefined = undefined;
-      let collectionsLink: StacLink | undefined = undefined;
-      let nextLink: StacLink | undefined = undefined;
-      let prevLink: StacLink | undefined = undefined;
-      const filteredLinks = [];
-      if (links) {
-        for (const link of links) {
-          switch (link.rel) {
-            case "root":
-              rootLink = link;
-              break;
-            case "data":
-              collectionsLink = link;
-              break;
-            case "next":
-              nextLink = link;
-              break;
-            case "previous":
-              prevLink = link;
-              break;
-          }
-          // We already show children and items in their own pane
-          if (link.rel !== "child" && link.rel !== "item")
-            filteredLinks.push(link);
-        }
-      }
-      return { rootLink, collectionsLink, nextLink, prevLink, filteredLinks };
+      return getImportantLinks(links);
     }, [links]);
+
   const rootData = useQuery<StacValue | undefined>({
     queryKey: ["stac-value", rootLink?.href],
     enabled: !!rootLink,
     queryFn: () => rootLink && fetchStac(rootLink.href),
   });
+
   const searchLinks = useMemo(() => {
     return rootData.data?.links?.filter((link) => link.rel === "search");
   }, [rootData.data]);
-  const collectionsResult = useInfiniteQuery({
-    queryKey: ["stac-collections", collectionsLink?.href],
-    queryFn: async ({ pageParam }) => {
-      if (pageParam) {
-        return await fetch(pageParam).then((response) => {
-          if (response.ok) return response.json();
-          else
-            throw new Error(
-              `Error while fetching collections from ${pageParam}`
-            );
-        });
-      } else {
-        return null;
-      }
-    },
-    initialPageParam: collectionsLink?.href,
-    getNextPageParam: (lastPage: StacCollections | null) =>
-      lastPage?.links?.find((link) => link.rel == "next")?.href,
-    enabled: !!collectionsLink,
-  });
+
+  const collectionsResult = useStacCollections(collectionsLink?.href);
+
+  const thumbnailAsset = useMemo(() => {
+    return (
+      assets &&
+      ((Object.keys(assets).includes("thumbnail") && assets["thumbnail"]) ||
+        Object.values(assets).find((asset) =>
+          asset.roles?.includes("thumbnail")
+        ))
+    );
+  }, [assets]);
+
   useEffect(() => {
     setCollections(
       collectionsResult.data?.pages.flatMap((page) => page?.collections || [])
     );
     if (collectionsResult.data?.pages.at(0)?.numberMatched)
       setNumberOfCollections(collectionsResult.data?.pages[0]?.numberMatched);
   }, [collectionsResult.data, setCollections]);
+
   useEffect(() => {
     if (
       fetchAllCollections &&
@@ -184,23 +142,12 @@ export function Value({
     )
       collectionsResult.fetchNextPage();
   }, [fetchAllCollections, collectionsResult]);
+
   useEffect(() => {
     setFetchAllCollections(false);
     setNumberOfCollections(undefined);
   }, [value]);
 
-  // Handled by the value
-  if (properties?.description) delete properties["description"];
-  const thumbnailAsset = useMemo(() => {
-    return (
-      assets &&
-      ((Object.keys(assets).includes("thumbnail") && assets["thumbnail"]) ||
-        Object.values(assets).find((asset) =>
-          asset.roles?.includes("thumbnail")
-        ))
-    );
-  }, [assets]);
-
   useEffect(() => {
     setItems(undefined);
   }, [search, setItems]);
@@ -220,6 +167,7 @@ export function Value({
         <Image
           src={thumbnailAsset.href}
           onError={() => setThumbnailError(true)}
+          maxH={"200"}
         />
       )}
 

src/hooks/stac-collections.ts

@@ -0,0 +1,25 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import type { StacCollections } from "../types/stac";
+
+export default function useStacCollections(href: string | undefined) {
+  return useInfiniteQuery({
+    queryKey: ["stac-collections", href],
+    queryFn: async ({ pageParam }) => {
+      if (pageParam) {
+        return await fetch(pageParam).then((response) => {
+          if (response.ok) return response.json();
+          else
+            throw new Error(
+              `Error while fetching collections from ${pageParam}`
+            );
+        });
+      } else {
+        return null;
+      }
+    },
+    initialPageParam: href,
+    getNextPageParam: (lastPage: StacCollections | null) =>
+      lastPage?.links?.find((link) => link.rel == "next")?.href,
+    enabled: !!href,
+  });
+}

src/utils/stac.ts

@@ -1,7 +1,7 @@
 import type { UseFileUploadReturn } from "@chakra-ui/react";
-import type { StacCollection, StacItem } from "stac-ts";
+import type { StacCollection, StacItem, StacLink } from "stac-ts";
 import type { BBox2D } from "../types/map";
-import type { DatetimeBounds, StacValue } from "../types/stac";
+import type { DatetimeBounds, StacAssets, StacValue } from "../types/stac";
 
 export async function getStacJsonValue(
   href: string,
@@ -204,3 +204,49 @@ export function isItemInDatetimeBounds(item: StacItem, bounds: DatetimeBounds) {
     (datetimes.start && datetimes.start > bounds.end)
   );
 }
+
+export function deconstructStac(value: StacValue) {
+  if (value.type === "Feature") {
+    return {
+      links: value.links,
+      assets: value.assets as StacAssets | undefined,
+      properties: value.properties,
+    };
+  } else {
+    const { links, assets, ...properties } = value;
+    return {
+      links: links || [],
+      assets: assets as StacAssets | undefined,
+      properties,
+    };
+  }
+}
+
+export function getImportantLinks(links: StacLink[]) {
+  let rootLink: StacLink | undefined = undefined;
+  let collectionsLink: StacLink | undefined = undefined;
+  let nextLink: StacLink | undefined = undefined;
+  let prevLink: StacLink | undefined = undefined;
+  const filteredLinks = [];
+  if (links) {
+    for (const link of links) {
+      switch (link.rel) {
+        case "root":
+          rootLink = link;
+          break;
+        case "data":
+          collectionsLink = link;
+          break;
+        case "next":
+          nextLink = link;
+          break;
+        case "previous":
+          prevLink = link;
+          break;
+      }
+      // We already show children and items in their own pane
+      if (link.rel !== "child" && link.rel !== "item") filteredLinks.push(link);
+    }
+  }
+  return { rootLink, collectionsLink, nextLink, prevLink, filteredLinks };
+}