IO-3292 Add note pinning functionality.

client/src/components/job-notes-pin-toggle/job-notes-pin-toggle.component.jsx

@@ -0,0 +1,52 @@
+import { PushpinFilled, PushpinOutlined } from "@ant-design/icons";
+import { useMutation } from "@apollo/client";
+import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
+import { UPDATE_NOTE } from "../../graphql/notes.queries";
+
+function JobNotesPinToggle({ note }) {
+  const [updateNote] = useMutation(UPDATE_NOTE, {
+    update(cache, { data: { updateNote: updatedNote } }) {
+      try {
+        const existingJob = cache.readQuery({
+          query: GET_JOB_BY_PK,
+          variables: { id: note.jobid }
+        });
+
+        if (existingJob) {
+          cache.writeQuery({
+            query: GET_JOB_BY_PK,
+            variables: { id: note.jobid },
+            data: {
+              ...existingJob,
+              job: {
+                ...existingJob.job,
+                notes: updatedNote.pinned
+                  ? [updatedNote, ...existingJob.job.notes]
+                  : existingJob.job.notes.filter((n) => n.id !== updatedNote.id)
+              }
+            }
+          });
+        }
+      } catch (error) {
+        // Query not yet executed is most likely. No logging as this isn't a fatal error.
+      }
+    }
+  });
+
+  const handlePinToggle = () => {
+    updateNote({
+      variables: {
+        noteId: note.id,
+        note: { pinned: !note.pinned }
+      }
+    });
+  };
+
+  return note.pinned ? (
+    <PushpinFilled size="large" onClick={handlePinToggle} style={{ color: "gold" }} />
+  ) : (
+    <PushpinOutlined size="large" onClick={handlePinToggle} />
+  );
+}
+
+export default JobNotesPinToggle;