make changeWatch work across tabs #124

move `changeWatch` to `TaskTabs & pass it down the component tree
blahosyl · Aug 14, 2024 · 2227e22 · 2227e22
1 parent 199b3a4
commit 2227e22
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/pages/tasks/TaskList.js b/src/pages/tasks/TaskList.js
@@ -18,13 +18,11 @@ import NoResults from "../../assets/no-results.png";
 // import ProfileList from "../profiles/ProfileList";
 import { useCurrentUser } from "../../contexts/CurrentUserContext";
 
-function TaskList({ message, filter = "" , taskList}) {
+function TaskList({ message, filter = "" , taskList, changedWatch, setChangedWatch}) {
   const [tasks, setTasks] = useState({ results: [] });
 
   const [hasLoaded, setHasLoaded] = useState(false);
 
-  const [changedWatch, setChangedWatch] = useState(false);
-
   const { pathname } = useLocation();
 
   const [query, setQuery] = useState("");
@@ -43,14 +41,15 @@ function TaskList({ message, filter = "" , taskList}) {
     };
 
     setHasLoaded(false);
+    setChangedWatch(false);
     const timer = setTimeout(() => {
       fetchTasks();
     }, 1000);
 
     return () => {
       clearTimeout(timer);
     };
-  }, [filter, query, pathname, currentUser, changedWatch]);
+  }, [filter, query, pathname, currentUser, changedWatch, setChangedWatch]);
 
   return (
     <Row className="h-100 mt-3">

diff --git a/src/pages/tasks/TaskTabs.js b/src/pages/tasks/TaskTabs.js
@@ -23,6 +23,8 @@ function TaskTabs(props) {
 
   const [tasks, setTasks] = useState({ results: [] });
 
+  // track if the watched status of a task has changed
+  const [changedWatch, setChangedWatch] = useState(false);
 
   // set whether to render tasks in a list or Kanban format
   const TaskComponent = taskList ? TaskList : TaskKanban
@@ -53,7 +55,6 @@ function TaskTabs(props) {
     };
     fetchData();
   }, [id, setProfileData,taskList]);
-
 
   return (
     <Row className="h-100">
@@ -72,6 +73,8 @@ function TaskTabs(props) {
               filter={`assignee__profile=${profile_id}&ordering=-updated_at&`}
               tasks={tasks}
               setTasks={setTasks}
+              changedWatch={changedWatch}
+              setChangedWatch={setChangedWatch}
             />
           </Tab>
           <Tab 
@@ -87,6 +90,8 @@ function TaskTabs(props) {
               filter={`watched__owner__profile=${profile_id}&ordering=-watchers__created_at&`}
               tasks={tasks}
               setTasks={setTasks}
+              changedWatch={changedWatch}
+              setChangedWatch={setChangedWatch}
             />
           </Tab>
           <Tab 
@@ -102,6 +107,8 @@ function TaskTabs(props) {
               filter={`owner__profile=${profile_id}&ordering=-created_at&`}
               tasks={tasks}
               setTasks={setTasks}
+              changedWatch={changedWatch}
+              setChangedWatch={setChangedWatch}
             />
           </Tab>
           <Tab 
@@ -115,6 +122,8 @@ function TaskTabs(props) {
               message="No results found. Adjust the search keyword."
               tasks={tasks}
               setTasks={setTasks}
+              changedWatch={changedWatch}
+              setChangedWatch={setChangedWatch}
             />
           </Tab>
         </Tabs>