Refactor vendor screen to use query strings BOD-125

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

@@ -1,106 +1,106 @@
-import { Form, notification } from "antd";
-import React, { useEffect } from "react";
 import { useMutation, useQuery } from "@apollo/react-hooks";
+import { Form, notification } from "antd";
+import queryString from "query-string";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { 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 { 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({ selectedVendor, refetch, bodyshop }) {
+function VendorsFormContainer({ refetch, bodyshop }) {
+  const search = queryString.parse(useLocation().search);
+  const { selectedvendor } = search;
+
   const [form] = Form.useForm();
   const { t } = useTranslation();
   const { loading, error, data } = useQuery(QUERY_VENDOR_BY_ID, {
-    variables: { id: (selectedVendor && selectedVendor.id) || null },
+    variables: { id: selectedvendor },
     fetchPolicy: "network-only",
-    skip: !!!selectedVendor
+    skip: !!!selectedvendor || selectedvendor === "new",
   });
+
   const [updateVendor] = useMutation(UPDATE_VENDOR);
   const [insertvendor] = useMutation(INSERT_NEW_VENDOR);
   const [deleteVendor] = useMutation(DELETE_VENDOR);
   const handleDelete = () => {
-    deleteVendor({ variables: { id: selectedVendor.id } })
-      .then(r => {
+    deleteVendor({ variables: { id: selectedvendor } })
+      .then((r) => {
         notification["success"]({
-          message: t("vendors.successes.deleted")
+          message: t("vendors.successes.deleted"),
         });
         //TODO Better way to reset the field decorators?
-        if (refetch) refetch().then(r => form.resetFields());
+        if (refetch) refetch().then((r) => form.resetFields());
       })
-      .catch(error => {
+      .catch((error) => {
         notification["error"]({
-          message: t("vendors.errors.deleting")
+          message: t("vendors.errors.deleting"),
         });
       });
   };
 
-  const handleFinish = values => {
-    if (selectedVendor.id) {
+  const handleFinish = (values) => {
+    if (selectedvendor && selectedvendor !== "new") {
       //It's a vendor to update.
       updateVendor({
-        variables: { id: selectedVendor.id, vendor: values }
+        variables: { id: selectedvendor, vendor: values },
       })
-        .then(r => {
+        .then((r) => {
           notification["success"]({
-            message: t("vendors.successes.saved")
+            message: t("vendors.successes.saved"),
           });
           //TODO Better way to reset the field decorators?
-          if (refetch) refetch().then(r => form.resetFields());
+          if (refetch) refetch().form.resetFields();
         })
-        .catch(error => {
+        .catch((error) => {
           notification["error"]({
-            message: t("vendors.errors.saving")
+            message: t("vendors.errors.saving"),
           });
           console.log("error", error);
         });
     } else {
       //It's a new vendor to insert.
       insertvendor({
-        variables: { vendorInput: [{ ...values, bodyshopid: bodyshop.id }] }
+        variables: { vendorInput: [{ ...values, bodyshopid: bodyshop.id }] },
       })
-        .then(r => {
+        .then((r) => {
           notification["success"]({
-            message: t("vendors.successes.saved")
+            message: t("vendors.successes.saved"),
           });
           //TODO Better way to reset the field decorators?
-          if (refetch) refetch().then(r => form.resetFields());
+          if (refetch) refetch();
+          form.resetFields();
         })
-        .catch(error => {
+        .catch((error) => {
           notification["error"]({
-            message: t("vendors.errors.saving")
+            message: t("vendors.errors.saving"),
           });
         });
     }
   };
 
   useEffect(() => {
-    if (data) form.resetFields();
-  }, [data, form]);
+    if (data || selectedvendor === "new") form.resetFields();
+  }, [data, form, selectedvendor]);
 
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
   return (
     <Form
       onFinish={handleFinish}
       form={form}
-      autoComplete="new-password"
-      initialValues={data ? data.vendors_by_pk : null}
-    >
-      {selectedVendor ? (
+      autoComplete='new-password'
+      initialValues={data ? data.vendors_by_pk : null}>
+      {selectedvendor ? (
         <VendorsFormComponent
-          selec
           form={form}
           handleDelete={handleDelete}
           responsibilityCenters={bodyshop.md_responsibility_centers || null}