From 45d59e5ecaff2aaf6c67f6d737a6414b2eee277d Mon Sep 17 00:00:00 2001
From: Dan Reale <danreale10@gmail.com>
Date: Thu, 19 Sep 2024 16:19:35 -0400
Subject: [PATCH] added favorites in local storage

---
 app/components/RegionDataV2.tsx | 98 +++++++++++++++++++++++++++++----
 package-lock.json               |  9 +++
 package.json                    |  1 +
 3 files changed, 97 insertions(+), 11 deletions(-)

diff --git a/app/components/RegionDataV2.tsx b/app/components/RegionDataV2.tsx
index 0c27ca4..0766f2f 100644
--- 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
index 5f87a8b..cbfe5c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "nodemailer": "^6.9.12",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.3.0",
         "recharts": "^2.12.3"
       },
       "devDependencies": {
@@ -9086,6 +9087,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 374b27b..7826663 100644
--- 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": {