fix: collection search for collections too (#118)

Author: gadomski

src/components/catalog.tsx

@@ -1,68 +1,13 @@
-import { HStack, Icon, Stack } from "@chakra-ui/react";
-import { LuFolderPlus, LuFolderSearch } from "react-icons/lu";
+import { Stack } from "@chakra-ui/react";
 import type { StacCatalog } from "stac-ts";
-import useStacMap from "../hooks/stac-map";
-import { ChildCard } from "./children";
-import { CollectionSearch } from "./search/collection";
-import Section from "./section";
+import { Children } from "./children";
 import Value from "./value";
 
 export function Catalog({ catalog }: { catalog: StacCatalog }) {
-  const { catalogs, collections } = useStacMap();
-  const selfHref = catalog.links?.find((link) => link.rel === "self")?.href;
   return (
     <Stack>
       <Value value={catalog}></Value>
-      {collections && collections?.length > 0 && (
-        <Section
-          title={
-            <HStack>
-              <Icon>
-                <LuFolderSearch></LuFolderSearch>
-              </Icon>{" "}
-              Collection search
-            </HStack>
-          }
-        >
-          <CollectionSearch
-            href={selfHref}
-            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>
-      )}
-      {collections && collections.length > 0 && (
-        <Section
-          title={
-            <HStack>
-              <Icon>
-                <LuFolderPlus></LuFolderPlus>
-              </Icon>{" "}
-              Collections ({collections.length})
-            </HStack>
-          }
-        >
-          <Stack>
-            {collections.map((collection) => (
-              <ChildCard
-                child={collection}
-                key={"collection-" + collection.id}
-              ></ChildCard>
-            ))}
-          </Stack>
-        </Section>
-      )}
+      <Children value={catalog}></Children>
     </Stack>
   );
 }

src/components/children.tsx

@@ -1,21 +1,71 @@
-import { Card, Heading, Link, Stack, Text } from "@chakra-ui/react";
+import { Card, HStack, Icon, Link, Stack, Text } from "@chakra-ui/react";
 import type { ReactNode } from "react";
+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 { CollectionSearch } from "./search/collection";
+import Section from "./section";
+
+export function Children({ value }: { value: StacCatalog | StacCollection }) {
+  const { catalogs, collections } = useStacMap();
+  const selfHref = value?.links?.find((link) => link.rel === "self")?.href;
 
-export function Children({
-  heading,
-  children,
-}: {
-  heading: string;
-  children: ReactNode;
-}) {
   return (
-    <Stack>
-      <Heading size={"md"}>{heading}</Heading>
-      {children}
-    </Stack>
+    <>
+      {collections && collections?.length > 0 && (
+        <Section
+          title={
+            <HStack>
+              <Icon>
+                <LuFolderSearch></LuFolderSearch>
+              </Icon>{" "}
+              Collection search
+            </HStack>
+          }
+        >
+          <CollectionSearch
+            href={selfHref}
+            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>
+      )}
+
+      {collections && collections.length > 0 && (
+        <Section
+          title={
+            <HStack>
+              <Icon>
+                <LuFolderPlus></LuFolderPlus>
+              </Icon>{" "}
+              Collections ({collections.length})
+            </HStack>
+          }
+        >
+          <Stack>
+            {collections.map((collection) => (
+              <ChildCard
+                child={collection}
+                key={"collection-" + collection.id}
+              ></ChildCard>
+            ))}
+          </Stack>
+        </Section>
+      )}
+    </>
   );
 }
 

src/components/collection.tsx

@@ -6,7 +6,7 @@ import type {
   TemporalExtent as StacTemporalExtent,
 } from "stac-ts";
 import useStacMap from "../hooks/stac-map";
-import { ChildCard } from "./children";
+import { ChildCard, Children } from "./children";
 import ItemSearch from "./search/item";
 import Section from "./section";
 import Value from "./value";
@@ -15,6 +15,7 @@ export function Collection({ collection }: { collection: StacCollection }) {
   const { root } = useStacMap();
   const searchLinks =
     (root && root.links?.filter((link) => link.rel == "search")) || [];
+
   return (
     <Stack>
       <Value value={collection}>
@@ -35,6 +36,8 @@ export function Collection({ collection }: { collection: StacCollection }) {
           <ItemSearch collection={collection} links={searchLinks}></ItemSearch>
         </Section>
       )}
+
+      <Children value={collection}></Children>
     </Stack>
   );
 }