- the great reformat

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/vendors-form/vendors-form.component.jsx

@@ -27,7 +27,14 @@ export default connect(
     mapDispatchToProps
 )(VendorsFormComponent);
 
-export function VendorsFormComponent({bodyshop, form, formLoading, handleDelete, responsibilityCenters, selectedvendor}) {
+export function VendorsFormComponent({
+                                         bodyshop,
+                                         form,
+                                         formLoading,
+                                         handleDelete,
+                                         responsibilityCenters,
+                                         selectedvendor
+                                     }) {
     const {t} = useTranslation();
     const client = useApolloClient();
 

client/src/components/vendors-form/vendors-form.container.jsx

@@ -1,150 +1,146 @@
-import { useMutation, useQuery } from "@apollo/client";
-import { Form, notification } from "antd";
+import {useMutation, useQuery} from "@apollo/client";
+import {Form, notification} from "antd";
 import queryString from "query-string";
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
-import {
-  DELETE_VENDOR,
-  INSERT_NEW_VENDOR,
-  QUERY_VENDOR_BY_ID,
-  UPDATE_VENDOR,
-} from "../../graphql/vendors.queries";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import React, {useEffect, useState} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {useLocation, useNavigate} from "react-router-dom";
+import {createStructuredSelector} from "reselect";
+import {DELETE_VENDOR, INSERT_NEW_VENDOR, QUERY_VENDOR_BY_ID, UPDATE_VENDOR,} from "../../graphql/vendors.queries";
+import {selectBodyshop} from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import VendorsFormComponent from "./vendors-form.component";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
+    bodyshop: selectBodyshop,
 });
 
