feature/IO-3096-GlobalNotifications - Watchers - First revision.

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

@@ -0,0 +1,71 @@
+import { useCallback, useMemo } from "react";
+import { useMutation, useQuery } from "@apollo/client";
+import { EyeFilled, EyeOutlined } from "@ant-design/icons";
+import { GET_JOB_WATCHERS, ADD_JOB_WATCHER, REMOVE_JOB_WATCHER } from "../../graphql/jobs.queries.js";
+import { Button, Tooltip } from "antd";
+import { useTranslation } from "react-i18next";
+
+const JobWatcherToggle = ({ job, currentUser }) => {
+  const { t } = useTranslation();
+  const userEmail = currentUser.email;
+  const jobid = job.id;
+
+  // Fetch current watchers
+  const { data, loading } = useQuery(GET_JOB_WATCHERS, {
+    variables: { jobid }
+  });
+
+  // Extract current watchers list
+  const jobWatchers = useMemo(() => data?.job_watchers || [], [data]);
+  const isWatching = useMemo(() => !!jobWatchers.find((w) => w.user_email === userEmail), [jobWatchers, userEmail]);
+
+  // Add watcher mutation
+  const [addWatcher] = useMutation(ADD_JOB_WATCHER, {
+    variables: { jobid, userEmail },
+    refetchQueries: [{ query: GET_JOB_WATCHERS, variables: { jobid } }]
+  });
+
+  // Remove watcher mutation
+  const [removeWatcher] = useMutation(REMOVE_JOB_WATCHER, {
+    variables: { jobid, userEmail },
+    refetchQueries: [{ query: GET_JOB_WATCHERS, variables: { jobid } }]
+  });
+
+  // Toggle watcher status
+  const handleToggle = useCallback(() => {
+    if (!isWatching) {
+      // Fix: Add if not watching, remove if watching
+      addWatcher().catch((err) => console.error(`Something went wrong adding a job watcher: ${err.message}`));
+    } else {
+      removeWatcher().catch((err) => console.error(`Something went wrong removing a job watcher: ${err.message}`));
+    }
+  }, [isWatching, addWatcher, removeWatcher]);
+
+  if (loading) {
+    return (
+      <Tooltip title={t("notifications.tooltips.unwatch")}>
+        <Button
+          shape="circle"
+          type="primary"
+          icon={<EyeFilled />}
+          disabled
+          aria-label={t("notifications.aria.toggle")}
+        />
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip title={isWatching ? t("notifications.tooltips.unwatch") : t("notifications.tooltips.watch")}>
+      <Button
+        shape="circle"
+        type={isWatching ? "primary" : "default"}
+        icon={isWatching ? <EyeFilled /> : <EyeOutlined />}
+        onClick={handleToggle}
+        aria-label={t("notifications.aria.toggle")}
+      />
+    </Tooltip>
+  );
+};
+
+export default JobWatcherToggle;

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -2,6 +2,7 @@ import Icon, {
   BarsOutlined,
   CalendarFilled,
   DollarCircleOutlined,
+  EyeOutlined,
   FileImageFilled,
   HistoryOutlined,
   PrinterFilled,
@@ -56,6 +57,7 @@ import { DateTimeFormat } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
 import UndefinedToNull from "../../utils/undefinedtonull";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import JobWatcherToggle from "./job-watcher-toggle.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -266,6 +268,8 @@ export function JobsDetailPage({
     }
   };
 
+  const handleWatchClick = () => {};
+
   const menuExtra = (
     <Space wrap>
       <Button
@@ -319,7 +323,13 @@ export function JobsDetailPage({
       >
         <PageHeader
           // onBack={() => window.history.back()}
-          title={job.ro_number || t("general.labels.na")}
+
+          title={
+            <Space>
+              <JobWatcherToggle job={job} currentUser={bodyshop} />
+              {job.ro_number || t("general.labels.na")}
+            </Space>
+          }
           extra={menuExtra}
         />
         <JobsDetailHeader job={job} />