Begin addign loading state to mutations BOD-134

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 => ({
-  toggleModalVisible: () => dispatch(toggleModalVisible("jobLineEdit"))
+const mapDispatchToProps = (dispatch) => ({
+  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 handleFinish = values => {
+  const [loading, setLoading] = useState(false);
+  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}
     />
   );
 }