Merge pull request #11 from danreale/10-add-favorites

added favorites in local storage
danreale · Sep 21, 2024 · 4d59bd5 · 4d59bd5
2 parents cb2a86f + 45d59e5
commit 4d59bd5
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 11 deletions.
diff --git a/app/components/RegionDataV2.tsx b/app/components/RegionDataV2.tsx
@@ -5,6 +5,8 @@ import BloodTypeDataTile from "./BloodTypeDataTile";
 import { Link } from "@remix-run/react";
 import InformationCircle from "~/icons/information-circle";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import { useLayoutEffect, useState } from "react";
+import { FaRegStar, FaStar } from "react-icons/fa";
 
 export default function RegionData({
   transplantData,
@@ -28,18 +30,64 @@ export default function RegionData({
   >;
   regionNumber: number;
 }) {
+  const [regionFavorite, setRegionFavorite] = useState(false);
+
+  function handleSetRegionFavorite(region: string) {
+    if (regionFavorite) {
+      localStorage.setItem(region, "false");
+      localStorage.removeItem(region);
+      setRegionFavorite(false);
+    } else {
+      localStorage.setItem(region, "true");
+      setRegionFavorite(true);
+    }
+  }
+  useLayoutEffect(() => {
+    const isFave = window.localStorage.getItem(`Region${regionNumber}`);
+    if (isFave) {
+      localStorage.setItem(`Region${regionNumber}`, "true");
+      setRegionFavorite(true);
+    }
+  }, []);
   return (
     <>
       <div className="flex justify-center items-center gap-x-2">
-        <h2 className="text-2xl text-center">Region {regionNumber}</h2>
+        <div className="flex justify-center text-center">
+          <button
+            onClick={() => handleSetRegionFavorite(`Region${regionNumber}`)}
+          >
+            {regionFavorite ? (
+              <FaStar className="text-yellow-400" />
+            ) : (
+              <FaRegStar className="font-bold" />
+            )}
+          </button>
+        </div>
+        {regionFavorite ? (
+          <h2 className="text-2xl text-center text-indigo-600 font-bold italic">
+            Region {regionNumber}
+          </h2>
+        ) : (
+          <h2 className="text-2xl text-center">Region {regionNumber}</h2>
+        )}
         <Popover className="relative">
           {/* may need to be bigger for a11y */}
-          <PopoverButton className="flex items-center" aria-label={`Show list of states for region ${regionNumber}`}>
+          <PopoverButton
+            className="flex items-center"
+            aria-label={`Show list of states for region ${regionNumber}`}
+          >
             <InformationCircle className="size-8 fill-blue-600 stroke-white" />
           </PopoverButton>
-          <PopoverPanel anchor={{ to: 'bottom start', gap: '4px' }} modal focus className="flex flex-col bg-white border rounded p-2">
+          <PopoverPanel
+            anchor={{ to: "bottom start", gap: "4px" }}
+            modal
+            focus
+            className="flex flex-col bg-white border rounded p-2"
+          >
             <ul>
-              {regionStates(regionNumber).map(state => <li key={state}>{state}</li>)}
+              {regionStates(regionNumber).map((state) => (
+                <li key={state}>{state}</li>
+              ))}
             </ul>
           </PopoverPanel>
         </Popover>
@@ -60,18 +108,46 @@ export default function RegionData({
                 </p>
               </li> */}
 
-              <li key={`record-${index}`} className="flex justify-center flex-wrap gap-2">
-                <BloodTypeDataTile label="A" count={record.blood_type_a} change={record.blood_type_a_change} />
-                <BloodTypeDataTile label="B" count={record.blood_type_b} change={record.blood_type_b_change} />
-                <BloodTypeDataTile label="AB" count={record.blood_type_ab} change={record.blood_type_ab_change} />
-                <BloodTypeDataTile label="O" count={record.blood_type_o} change={record.blood_type_o_change} />
-                <BloodTypeDataTile label="All" count={record.blood_type_all} change={record.blood_type_all_change} />
+              <li
+                key={`record-${index}`}
+                className="flex justify-center flex-wrap gap-2"
+              >
+                <BloodTypeDataTile
+                  label="A"
+                  count={record.blood_type_a}
+                  change={record.blood_type_a_change}
+                />
+                <BloodTypeDataTile
+                  label="B"
+                  count={record.blood_type_b}
+                  change={record.blood_type_b_change}
+                />
+                <BloodTypeDataTile
+                  label="AB"
+                  count={record.blood_type_ab}
+                  change={record.blood_type_ab_change}
+                />
+                <BloodTypeDataTile
+                  label="O"
+                  count={record.blood_type_o}
+                  change={record.blood_type_o_change}
+                />
+                <BloodTypeDataTile
+                  label="All"
+                  count={record.blood_type_all}
+                  change={record.blood_type_all_change}
+                />
               </li>
             </>
           ))}
         </ul>
         <div className="flex justify-center">
-          <Link className="font-semibold my-4 text-blue-600" to={`/charts/${regionNumber}`}>View Trends</Link>
+          <Link
+            className="font-semibold my-4 text-blue-600"
+            to={`/charts/${regionNumber}`}
+          >
+            View Trends
+          </Link>
         </div>
       </div>
     </>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "nodemailer": "^6.9.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0",
     "recharts": "^2.12.3"
   },
   "devDependencies": {