[learn-example][m] - add facets to catalog component (#841)

examples/learn-example/components/Catalog.tsx

@@ -1,40 +1,119 @@
 import { Index } from 'flexsearch';
 import { useState } from 'react';
 import DebouncedInput from './DebouncedInput';
+import { useForm } from 'react-hook-form';
 
-export default function Catalog({ datasets }: { datasets: any[] }) {
+export default function Catalog({
+  datasets,
+  facets,
+}: {
+  datasets: any[];
+  facets: string[];
+}) {
   const [indexFilter, setIndexFilter] = useState('');
-  const index = new Index({ tokenize: "full"});
+  const index = new Index({ tokenize: 'full' });
   datasets.forEach((dataset) =>
     index.add(
       dataset._id,
+      //This will join every metadata value + the url_path into one big string and index that
       Object.entries(dataset.metadata).reduce(
-            (acc, curr) => acc + ' ' + curr.toString(),
-            ''
-          ) + ' ' + dataset.url_path
+        (acc, curr) => acc + ' ' + curr[1].toString(),
+        ''
+      ) +
+        ' ' +
+        dataset.url_path
     )
   );
+
+  const facetValues = facets
+    ? facets.reduce((acc, facet) => {
+        const possibleValues = datasets.reduce((acc, curr) => {
+          const facetValue = curr.metadata[facet];
+          if (facetValue) {
+            return Array.isArray(facetValue)
+              ? acc.concat(facetValue)
+              : acc.concat([facetValue]);
+          }
+          return acc;
+        }, []);
+        acc[facet] = {
+          possibleValues: [...new Set(possibleValues)],
+          selectedValue: null,
+        };
+        return acc;
+      }, {})
+    : [];
+
+  const { register, watch } = useForm(facetValues);
+
+  const filteredDatasets = datasets
+    // First filter by flex search
+    .filter((dataset) =>
+      indexFilter !== ''
+        ? index.search(indexFilter).includes(dataset._id)
+        : true
+    )
+    //Then check if the selectedValue for the given facet is included in the dataset metadata
+    .filter((dataset) => {
+      //Avoids a server rendering breakage
+      if (!watch() || Object.keys(watch()).length === 0) return true
+      //This will filter only the key pairs of the metadata values that were selected as facets
+      const datasetFacets = Object.entries(dataset.metadata).filter((entry) =>
+        facets.includes(entry[0])
+      );
+      //Check if the value present is included in the selected value in the form
+      return datasetFacets.every((elem) =>
+        watch()[elem[0]].selectedValue
+          ? (elem[1] as string | string[]).includes(
+              watch()[elem[0]].selectedValue
+            )
+          : true
+      );
+    });
+
   return (
     <>
       <DebouncedInput
         value={indexFilter ?? ''}
         onChange={(value) => setIndexFilter(String(value))}
-        className="p-2 text-sm shadow border border-block"
+        className="p-2 text-sm shadow border border-block mr-1"
         placeholder="Search all datasets..."
       />
+      {Object.entries(facetValues).map((elem) => (
+        <select
+          key={elem[0]}
+          defaultValue=""
+          className="p-2 ml-1 text-sm shadow border border-block"
+          {...register(elem[0] + '.selectedValue')}
+        >
+          <option value="">
+            Filter by {elem[0]}
+          </option>
+          {(elem[1] as { possibleValues: string[] }).possibleValues.map(
+            (val) => (
+              <option
+                key={val}
+                className="dark:bg-white dark:text-black"
+                value={val}
+              >
+                {val}
+              </option>
+            )
+          )}
+        </select>
+      ))}
       <ul>
-        {datasets
-          .filter((dataset) =>
-            indexFilter !== ''
-              ? index.search(indexFilter).includes(dataset._id)
-              : true
-          )
-          .map((dataset) => (
-            <li key={dataset._id}>
-              <a href={dataset.url_path}>{dataset.metadata.title ? dataset.metadata.title : dataset.url_path}</a>
-            </li>
-          ))}
+        {filteredDatasets.map((dataset) => (
+          <li key={dataset._id}>
+            <a href={dataset.url_path}>
+              {dataset.metadata.title
+                ? dataset.metadata.title
+                : dataset.url_path}
+            </a>
+          </li>
+        ))}
       </ul>
     </>
   );
 }
+