Begin addign loading state to mutations BOD-134

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>