Added some additional save indiactors BOD-134

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.component.jsx

@@ -2,10 +2,14 @@ import React from "react";
 import CourtesyCarCreateFormComponent from "../../components/courtesy-car-form/courtesy-car-form.component";
 import CourtesyCarContractListComponent from "../../components/courtesy-car-contract-list/courtesy-car-contract-list.component";
 
-export default function CourtesyCarDetailPageComponent({ contracts, form }) {
+export default function CourtesyCarDetailPageComponent({
+  contracts,
+  form,
+  saveLoading,
+}) {
   return (
     <div>
-      <CourtesyCarCreateFormComponent form={form} />
+      <CourtesyCarCreateFormComponent form={form} saveLoading={saveLoading} />
       <CourtesyCarContractListComponent contracts={contracts} />
     </div>
   );

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx

@@ -1,7 +1,7 @@
 import { useMutation, useQuery } from "@apollo/react-hooks";
 import { Form, notification } from "antd";
 import moment from "moment";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
@@ -27,7 +27,7 @@ export function CourtesyCarDetailPageContainer({
   const [insertCourtesyCar] = useMutation(UPDATE_CC);
   const [form] = Form.useForm();
   const { ccId } = useParams();
-
+  const [saveLoading, setSaveLoading] = useState(false);
   const { loading, error, data } = useQuery(QUERY_CC_BY_PK, {
     variables: { id: ccId },
   });
@@ -63,18 +63,24 @@ export function CourtesyCarDetailPageContainer({
       );
   }, [t, data, error, loading, setBreadcrumbs, ccId, addRecentItem]);
 
-  const handleFinish = (values) => {
-    insertCourtesyCar({
+  const handleFinish = async (values) => {
+    setSaveLoading(true);
+
+    const result = await insertCourtesyCar({
       variables: { cc: { ...values }, ccId: ccId },
-    })
-      .then((response) => {
-        notification["success"]({ message: t("courtesycars.successes.saved") });
-      })
-      .catch((error) =>
-        notification["error"]({
-          message: t("courtesycars.errors.saving", { error: error }),
-        })
-      );
+    });
+
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("courtesycars.errors.saving", { error: error }),
+      });
+    }
+
+    notification["success"]({
+      message: t("courtesycars.successes.saved"),
+    });
+
+    setSaveLoading(false);
   };
 
   useEffect(() => {
@@ -120,6 +126,7 @@ export function CourtesyCarDetailPageContainer({
         <CourtesyCarDetailPageComponent
           contracts={data ? data.courtesycars_by_pk.cccontracts : []}
           form={form}
+          saveLoading={saveLoading}
         />
       </Form>
     </RbacWrapper>