Begin addign loading state to mutations BOD-134

client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx

@@ -1,5 +1,5 @@
 import { Form, Modal, notification } from "antd";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -13,48 +13,51 @@ import { useMutation } from "@apollo/react-hooks";
 
 const mapStateToProps = createStructuredSelector({
   courtesyCarReturnModal: selectCourtesyCarReturn,
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
-  toggleModalVisible: () => dispatch(toggleModalVisible("courtesyCarReturn"))
+  toggleModalVisible: () => dispatch(toggleModalVisible("courtesyCarReturn")),
 });
 
 export function InvoiceEnterModalContainer({
   courtesyCarReturnModal,
   toggleModalVisible,
-  bodyshop
+  bodyshop,
 }) {
+  const [loading, setLoading] = useState(false);
   const { visible, context, actions } = courtesyCarReturnModal;
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [updateContract] = useMutation(RETURN_CONTRACT);
-  const handleFinish = values => {
+  const handleFinish = (values) => {
+    setLoading(true);
     updateContract({
       variables: {
         contractId: context.contractId,
         cccontract: {
           kmend: values.kmend,
           actualreturn: values.actualreturn,
-          status: "contracts.status.returned"
+          status: "contracts.status.returned",
         },
         courtesycarid: context.courtesyCarId,
         courtesycar: {
           status: "courtesycars.status.in",
           fuel: values.fuel,
-          mileage: values.kmend
+          mileage: values.kmend,
-        }
+        },
-      }
+      },
     })
-      .then(r => {
+      .then((r) => {
         if (actions.refetch) actions.refetch();
         toggleModalVisible();
       })
-      .catch(error => {
+      .catch((error) => {
         notification["error"]({
-          message: t("contracts.errors.returning", { error: error })
+          message: t("contracts.errors.returning", { error: error }),
         });
       });
+    setLoading(false);
   };
 
   return (
@@ -65,7 +68,7 @@ export function InvoiceEnterModalContainer({
       width={"90%"}
       okText={t("general.actions.save")}
       onOk={() => form.submit()}
-      okButtonProps={{ htmlType: "submit" }}
+      okButtonProps={{ htmlType: "submit", loading: loading }}
     >
       <Form
         form={form}

client/src/components/invoice-detail-edit/invoice-detail-edit.container.jsx

@@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@apollo/react-hooks";
 import { Form, Button } from "antd";
 import moment from "moment";
 import queryString from "query-string";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
@@ -26,6 +26,7 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
   const search = queryString.parse(useLocation().search);
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const [updateLoading, setUpdateLoading] = useState(false);
   const [updateInvoice] = useMutation(UPDATE_INVOICE);
   const [updateInvoiceLine] = useMutation(UPDATE_INVOICE_LINE);
 
@@ -35,9 +36,9 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
   });
 
   const handleFinish = async (values) => {
+    setUpdateLoading(true);
     const { invoicelines, upload, ...invoice } = values;
     const updates = [];
-    console.log("Start");
     updates.push(
       updateInvoice({
         variables: { invoiceId: search.invoiceid, invoice: invoice },
@@ -54,6 +55,7 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
     });
 
     await Promise.all(updates);
+    setUpdateLoading(false);
   };
 
   useEffect(() => {
@@ -99,7 +101,7 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
             : {}
         }
       >
-        <Button htmlType="submit" type="primary">
+        <Button htmlType="submit" loading={updateLoading} type="primary">
           {t("general.actions.save")}
         </Button>
         <InvoiceFormContainer form={form} invoiceEdit />

client/src/components/job-intake/components/job-intake-form/job-intake-form.component.jsx

@@ -1,7 +1,7 @@
 import { useMutation } from "@apollo/react-hooks";
 import { Button, Form, notification, Switch } from "antd";
 import queryString from "query-string";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useHistory, useLocation, useParams } from "react-router-dom";
@@ -23,6 +23,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function JobIntakeForm({ formItems, bodyshop }) {
   const { t } = useTranslation();
   const [intakeJob] = useMutation(UPDATE_JOB);
+  const [loading, setLoading] = useState(false);
   const [markAptArrived] = useMutation(MARK_LATEST_APPOINTMENT_AS_ARRIVED);
   const { jobId } = useParams();
   const history = useHistory();
@@ -30,6 +31,7 @@ export function JobIntakeForm({ formItems, bodyshop }) {
 
   const handleFinish = async (values) => {
     console.log("values", values);
+    setLoading(true);
     logImEXEvent("job_complete_intake");
 
     const result = await intakeJob({
@@ -70,6 +72,7 @@ export function JobIntakeForm({ formItems, bodyshop }) {
       });
     }
     console.log("handleFinish -> result", result);
+    setLoading(false);
   };
 
   const [form] = Form.useForm();
@@ -78,34 +81,40 @@ export function JobIntakeForm({ formItems, bodyshop }) {
     <Form
       form={form}
       onFinish={handleFinish}
-      initialValues={{ addToProduction: true }}>
+      initialValues={{ addToProduction: true }}
+    >
       {t("intake.labels.checklist")}
 
       <ConfigFormComponents componentList={formItems} />
 
       <Form.Item
-        name='addToProduction'
+        name="addToProduction"
-        valuePropName='checked'
+        valuePropName="checked"
-        label={t("intake.labels.addtoproduction")}>
+        label={t("intake.labels.addtoproduction")}
+      >
         <Switch />
       </Form.Item>
       <Form.Item
-        name='scheduledCompletion'
+        name="scheduledCompletion"
         label={t("jobs.fields.scheduled_completion")}
         rules={[
           {
             required: true,
             message: t("general.validation.required"),
           },
-        ]}>
+        ]}
+      >
         <DateTimePicker />
       </Form.Item>
       <Form.Item
-        name='scheduledDelivery'
+        name="scheduledDelivery"
-        label={t("jobs.fields.scheduled_delivery")}>
+        label={t("jobs.fields.scheduled_delivery")}
+      >
         <DateTimePicker />
       </Form.Item>
-      <Button htmlType='submit'>{t("general.actions.submit")}</Button>
+      <Button loading={loading} htmlType="submit">
+        {t("general.actions.submit")}
+      </Button>
     </Form>
   );
 }

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx

@@ -7,7 +7,8 @@ export default function JobLinesUpsertModalComponent({
   visible,
   jobLine,
   handleCancel,
-  handleFinish
+  handleFinish,
+  loading,
 }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
@@ -32,6 +33,7 @@ export default function JobLinesUpsertModalComponent({
         visible={visible}
         okText={t("general.actions.save")}
         onOk={() => form.submit()}
+        okButtonProps={{ loading: loading }}
         onCancel={handleCancel}
       >
         <Form.Item
@@ -39,8 +41,8 @@ export default function JobLinesUpsertModalComponent({
           rules={[
             {
               required: true,
-              message: t("general.validation.required")
+              message: t("general.validation.required"),
-            }
+            },
           ]}
           name="line_desc"
         >

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx

@@ -1,73 +1,78 @@
 import { notification } from "antd";
-import React from "react";
+import React, { useState } from "react";
 import { useMutation } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { INSERT_NEW_JOB_LINE, UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
+import {
+  INSERT_NEW_JOB_LINE,
+  UPDATE_JOB_LINE,
+} from "../../graphql/jobs-lines.queries";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectJobLineEditModal } from "../../redux/modals/modals.selectors";
 import JobLinesUpdsertModal from "./job-lines-upsert-modal.component";
 
 const mapStateToProps = createStructuredSelector({
-  jobLineEditModal: selectJobLineEditModal
+  jobLineEditModal: selectJobLineEditModal,
 });
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
-  toggleModalVisible: () => dispatch(toggleModalVisible("jobLineEdit"))
+  toggleModalVisible: () => dispatch(toggleModalVisible("jobLineEdit")),
 });
 
 function JobLinesUpsertModalContainer({
   jobLineEditModal,
-  toggleModalVisible
+  toggleModalVisible,
 }) {
   const { t } = useTranslation();
   const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE);
   const [updateJobLine] = useMutation(UPDATE_JOB_LINE);
-
+  const [loading, setLoading] = useState(false);
-  const handleFinish = values => {
+  const handleFinish = (values) => {
+    setLoading(true);
     if (!jobLineEditModal.context.id) {
       insertJobLine({
         variables: {
-          lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }]
+          lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }],
-        }
+        },
       })
-        .then(r => {
+        .then((r) => {
           if (jobLineEditModal.actions.refetch)
             jobLineEditModal.actions.refetch();
           toggleModalVisible();
           notification["success"]({
-            message: t("joblines.successes.created")
+            message: t("joblines.successes.created"),
           });
         })
-        .catch(error => {
+        .catch((error) => {
           notification["error"]({
             message: t("joblines.errors.creating", {
-              message: error.message
+              message: error.message,
-            })
+            }),
           });
         });
     } else {
       updateJobLine({
         variables: {
           lineId: jobLineEditModal.context.id,
-          line: values
+          line: values,
-        }
+        },
       })
-        .then(r => {
+        .then((r) => {
           notification["success"]({
-            message: t("joblines.successes.updated")
+            message: t("joblines.successes.updated"),
           });
         })
-        .catch(error => {
+        .catch((error) => {
           notification["success"]({
             message: t("joblines.errors.updating", {
-              message: error.message
+              message: error.message,
-            })
+            }),
           });
         });
       if (jobLineEditModal.actions.refetch) jobLineEditModal.actions.refetch();
       toggleModalVisible();
     }
+    setLoading(false);
   };
 
   const handleCancel = () => {
@@ -80,6 +85,7 @@ function JobLinesUpsertModalContainer({
       jobLine={jobLineEditModal.context}
       handleFinish={handleFinish}
       handleCancel={handleCancel}
+      loading={loading}
     />
   );
 }

client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx

@@ -1,5 +1,5 @@
 import { Button, notification } from "antd";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import axios from "axios";
 import { useMutation } from "@apollo/react-hooks";
@@ -13,9 +13,10 @@ export default function JobsDocumentsDeleteButton({
   const { t } = useTranslation();
   const [deleteDocument] = useMutation(DELETE_DOCUMENT);
   const imagesToDelete = galleryImages.filter((image) => image.isSelected);
+  const [loading, setLoading] = useState(false);
   const handleDelete = () => {
     logImEXEvent("job_documents_delete", { count: imagesToDelete.length });
-
+    setLoading(true);
     imagesToDelete.forEach((image) => {
       let timestamp = Math.floor(Date.now() / 1000);
       let public_id = image.key;
@@ -65,10 +66,15 @@ export default function JobsDocumentsDeleteButton({
             });
         });
     });
+    setLoading(false);
   };
 
   return (
-    <Button disabled={imagesToDelete.length < 1} onClick={handleDelete}>
+    <Button
+      disabled={imagesToDelete.length < 1}
+      loading={loading}
+      onClick={handleDelete}
+    >
       {t("documents.actions.delete")}
     </Button>
   );

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

@@ -1,31 +1,49 @@
-import React from "react";
+import { useMutation, useQuery } from "@apollo/react-hooks";
-import JobNotesComponent from "./jobs.notes.component";
+import { notification } from "antd";
-import { useQuery, useMutation } from "@apollo/react-hooks";
+import React, { useState } from "react";
-import AlertComponent from "../../components/alert/alert.component";
 //import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
-import {
+import { useTranslation } from "react-i18next";
-  QUERY_NOTES_BY_JOB_PK,
+import AlertComponent from "../../components/alert/alert.component";
-  DELETE_NOTE
+import { logImEXEvent } from "../../firebase/firebase.utils";
-} from "../../graphql/notes.queries";
+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={() => {
+            loading={deleteLoading}
-              logImEXEvent("job_note_delete");
+            onClick={() => handleNoteDelete(record.id)}
-
+          >
-              deleteNote({
-                variables: {
-                  noteId: record.id,
-                },
-              }).then((r) => {
-                refetch();
-                notification["success"]({
-                  message: t("notes.successes.deleted"),
-                });
-              });
-            }}>
             <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>