Begin addign loading state to mutations BOD-134

client/src/components/jobs-notes/jobs-notes.container.jsx

@@ -1,31 +1,49 @@
-import React from "react";
-import JobNotesComponent from "./jobs.notes.component";
-import { useQuery, useMutation } from "@apollo/react-hooks";
-import AlertComponent from "../../components/alert/alert.component";
+import { useMutation, useQuery } from "@apollo/react-hooks";
+import { notification } from "antd";
+import React, { useState } from "react";
 //import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
-import {
-  QUERY_NOTES_BY_JOB_PK,
-  DELETE_NOTE
-} from "../../graphql/notes.queries";
+import { useTranslation } from "react-i18next";
+import AlertComponent from "../../components/alert/alert.component";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { DELETE_NOTE, QUERY_NOTES_BY_JOB_PK } from "../../graphql/notes.queries";
+import JobNotesComponent from "./jobs.notes.component";
+
 
 export default function JobNotesContainer({ jobId }) {
   const { loading, error, data, refetch } = useQuery(QUERY_NOTES_BY_JOB_PK, {
     variables: { id: jobId },
-    fetchPolicy: "network-only"
+    fetchPolicy: "network-only",
   });
 
-
   const [deleteNote] = useMutation(DELETE_NOTE);
+  const { t } = useTranslation();
+  const [deleteLoading, setDeleteLoading] = useState(false);
+  const handleNoteDelete = (id) => {
+    logImEXEvent("job_note_delete");
+    setDeleteLoading(true);
+    deleteNote({
+      variables: {
+        noteId: id,
+      },
+    }).then((r) => {
+      refetch();
+      notification["success"]({
+        message: t("notes.successes.deleted"),
+      });
+    });
+    setDeleteLoading(false);
+  };
 
   //if (loading) return <SpinComponent />;
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
   return (
     <JobNotesComponent
       jobId={jobId}
       loading={loading}
       data={data ? data.jobs_by_pk.notes : null}
       refetch={refetch}
-      deleteNote={deleteNote}
+      deleteLoading={deleteLoading}
+      handleNoteDelete={handleNoteDelete}
     />
   );
 }