add basic filter-by-tag functionality

Author: aedwardg

src/routes/Resources/ResourcePage.tsx

@@ -2,12 +2,14 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router";
 import { JsonData, Entry } from "./types";
 import ResourceCard from "./ResourceCard";
-import { sortEntries } from "./utils";
+import { extractTags, sortEntries } from "./utils";
 
 const ResourcePage = () => {
   const { category } = useParams();
   const [data, setData] = useState<JsonData | null>(null);
   const [entries, setEntries] = useState<Entry[]>([]);
+  const [tags, setTags] = useState<string[]>([]);
+  const [filters, setFilters] = useState<string[]>([]);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -26,19 +28,54 @@ const ResourcePage = () => {
         if (json.entries.length > 0) {
           setData(json);
           setEntries(sortEntries(json.entries));
+          setTags(extractTags(json.entries));
         }
       })
       .catch(console.error);
   }, [category]);
 
+  const filterColor = (tag: string) =>
+    filters.includes(tag) ? "bg-slate-400" : "bg-slate-300";
+
   if (data) {
     return (
       <>
-        <section className="h-2/3 w-full bg-background">
+        <section className="w-full bg-background">
           <h3 className="my-12 text-center text-4xl text-primary">
             {data.pageName}
           </h3>
-          <div className="flex w-full justify-center">
+          <div className="mb-6 flex w-full flex-col items-center justify-center text-center">
+            <h4 className="text-xl font-bold text-primary">Categories</h4>
+            <div className="mt-4 flex w-96 flex-wrap justify-center gap-2 xl:w-[600px]">
+              {tags.map((t) => (
+                <div
+                  key={t}
+                  onClick={() => {
+                    setFilters([...filters, t]);
+                    setEntries(entries.filter((e) => e.tags.includes(t)));
+                  }}
+                >
+                  <button
+                    className={`rounded-xl border-transparent bg-slate-300 px-2 pb-1 ${filterColor(t)}`}
+                  >
+                    {t}
+                  </button>
+                </div>
+              ))}
+              {filters.length > 0 && (
+                <button
+                  className="rounded-xl bg-accent px-2 pb-1 text-primary"
+                  onClick={() => {
+                    setFilters([]);
+                    setEntries(sortEntries(data.entries));
+                  }}
+                >
+                  Clear filters &times;
+                </button>
+              )}
+            </div>
+          </div>
+          <div className="flex w-full justify-center pb-12">
             <div className="mx-4 flex flex-wrap justify-center gap-6 sm:w-5/6 xl:w-3/4">
               {entries.map((e) => (
                 <ResourceCard entry={e} key={e.title} />

src/routes/Resources/utils.ts

@@ -5,3 +5,12 @@ export const sortEntries = (entries: Entry[]) =>
 
 const sanitize = (title: string) =>
   title.toLowerCase().replace("the", "").trim();
+
+export const extractTags = (entries: Entry[]) => [
+  ...new Set(
+    entries.reduce<string[]>((acc, cur) => {
+      acc.push(...cur.tags);
+      return acc;
+    }, []),
+  ),
+];