example: Integrate useCollections

Author: oliverroick

example/src/App.js

@@ -3,7 +3,7 @@ import Main from "./pages/Main";
 
 function App() {
   return (
-    <div className="App h-screen grid grid-rows-[min-content_1fr]">
+    <div className="App grid grid-rows-[min-content_1fr]">
       <Header />
       <main className="flex items-stretch">
         <Main />

example/src/components/headers/index.jsx

@@ -1,11 +1,12 @@
 import T from 'prop-types';
 
-export function H2({ children }) {
-  return <h2 className='font-bold text-lg'>{children}</h2>;
+export function H2({ children, className }) {
+  return <h2 className={`font-bold text-lg ${className}`}>{children}</h2>;
 }
 
 const Props = {
   children: T.node.isRequired,
+  className: T.string
 }
 
 H2.propTypes = Props;

example/src/layout/Panel/index.jsx

@@ -1,7 +1,7 @@
 import T from 'prop-types';
 
 function Panel({ children, className }) {
-  return <div className={`bg-slate-100 p-4 ${className}`}>{ children }</div>;
+  return <div className={`bg-slate-100 ${className}`}>{ children }</div>;
 }
 
 Panel.propTypes = {

example/src/layout/Section/index.jsx

@@ -1,7 +1,7 @@
 import T from 'prop-types';
 
 function Section({ children, className }) {
-  return <div className={`my-8 ${className}`}>{ children }</div>;
+  return <div className={`${className}`}>{ children }</div>;
 }
 
 Section.propTypes = {

example/src/pages/Main/ItemList.jsx

@@ -29,7 +29,7 @@ PaginationButton.propTypes = {
 
 function ItemList ({ items, isLoading, error, nextPage, previousPage }) {
   return (
-    <Panel className="grid grid-rows-[1fr_min-content]">
+    <Panel className="grid grid-rows-[1fr_min-content] p-4">
       <div className="overflow-x-clip">
         <H2>Item List</H2>
         {isLoading && (<p>Loading...</p>)}

example/src/pages/Main/QueryBuilder.jsx

@@ -1,17 +1,17 @@
 import T from 'prop-types';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
+
+import { useCollections, StacApi } from "stac-react";
 
 import { PrimaryButton } from "../../components/buttons";
 import { Checkbox, Legend } from '../../components/form';
 import { H2 } from "../../components/headers";
 import Panel from "../../layout/Panel";
 import Section from '../../layout/Section';
 
-import { collectionsOptions } from '../../config';
-
 function QueryBuilder ({
   setIsBboxDrawEnabled,
-  collections,
+  collections: selectedCollections,
   setCollections,
   handleSubmit,
   dateRangeFrom,
@@ -20,25 +20,33 @@ function QueryBuilder ({
   setDateRangeTo
 }) {
   const handleEnableBbox = useCallback(() => setIsBboxDrawEnabled(true), [setIsBboxDrawEnabled]);
-
+  
   const handleRangeFromChange = useCallback((e) => setDateRangeFrom(e.target.value), [setDateRangeFrom]);
   const handleRangeToChange = useCallback((e) => setDateRangeTo(e.target.value), [setDateRangeTo]);
+  
+  const stacApi = useMemo(() => new StacApi(process.env.REACT_APP_STAC_API), []);
+  const { collections } = useCollections(stacApi);
+
+  const collectionOptions = useMemo(
+    () => collections ? collections.collections.map(({ id, title }) => ({ value: id, label: title})) : [],
+    [collections]
+  );
 
   return (
-    <Panel>
-      <H2>Query Builder</H2>
+    <Panel className="py-4 grid grid-rows-[min-content_auto_min-content_min-content_min-content] gap-4 h-[calc(100vh_-_90px)]">
+      <H2 className="px-4">Query Builder</H2>
 
-      <Section>
+      <Section className="px-4 overflow-x-hidden overflow-y-auto">
         <Checkbox
           label="Select Collections"
           name="collections"
-          options={collectionsOptions}
-          values={collections}
+          options={collectionOptions}
+          values={selectedCollections}
           onChange={setCollections}
         />
       </Section>
 
-      <Section>
+      <Section className="px-4">
         <fieldset>
           <Legend>Select Date Range</Legend>
           <label htmlFor='date_from'>From</label>
@@ -48,11 +56,11 @@ function QueryBuilder ({
         </fieldset>
       </Section>
 
-      <Section>
+      <Section className="px-4">
         <PrimaryButton onClick={handleEnableBbox}>Set bbox</PrimaryButton>
       </Section>
 
-      <Section>
+      <Section className="px-4">
         <PrimaryButton onClick={handleSubmit}>Submit</PrimaryButton>
       </Section>
     </Panel>

example/src/pages/Main/index.jsx

@@ -7,7 +7,7 @@ import QueryBuilder from "./QueryBuilder";
 
 function Main() {
   const [isBboxDrawEnabled, setIsBboxDrawEnabled] = useState(false);
-  const stacApi = new StacApi(process.env.REACT_APP_STAC_API)
+  const stacApi = new StacApi(process.env.REACT_APP_STAC_API);
   const {
     setBbox,
     collections,