Refactor vendor screen to use query strings BOD-125

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 }))}
-      rowKey="id"
+      columns={columns.map((item) => ({ ...item }))}
+      rowKey='id'
       onChange={handleTableChange}
       dataSource={vendors}
       rowSelection={{
-        onSelect: record => {
-          setSelectedVendor(record);
-        },
+        onSelect: handleOnRowClick,
         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 }) {
-  const [selectedVendor, setSelectedVendor] = selectedVendorState;
+export default function VendorsListContainer() {
   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);
-    } else setSelectedVendor(null);
+      search.selectedvendor = record.id;
+      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}