feature/IO-3096-GlobalNotifications - Code Review Part 3

client/src/graphql/jobs.queries.js

@@ -2595,6 +2595,10 @@ export const REMOVE_JOB_WATCHER = gql`
   mutation REMOVE_JOB_WATCHER($jobid: uuid!, $userEmail: String!) {
     delete_job_watchers(where: { jobid: { _eq: $jobid }, user_email: { _eq: $userEmail } }) {
       affected_rows
+      returning {
+        id
+        user_email
+      }
     }
   }
 `;

client/src/pages/jobs-detail/job-watcher-toggle.component.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useMutation, useQuery } from "@apollo/client";
 import { EyeFilled, EyeOutlined, UserOutlined } from "@ant-design/icons";
 import { ADD_JOB_WATCHER, GET_JOB_WATCHERS, REMOVE_JOB_WATCHER } from "../../graphql/jobs.queries.js";
@@ -43,13 +43,49 @@ const JobWatcherToggle = ({ job, currentUser, bodyshop }) => {
 
   const isWatching = jobWatchers.some((w) => w.user_email === userEmail);
 
+  // Add watcher mutation with cache update
   const [addWatcher, { loading: adding }] = useMutation(ADD_JOB_WATCHER, {
-    refetchQueries: [{ query: GET_JOB_WATCHERS, variables: { jobid } }]
+    update(cache, { data: { insert_job_watchers_one } }) {
+      const existingData = cache.readQuery({
+        query: GET_JOB_WATCHERS,
+        variables: { jobid }
+      });
+
+      const updatedWatchers = [...(existingData?.job_watchers || []), insert_job_watchers_one];
+
+      cache.writeQuery({
+        query: GET_JOB_WATCHERS,
+        variables: { jobid },
+        data: {
+          ...existingData,
+          job_watchers: updatedWatchers
+        }
+      });
+    }
   });
 
-  // Remove watcher mutation
+  // Remove watcher mutation with cache update
   const [removeWatcher, { loading: removing }] = useMutation(REMOVE_JOB_WATCHER, {
-    refetchQueries: [{ query: GET_JOB_WATCHERS, variables: { jobid } }]
+    update(cache, { data: { delete_job_watchers } }) {
+      const existingData = cache.readQuery({
+        query: GET_JOB_WATCHERS,
+        variables: { jobid }
+      });
+
+      const deletedWatcher = delete_job_watchers.returning[0]; // Safely assume one row deleted
+      const updatedWatchers = deletedWatcher
+        ? (existingData?.job_watchers || []).filter((watcher) => watcher.user_email !== deletedWatcher.user_email)
+        : existingData?.job_watchers || []; // No change if nothing deleted
+
+      cache.writeQuery({
+        query: GET_JOB_WATCHERS,
+        variables: { jobid },
+        data: {
+          ...existingData,
+          job_watchers: updatedWatchers
+        }
+      });
+    }
   });
 
   // Toggle watcher for self
@@ -91,7 +127,6 @@ const JobWatcherToggle = ({ job, currentUser, bodyshop }) => {
       (email) => !jobWatchers.some((watcher) => watcher.user_email === email)
     );
 
-    // Add each new watcher
     newWatchers.forEach((email) => {
       addWatcher({ variables: { jobid, userEmail: email } }).catch((err) =>
         console.error(`Error adding job watcher: ${err.message}`)
@@ -122,7 +157,6 @@ const JobWatcherToggle = ({ job, currentUser, bodyshop }) => {
     );
   };
 
-  // Popover content
   const popoverContent = (
     <div style={{ width: 600 }}>
       <Button
@@ -155,12 +189,11 @@ const JobWatcherToggle = ({ job, currentUser, bodyshop }) => {
         <>
           <Divider />
           <Text type="secondary">{t("notifications.labels.add-watchers-team")}</Text>
-
           <Select
             showSearch
             style={{ minWidth: "100%" }}
             placeholder={t("notifications.labels.teams-search")}
-            value={selectedTeam} // Controlled value
+            value={selectedTeam}
             onChange={handleTeamSelect}
             options={bodyshop.employee_teams.map((team) => {
               const teamMembers = team.employee_team_members