Finish the majority of work on vendors page to add/delete/edit.

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

@@ -1,12 +1,14 @@
-import { Input, Table } from "antd";
+import { Input, Table, Button } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 export default function VendorsListComponent({
   selectedVendor,
   setSelectedVendor,
+  handleNewVendor,
   loading,
   refetch,
+  handleOnRowClick,
   vendors
 }) {
   const [state, setState] = useState({
@@ -57,14 +59,6 @@ export default function VendorsListComponent({
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
-  const handleOnRowClick = record => {
-    if (record) {
-      setSelectedVendor(record);
-      return;
-    }
-    setSelectedVendor(null);
-  };
-
   //TODO Implement search
   return (
     <div>
@@ -72,19 +66,25 @@ export default function VendorsListComponent({
         loading={loading}
         title={() => {
           return (
-            <Input.Search
-              placeholder={t("general.labels.search")}
-              onSearch={value => {
-                console.log(value);
-              }}
-              enterButton
-            />
+            <div>
+              {" "}
+              <Input.Search
+                placeholder={t("general.labels.search")}
+                onSearch={value => {
+                  console.log(value);
+                }}
+                enterButton
+              />
+              <Button onClick={handleNewVendor}>
+                {t("vendors.actions.new")}
+              </Button>
+            </div>
           );
         }}
-        size="small"
+        size='small'
         pagination={{ position: "top" }}
         columns={columns.map(item => ({ ...item }))}
-        rowKey="id"
+        rowKey='id'
         onChange={handleTableChange}
         dataSource={vendors}
         rowSelection={{
@@ -92,7 +92,7 @@ export default function VendorsListComponent({
             setSelectedVendor(record);
           },
           type: "radio",
-          selectedRowKeys: selectedVendor.id || null
+          selectedRowKeys: selectedVendor ? selectedVendor.id : null
         }}
         onRow={(record, rowIndex) => {
           return {

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { useQuery } from "react-apollo";
 import AlertComponent from "../../components/alert/alert.component";
-import { QUERY_ALL_VENDORS, QUERY_VENDOR_BY_ID } from "../../graphql/vendors.queries";
+import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import VendorsListComponent from "./vendors-list.component";
 
 export default function VendorsListContainer({ selectedVendorState }) {
@@ -10,23 +10,28 @@ export default function VendorsListContainer({ selectedVendorState }) {
     fetchPolicy: "network-only"
   });
 
-  const vendorDetail = useQuery(QUERY_VENDOR_BY_ID, {
-    fetchPolicy: "network-only",
-    variables: { id: selectedVendor.id },
-    skip: !selectedVendor.id
-  });
+  const handleNewVendor = () => {
+    setSelectedVendor({});
+  };
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  const handleOnRowClick = record => {
+    if (record) {
+      setSelectedVendor(record);
+      return;
+    }
+    setSelectedVendor(null);
+  };
+
+  if (error) return <AlertComponent message={error.message} type='error' />;
   return (
-    <div>
-      <VendorsListComponent
-        selectedVendor={selectedVendor}
-        setSelectedVendor={setSelectedVendor}
-        loading={loading}
-        refetch={refetch}
-        vendors={data ? data.vendors : null}
-      />
-      {JSON.stringify(vendorDetail && vendorDetail.data)}
-    </div>
+    <VendorsListComponent
+      selectedVendor={selectedVendor}
+      setSelectedVendor={setSelectedVendor}
+      handleNewVendor={handleNewVendor}
+      handleOnRowClick={handleOnRowClick}
+      loading={loading}
+      refetch={refetch}
+      vendors={data ? data.vendors : null}
+    />
   );
 }