-function VendorsFormContainer({ refetch, bodyshop }) {
-  const history = useNavigate();
-  const search = queryString.parse(useLocation().search);
-  const { selectedvendor } = search;
-  const [formLoading, setFormLoading] = useState(false);
-  const [form] = Form.useForm();
-  const { t } = useTranslation();
-  const { loading, error, data } = useQuery(QUERY_VENDOR_BY_ID, {
-    variables: { id: selectedvendor },
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-    skip: !!!selectedvendor || selectedvendor === "new",
-  });
-
-  const [updateVendor] = useMutation(UPDATE_VENDOR);
-  const [insertvendor] = useMutation(INSERT_NEW_VENDOR);
-  const [deleteVendor] = useMutation(DELETE_VENDOR);
-
-  const handleDelete = async () => {
-    setFormLoading(true);
-    const result = await deleteVendor({
-      variables: { id: selectedvendor },
-      refetchQueries: ["QUERY_ALL_VENDORS"],
+function VendorsFormContainer({refetch, bodyshop}) {
+    const history = useNavigate();
+    const search = queryString.parse(useLocation().search);
+    const {selectedvendor} = search;
+    const [formLoading, setFormLoading] = useState(false);
+    const [form] = Form.useForm();
+    const {t} = useTranslation();
+    const {loading, error, data} = useQuery(QUERY_VENDOR_BY_ID, {
+        variables: {id: selectedvendor},
+        fetchPolicy: "network-only",
+        nextFetchPolicy: "network-only",
+        skip: !!!selectedvendor || selectedvendor === "new",
     });
-    console.log(result);
-    if (result.errors) {
-      notification["error"]({
-        message: t("vendors.errors.deleting"),
-      });
-    } else {
-      notification["success"]({
-        message: t("vendors.successes.deleted"),
-      });
-      delete search.selectedvendor;
-      history({ search: queryString.stringify(search) });
-      if (refetch)
-        refetch().then((r) => {
-          form.resetFields();
+
+    const [updateVendor] = useMutation(UPDATE_VENDOR);
+    const [insertvendor] = useMutation(INSERT_NEW_VENDOR);
+    const [deleteVendor] = useMutation(DELETE_VENDOR);
+
+    const handleDelete = async () => {
+        setFormLoading(true);
+        const result = await deleteVendor({
+            variables: {id: selectedvendor},
+            refetchQueries: ["QUERY_ALL_VENDORS"],
         });
-    }
-
-    setFormLoading(false);
-  };
-
-  const handleFinish = async (values) => {
-    setFormLoading(true);
-    if (selectedvendor && selectedvendor !== "new") {
-      //It's a vendor to update.
-      const result = await updateVendor({
-        variables: { id: selectedvendor, vendor: values },
-        refetchQueries: ["QUERY_ALL_VENDORS", "QUERY_VENDOR_BY_ID"],
-      });
-
-      if (!result.errors) {
-        notification["success"]({
-          message: t("vendors.successes.saved"),
-        });
-
-        if (refetch) await refetch();
-        form.setFieldsValue(data.vendors_by_pk);
-        form.resetFields();
+        console.log(result);
+        if (result.errors) {
+            notification["error"]({
+                message: t("vendors.errors.deleting"),
+            });
+        } else {
+            notification["success"]({
+                message: t("vendors.successes.deleted"),
+            });
+            delete search.selectedvendor;
+            history({search: queryString.stringify(search)});
+            if (refetch)
+                refetch().then((r) => {
+                    form.resetFields();
+                });
+        }
 
         setFormLoading(false);
-      } else {
-        notification["error"]({
-          message: t("vendors.errors.saving"),
-        });
-        console.log("error", error);
-        setFormLoading(false);
-      }
-    } else {
-      //It's a new vendor to insert.
-      const result = await insertvendor({
-        variables: { vendorInput: [{ ...values, bodyshopid: bodyshop.id }] },
-        refetchQueries: ["QUERY_ALL_VENDORS"],
-      });
+    };
 
-      if (!result.errors) {
-        notification["success"]({
-          message: t("vendors.successes.saved"),
-        });
+    const handleFinish = async (values) => {
+        setFormLoading(true);
+        if (selectedvendor && selectedvendor !== "new") {
+            //It's a vendor to update.
+            const result = await updateVendor({
+                variables: {id: selectedvendor, vendor: values},
+                refetchQueries: ["QUERY_ALL_VENDORS", "QUERY_VENDOR_BY_ID"],
+            });
 
-        if (refetch) await refetch();
-        form.resetFields();
-        form.resetFields();
-        delete search.selectedvendor;
-        history({ search: queryString.stringify(search) });
-        setFormLoading(false);
-      } else {
-        notification["error"]({
-          message: t("vendors.errors.saving"),
-        });
-        setFormLoading(false);
-      }
-    }
-  };
+            if (!result.errors) {
+                notification["success"]({
+                    message: t("vendors.successes.saved"),
+                });
 
-  useEffect(() => {
-    if (data || selectedvendor === "new") form.resetFields();
-  }, [data, form, selectedvendor]);
+                if (refetch) await refetch();
+                form.setFieldsValue(data.vendors_by_pk);
+                form.resetFields();
 
-  if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+                setFormLoading(false);
+            } else {
+                notification["error"]({
+                    message: t("vendors.errors.saving"),
+                });
+                console.log("error", error);
+                setFormLoading(false);
+            }
+        } else {
+            //It's a new vendor to insert.
+            const result = await insertvendor({
+                variables: {vendorInput: [{...values, bodyshopid: bodyshop.id}]},
+                refetchQueries: ["QUERY_ALL_VENDORS"],
+            });
 
-  return (
-    <Form
-      onFinish={handleFinish}
-      form={form}
-      layout="vertical"
-      autoComplete="new-password"
-      initialValues={data ? data.vendors_by_pk : null}
-    >
-      {selectedvendor ? (
-        <VendorsFormComponent
-          form={form}
-          formLoading={formLoading}
-          handleDelete={handleDelete}
-          responsibilityCenters={bodyshop.md_responsibility_centers || null}
-          selectedvendor={selectedvendor}
-        />
-      ) : (
-        t("vendors.labels.noneselected")
-      )}
-    </Form>
-  );
+            if (!result.errors) {
+                notification["success"]({
+                    message: t("vendors.successes.saved"),
+                });
+
+                if (refetch) await refetch();
+                form.resetFields();
+                form.resetFields();
+                delete search.selectedvendor;
+                history({search: queryString.stringify(search)});
+                setFormLoading(false);
+            } else {
+                notification["error"]({
+                    message: t("vendors.errors.saving"),
+                });
+                setFormLoading(false);
+            }
+        }
+    };
+
+    useEffect(() => {
+        if (data || selectedvendor === "new") form.resetFields();
+    }, [data, form, selectedvendor]);
+
+    if (loading) return <LoadingSpinner/>;
+    if (error) return <AlertComponent message={error.message} type="error"/>;
+
+    return (
+        <Form
+            onFinish={handleFinish}
+            form={form}
+            layout="vertical"
+            autoComplete="new-password"
+            initialValues={data ? data.vendors_by_pk : null}
+        >
+            {selectedvendor ? (
+                <VendorsFormComponent
+                    form={form}
+                    formLoading={formLoading}
+                    handleDelete={handleDelete}
+                    responsibilityCenters={bodyshop.md_responsibility_centers || null}
+                    selectedvendor={selectedvendor}
+                />
+            ) : (
+                t("vendors.labels.noneselected")
+            )}
+        </Form>
+    );
 }
+
 export default connect(mapStateToProps, null)(VendorsFormContainer);