Lift state out of Header for refresh

audrey-yang · Dec 5, 2024 · 555cab2 · 555cab2
1 parent 97866e3
commit 555cab2
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 19 deletions.
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -1,7 +1,9 @@
+import { useState } from "react";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { CssBaseline, Typography } from "@mui/material";
 import Header from "./components/Header";
 import TaskList from "./components/TaskList";
+import { STATUS } from "./types";
 
 const darkTheme = createTheme({
   palette: {
@@ -17,15 +19,30 @@ const darkTheme = createTheme({
 });
 
 const App: () => JSX.Element = () => {
+  // Lift state out of Header for refresh
+  const [numUnstartedTasks, setNumUnstartedTasks] = useState(0);
+  const [numInProgressTasks, setNumInProgressTasks] = useState(0);
+  const [numCompletedTasks, setNumCompletedTasks] = useState(0);
+
+  const getTaskCounts = async () => {
+    setNumUnstartedTasks(await window.api.countChildTasksByStatus("", STATUS.NOT_STARTED));
+    setNumInProgressTasks(await window.api.countChildTasksByStatus("", STATUS.IN_PROGRESS));
+    setNumCompletedTasks(await window.api.countChildTasksByStatus("", STATUS.COMPLETED));
+  };
+
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
       <div className="App">
         <Typography variant="h3" className="my-2">
           Taskflow
         </Typography>
-        <Header />
-        <TaskList />
+        <Header
+          numUnstartedTasks={numUnstartedTasks}
+          numInProgressTasks={numInProgressTasks}
+          numCompletedTasks={numCompletedTasks}
+        />
+        <TaskList refreshHeader={getTaskCounts} />
       </div>
     </ThemeProvider>
   );

diff --git a/src/renderer/components/Header.tsx b/src/renderer/components/Header.tsx
@@ -1,25 +1,17 @@
-import { useState, useEffect } from "react";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
 import Typography from "@mui/material/Typography";
-import { STATUS } from "../types";
-
-const Header = () => {
-  const [numUnstartedTasks, setNumUnstartedTasks] = useState(0);
-  const [numInProgressTasks, setNumInProgressTasks] = useState(0);
-  const [numCompletedTasks, setNumCompletedTasks] = useState(0);
-
-  const getTaskCounts = async () => {
-    setNumUnstartedTasks(await window.api.countChildTasksByStatus("", STATUS.NOT_STARTED));
-    setNumInProgressTasks(await window.api.countChildTasksByStatus("", STATUS.IN_PROGRESS));
-    setNumCompletedTasks(await window.api.countChildTasksByStatus("", STATUS.COMPLETED));
-  };
-
-  useEffect(() => {
-    getTaskCounts();
-  }, []);
 
+const Header = ({
+  numUnstartedTasks,
+  numInProgressTasks,
+  numCompletedTasks,
+}: {
+  numUnstartedTasks: number;
+  numInProgressTasks: number;
+  numCompletedTasks: number;
+}) => {
   return (
     <div className="flex flex-row">
       <div className="flex flex-col my-5 px-5">

diff --git a/src/renderer/components/TaskList.tsx b/src/renderer/components/TaskList.tsx
@@ -7,9 +7,11 @@ import { DBTask } from "../types";
 const TaskList = ({
   parentId,
   parentIsCompleted,
+  refreshHeader,
 }: {
   parentId?: string;
   parentIsCompleted?: boolean;
+  refreshHeader?: () => void;
 }) => {
   parentIsCompleted = parentIsCompleted ?? false;
   const [incompleteTasks, setIncompleteTasks] = useState<DBTask[]>([]);
@@ -20,6 +22,10 @@ const TaskList = ({
     try {
       setIncompleteTasks(await window.api.getChildTasksIncomplete(parentId ?? ""));
       setCompleteTasks(await window.api.getChildTasksComplete(parentId ?? ""));
+      if (!parentId) {
+        // Refresh the header only at the top level
+        refreshHeader();
+      }
     } catch (err) {
       // Retry if PouchDB fails
       if (tries === undefined) {