- Progress Commit

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/task-list/task-list.container.jsx

@@ -7,7 +7,7 @@ import {
 } from "../../graphql/tasks.queries.js";
 import {pageLimit} from "../../utils/config.js";
 import AlertComponent from "../alert/alert.component.jsx";
-import React from "react";
+import React, {useEffect} from "react";
 import TaskListComponent from "./task-list.component.jsx";
 
 export default function TaskListContainer({bodyshop, currentUser}) {
@@ -37,9 +37,36 @@ export default function TaskListContainer({bodyshop, currentUser}) {
       },
     }
   );
-  
+
+  /**
+   * Refetch tasks when a task is updated
+   */
+  useEffect(() => {
+    const handleTaskUpdated = () => {
+      refetch().catch((e) => {
+        console.error(`Something went wrong fetching tasks: ${e.message || ''}`);
+      });    };
+
+    window.addEventListener('taskUpdated', handleTaskUpdated);
+    window.addEventListener('taskCreated', handleTaskUpdated);
+
+    return () => {
+      window.removeEventListener('taskUpdated', handleTaskUpdated);
+      window.removeEventListener('taskCreated', handleTaskUpdated);
+    };
+  }, [refetch]);
+
+  /**
+   * Toggle task completed mutation
+   */
   const [toggleTaskCompleted] = useMutation(MUTATION_TOGGLE_TASK_COMPLETED);
 
+  /**
+   * Toggle task completed status
+   * @param id
+   * @param currentStatus
+   * @returns {Promise<void>}
+   */
   const toggleCompletedStatus = async (id, currentStatus) => {
     const completed_at = !currentStatus ? new Date().toISOString() : null;
     await toggleTaskCompleted({
@@ -49,11 +76,21 @@ export default function TaskListContainer({bodyshop, currentUser}) {
         completed_at: completed_at
       }
     });
-    refetch();
-  };
+    refetch().catch((e) => {
+      console.error(`Something went wrong fetching tasks: ${e.message || ''}`);
+    });  };
 
+  /**
+   * Toggle task deleted mutation
+   */
   const [toggleTaskDeleted] = useMutation(MUTATION_TOGGLE_TASK_DELETED);
 
+  /**
+   * Toggle task deleted status
+   * @param id
+   * @param currentStatus
+   * @returns {Promise<void>}
+   */
   const toggleDeletedStatus = async (id, currentStatus) => {
     const deleted_at = !currentStatus ? new Date().toISOString() : null;
     await toggleTaskDeleted({
@@ -63,7 +100,9 @@ export default function TaskListContainer({bodyshop, currentUser}) {
         deleted_at: deleted_at
       }
     });
-    refetch();
+    refetch().catch((e) => {
+      console.error(`Something went wrong fetching tasks: ${e.message || ''}`);
+    });
   };
 
   if (error) return <AlertComponent message={error.message} type="error"/>;