added borders to day boxes with problems in them

uxdxdev · Nov 29, 2023 · ae97f27 · ae97f27
1 parent 20d2677
commit ae97f27
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 19 deletions.
diff --git a/src/components/IntervalIndicator.tsx b/src/components/IntervalIndicator.tsx
@@ -4,25 +4,30 @@ function IntervalIndicator({
   value,
   intervals,
   indicatorColor,
+  borderHighlightColor,
+  highlight,
+  title,
 }: {
   value: number;
   intervals: number[];
   indicatorColor: string;
+  borderHighlightColor: string;
+  highlight: number[];
+  title: string;
 }) {
   return (
     <div className="flex flex-row gap-2">
-      {intervals.map((interval, index) => {
-        return (
-          <div
-            key={index}
-            className={`w-6 flex justify-center rounded-lg ${
-              isIntervalActive(interval, value) ? indicatorColor : "background-none"
-            }`}
-          >
-            {interval}
-          </div>
-        );
-      })}
+      {intervals.map((interval, index) => (
+        <div
+          title={title}
+          key={index}
+          className={`w-6 flex justify-center rounded-lg ${
+            isIntervalActive(interval, value) ? indicatorColor : "background-none"
+          } border-solid border-2 ${highlight.includes(interval) && borderHighlightColor}`}
+        >
+          {interval}
+        </div>
+      ))}
     </div>
   );
 }

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -18,21 +18,40 @@ function Home({ day }: { day: number }) {
   const [done, setDone] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(true);
   const [totalNumberOfProblems, setTotalNumberOfProblems] = useState(0);
+  const [boxesWithProblems, setBoxesWithProblems] = useState<number[]>([]);
 
   // init
   useEffect(() => {
     const storedData = LocalStorage.getData();
     if (storedData) {
       setBoxes(storedData.boxes);
-      setTotalNumberOfProblems(
-        Object.values(storedData.boxes)
-          .map((arr) => arr.length)
-          .reduce((acc, cur) => acc + cur, 0)
-      );
+
       setDone(storedData.done);
     }
   }, []);
 
+  useEffect(() => {
+    const storedData = LocalStorage.getData();
+    if (storedData) {
+      const problemData = Object.entries(storedData.boxes).reduce(
+        (
+          acc: {
+            boxes: number[];
+            total: number;
+          },
+          [key, value]
+        ) => {
+          value.length > 0 && acc.boxes.push(+key);
+          acc.total = acc.total + value.length;
+          return acc;
+        },
+        { boxes: [], total: 0 }
+      );
+      setTotalNumberOfProblems(problemData.total);
+      setBoxesWithProblems(problemData.boxes);
+    }
+  }, [currentProblem]);
+
   useEffect(() => {
     // get boxes based on day
     const currentBoxes = getBoxes({ intervals, value: day });
@@ -63,8 +82,17 @@ function Home({ day }: { day: number }) {
 
   // highlight the intervals based on the current day
   const IntervalIndicatorMemo = useMemo(
-    () => <IntervalIndicator value={day} intervals={intervals} indicatorColor="background-green" />,
-    [day]
+    () => (
+      <IntervalIndicator
+        title={"Day of practice box, border to indicate problems exist"}
+        value={day}
+        intervals={intervals}
+        indicatorColor="bg-sky-300"
+        borderHighlightColor="border-fuchsia-500"
+        highlight={boxesWithProblems}
+      />
+    ),
+    [day, boxesWithProblems]
   );
 
   // prevent render flash