Begin addign loading state to mutations BOD-134

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'
-        valuePropName='checked'
-        label={t("intake.labels.addtoproduction")}>
+        name="addToProduction"
+        valuePropName="checked"
+        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'
-        label={t("jobs.fields.scheduled_delivery")}>
+        name="scheduledDelivery"
+        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>
   );
 }