Merge pull request #1937 from tijlleenders/vin/1935/sublist-summary-bug

fix: stale values returned by useSublistSummary hook

src/components/GoalsComponents/GoalConfigModal/ConfigGoal.tsx

@@ -2,7 +2,7 @@ import { SliderMarks } from "antd/es/slider";
 import { useTranslation } from "react-i18next";
 import React, { useEffect, useState } from "react";
 import { Slider } from "antd";
-import { displayToast, openDevMode } from "@src/store";
+import { displayToast, lastAction, openDevMode } from "@src/store";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { useLocation } from "react-router-dom";
 
@@ -58,6 +58,7 @@ const ConfigGoal = ({ goal, action }: { action: "Update" | "Create"; goal: GoalI
 
   const setDevMode = useSetRecoilState(openDevMode);
   const setShowToast = useSetRecoilState(displayToast);
+  const setLastAction = useSetRecoilState(lastAction);
 
   const [colorIndex, setColorIndex] = useRecoilState(selectedColorIndex);
   const showAddGoal = useRecoilValue(displayAddGoal);
@@ -182,6 +183,7 @@ const ConfigGoal = ({ goal, action }: { action: "Update" | "Create"; goal: GoalI
           extra: "Explore what's hidden",
         });
       }
+      setLastAction("goalItemCreated");
     }
     await mySound.play();
   };

src/hooks/useSublistSummary.ts

@@ -1,31 +1,41 @@
 import { useEffect, useState } from "react";
-import { getChildrenGoals, getGoal } from "@src/api/GoalsAPI";
+import { getChildrenGoals } from "@src/api/GoalsAPI";
 import { GoalItem } from "@src/models/GoalItem";
+import { lastAction } from "@src/store";
+import { useRecoilValue } from "recoil";
+
+const classifyChildrenGoalItems = (childrenGoals: GoalItem[]) => {
+  let goalsCount = 0;
+  let budgetsCount = 0;
+
+  childrenGoals.forEach((childGoal) => {
+    if (childGoal) {
+      if (childGoal.timeBudget && childGoal.timeBudget.perDay !== null) {
+        budgetsCount += 1;
+      } else {
+        goalsCount += 1;
+      }
+    }
+  });
+
+  return { goalsCount, budgetsCount };
+};
 
 export const useSublistSummary = ({ goal }: { goal: GoalItem }) => {
   const [subGoalsCount, setSubGoalsCount] = useState(0);
   const [subBudgetsCount, setSubBudgetsCount] = useState(0);
 
+  const action = useRecoilValue(lastAction);
+
   useEffect(() => {
     let isMounted = true;
 
-    const classifyChildren = async () => {
+    const updateSublistSummary = async () => {
       try {
-        const childrenGoalIds = await getChildrenGoals(goal.id);
-        const childrenGoals = await Promise.all(childrenGoalIds.map((goalItem) => getGoal(goalItem.id)));
-
-        let goalsCount = 0;
-        let budgetsCount = 0;
-
-        childrenGoals.forEach((childGoal) => {
-          if (childGoal) {
-            if (childGoal.timeBudget && childGoal.timeBudget.perDay !== null) {
-              budgetsCount += 1;
-            } else {
-              goalsCount += 1;
-            }
-          }
-        });
+        const childrenGoals = await getChildrenGoals(goal.id);
+        const unArchivedChildrenGoals = childrenGoals.filter((childGoal) => childGoal.archived === "false");
+
+        const { goalsCount, budgetsCount } = classifyChildrenGoalItems(unArchivedChildrenGoals);
 
         if (isMounted) {
           setSubGoalsCount(goalsCount);
@@ -38,12 +48,12 @@ export const useSublistSummary = ({ goal }: { goal: GoalItem }) => {
       }
     };
 
-    classifyChildren();
+    updateSublistSummary();
 
     return () => {
       isMounted = false;
     };
-  }, []);
+  }, [goal, action]);
 
   return { subGoalsCount, subBudgetsCount };
 };