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}
     />
   );
 }

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

@@ -4,12 +4,11 @@ import {
   EyeInvisibleFilled,
   WarningFilled
 } from "@ant-design/icons";
-import { Button, notification, Table } from "antd";
+import { Button, Table } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import Moment from "react-moment";
 import { connect } from "react-redux";
-import { logImEXEvent } from "../../firebase/firebase.utils";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
 
@@ -22,9 +21,10 @@ export function JobNotesComponent({
   loading,
   data,
   refetch,
-  deleteNote,
+  handleNoteDelete,
   jobId,
   setNoteUpsertContext,
+  deleteLoading,
 }) {
   const { t } = useTranslation();
 
@@ -59,7 +59,7 @@ export function JobNotesComponent({
       sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
       render: (text, record) => (
         <span>
-          <Moment format='MM/DD/YYYY @ HH:mm'>{record.updated_at}</Moment>
+          <Moment format="MM/DD/YYYY @ HH:mm">{record.updated_at}</Moment>
         </span>
       ),
     },
@@ -77,20 +77,9 @@ export function JobNotesComponent({
       render: (text, record) => (
         <span>
           <Button
-            onClick={() => {
-              logImEXEvent("job_note_delete");
-
-              deleteNote({
-                variables: {
-                  noteId: record.id,
-                },
-              }).then((r) => {
-                refetch();
-                notification["success"]({
-                  message: t("notes.successes.deleted"),
-                });
-              });
-            }}>
+            loading={deleteLoading}
+            onClick={() => handleNoteDelete(record.id)}
+          >
             <DeleteFilled />
           </Button>
           <Button
@@ -102,7 +91,8 @@ export function JobNotesComponent({
                   existingNote: record,
                 },
               });
-            }}>
+            }}
+          >
             <EditFilled />
           </Button>
         </span>
@@ -121,14 +111,15 @@ export function JobNotesComponent({
               jobId: jobId,
             },
           });
-        }}>
+        }}
+      >
         {t("notes.actions.new")}
       </Button>
       <Table
         loading={loading}
         pagination={{ position: "bottom" }}
         columns={columns.map((item) => ({ ...item }))}
-        rowKey='id'
+        rowKey="id"
         dataSource={data}
       />
     </div>