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 {
+import { DELETE_VENDOR, INSERT_NEW_VENDOR, QUERY_VENDOR_BY_ID, UPDATE_VENDOR } from "../../graphql/vendors.queries";
-  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 } })
+    deleteVendor({ variables: { id: selectedvendor } })
-      .then(r => {
+      .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 => {
+  const handleFinish = (values) => {
-    if (selectedVendor.id) {
+    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();
+    if (data || selectedvendor === "new") form.resetFields();
-  }, [data, form]);
+  }, [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"
+      autoComplete='new-password'
-      initialValues={data ? data.vendors_by_pk : null}
+      initialValues={data ? data.vendors_by_pk : null}>
-    >
+      {selectedvendor ? (
-      {selectedVendor ? (
         <VendorsFormComponent
-          selec
           form={form}
           handleDelete={handleDelete}
           responsibilityCenters={bodyshop.md_responsibility_centers || null}

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

@@ -1,18 +1,22 @@
 import { Button, Table } from "antd";
+import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
 import { alphaSort } from "../../utils/sorters";
+
 export default function VendorsListComponent({
-  selectedVendor,
-  setSelectedVendor,
   handleNewVendor,
   loading,
   handleOnRowClick,
-  vendors
+  vendors,
 }) {
+  const search = queryString.parse(useLocation().search);
+  const { selectedvendor } = search;
+
   const [state, setState] = useState({
     sortedInfo: {},
-    filteredInfo: { text: "" }
+    filteredInfo: { text: "" },
   });
 
   const { t } = useTranslation();
@@ -23,7 +27,8 @@ export default function VendorsListComponent({
       dataIndex: "name",
       key: "name",
       sorter: (a, b) => alphaSort(a.name, b.name),
-      sortOrder: state.sortedInfo.columnKey === "name" && state.sortedInfo.order
+      sortOrder:
+        state.sortedInfo.columnKey === "name" && state.sortedInfo.order,
     },
     {
       title: t("vendors.fields.cost_center"),
@@ -31,7 +36,7 @@ export default function VendorsListComponent({
       key: "cost_center",
       sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
       sortOrder:
-        state.sortedInfo.columnKey === "cost_center" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "cost_center" && state.sortedInfo.order,
     },
     {
       title: t("vendors.fields.street1"),
@@ -40,13 +45,13 @@ export default function VendorsListComponent({
       width: "10%",
       sorter: (a, b) => alphaSort(a.street1, b.street1),
       sortOrder:
-        state.sortedInfo.columnKey === "street1" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "street1" && state.sortedInfo.order,
     },
     {
       title: t("vendors.fields.city"),
       dataIndex: "city",
-      key: "city"
+      key: "city",
-    }
+    },
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
@@ -66,24 +71,22 @@ export default function VendorsListComponent({
           </div>
         );
       }}
-      size="small"
+      size='small'
       pagination={{ position: "top" }}
-      columns={columns.map(item => ({ ...item }))}
+      columns={columns.map((item) => ({ ...item }))}
-      rowKey="id"
+      rowKey='id'
       onChange={handleTableChange}
       dataSource={vendors}
       rowSelection={{
-        onSelect: record => {
+        onSelect: handleOnRowClick,
-          setSelectedVendor(record);
-        },
         type: "radio",
-        selectedRowKeys: selectedVendor ? [selectedVendor.id] : null
+        selectedRowKeys: [selectedvendor],
       }}
       onRow={(record, rowIndex) => {
         return {
-          onClick: event => {
+          onClick: (event) => {
             handleOnRowClick(record);
-          }
+          },
         };
       }}
     />

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

@@ -3,26 +3,32 @@ import { useQuery } from "@apollo/react-hooks";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import VendorsListComponent from "./vendors-list.component";
+import queryString from "query-string";
+import { useHistory, useLocation } from "react-router-dom";
 
-export default function VendorsListContainer({ selectedVendorState }) {
+export default function VendorsListContainer() {
-  const [selectedVendor, setSelectedVendor] = selectedVendorState;
   const { loading, error, data } = useQuery(QUERY_ALL_VENDORS);
+  const search = queryString.parse(useLocation().search);
+  const history = useHistory();
 
   const handleNewVendor = () => {
-    setSelectedVendor({});
+    search.selectedvendor = "new";
+    history.push({ search: queryString.stringify(search) });
   };
 
   const handleOnRowClick = (record) => {
     if (record) {
-      setSelectedVendor(record);
+      search.selectedvendor = record.id;
-    } else setSelectedVendor(null);
+      history.push({ search: queryString.stringify(search) });
+    } else {
+      delete search.selectedvendor;
+      history.push({ search: queryString.stringify(search) });
+    }
   };
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
   return (
     <VendorsListComponent
-      selectedVendor={selectedVendor}
-      setSelectedVendor={setSelectedVendor}
       handleNewVendor={handleNewVendor}
       handleOnRowClick={handleOnRowClick}
       loading={loading}

client/src/pages/shop-vendor/shop-vendor.page.component.jsx

@@ -2,13 +2,11 @@ import React from "react";
 import VendorsListContainer from "../../components/vendors-list/vendors-list.container";
 import VendorsFormContainer from "../../components/vendors-form/vendors-form.container";
 
-export default function ShopVendorPageComponent({ selectedVendorState }) {
+export default function ShopVendorPageComponent() {
-  //TODO Figure out how to handle the refresh list when saving form
-
   return (
     <div>
-      <VendorsListContainer selectedVendorState={selectedVendorState} />
+      <VendorsListContainer />
-      <VendorsFormContainer selectedVendor={selectedVendorState[0]} />
+      <VendorsFormContainer />
     </div>
   );
 }

client/src/pages/shop-vendor/shop-vendor.page.container.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import ShopVendorPageComponent from "./shop-vendor.page.component";
 
@@ -7,12 +7,6 @@ export default function ShopVendorPageContainer() {
   useEffect(() => {
     document.title = t("titles.shop_vendors");
   }, [t]);
-  const fetchState = useState();
+
-  const selectedVendorState = useState();
+  return <ShopVendorPageComponent />;
-  return (
-    <ShopVendorPageComponent
-      selectedVendorState={selectedVendorState}
-      fetchState={fetchState}
-    />
-  );
 }