- the great reformat

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

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

@@ -1,111 +1,111 @@
-import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Input, Space, Table } from "antd";
+import {SyncOutlined} from "@ant-design/icons";
+import {Button, Card, Input, Space, 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";
+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({
-  handleNewVendor,
-  loading,
-  handleOnRowClick,
-  vendors,
-  refetch,
-}) {
-  const search = queryString.parse(useLocation().search);
-  const { selectedvendor } = search;
+                                                 handleNewVendor,
+                                                 loading,
+                                                 handleOnRowClick,
+                                                 vendors,
+                                                 refetch,
+                                             }) {
+    const search = queryString.parse(useLocation().search);
+    const {selectedvendor} = search;
 
-  const [state, setState] = useState({
-    sortedInfo: {},
-    filteredInfo: { text: "" },
-  });
-  const [searchText, setSearchText] = useState("");
-  const { t } = useTranslation();
+    const [state, setState] = useState({
+        sortedInfo: {},
+        filteredInfo: {text: ""},
+    });
+    const [searchText, setSearchText] = useState("");
+    const {t} = useTranslation();
 
-  const columns = [
-    {
-      title: t("vendors.fields.name"),
-      dataIndex: "name",
-      key: "name",
-      sorter: (a, b) => alphaSort(a.name, b.name),
-      sortOrder:
-        state.sortedInfo.columnKey === "name" && state.sortedInfo.order,
-    },
+    const columns = [
+        {
+            title: t("vendors.fields.name"),
+            dataIndex: "name",
+            key: "name",
+            sorter: (a, b) => alphaSort(a.name, b.name),
+            sortOrder:
+                state.sortedInfo.columnKey === "name" && state.sortedInfo.order,
+        },
 
-    {
-      title: t("vendors.fields.phone"),
-      dataIndex: "phone",
-      key: "phone",
-      width: "10%",
-      sorter: (a, b) => alphaSort(a.phone, b.phone),
-      sortOrder:
-        state.sortedInfo.columnKey === "phone" && state.sortedInfo.order,
-    },
-    {
-      title: t("vendors.fields.city"),
-      dataIndex: "city",
-      key: "city",
-    },
-  ];
+        {
+            title: t("vendors.fields.phone"),
+            dataIndex: "phone",
+            key: "phone",
+            width: "10%",
+            sorter: (a, b) => alphaSort(a.phone, b.phone),
+            sortOrder:
+                state.sortedInfo.columnKey === "phone" && state.sortedInfo.order,
+        },
+        {
+            title: t("vendors.fields.city"),
+            dataIndex: "city",
+            key: "city",
+        },
+    ];
 
-  const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-  };
+    const handleTableChange = (pagination, filters, sorter) => {
+        setState({...state, filteredInfo: filters, sortedInfo: sorter});
+    };
 
-  const filteredVendors = vendors
-    ? searchText === ""
-      ? vendors
-      : vendors.filter(
-          (j) =>
-            (j.name || "")
-              .toString()
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.phone || "").toLowerCase().includes(searchText.toLowerCase()) ||
-            (j.city || "").toLowerCase().includes(searchText.toLowerCase())
-        )
-    : [];
+    const filteredVendors = vendors
+        ? searchText === ""
+            ? vendors
+            : vendors.filter(
+                (j) =>
+                    (j.name || "")
+                        .toString()
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.phone || "").toLowerCase().includes(searchText.toLowerCase()) ||
+                    (j.city || "").toLowerCase().includes(searchText.toLowerCase())
+            )
+        : [];
 
-  return (
-    <Card
-      extra={
-        <Space wrap>
-          <Button onClick={handleNewVendor}>{t("vendors.actions.new")}</Button>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
-          <Input.Search
-            placeholder={t("general.labels.search")}
-            onChange={(e) => {
-              setSearchText(e.target.value);
-            }}
-            value={searchText}
-            enterButton
-          />
-        </Space>
-      }
-    >
-      <Table
-        loading={loading}
-        pagination={{ position: "top" }}
-        columns={columns}
-        rowKey="id"
-        onChange={handleTableChange}
-        dataSource={filteredVendors}
-        rowSelection={{
-          onSelect: handleOnRowClick,
-          type: "radio",
-          selectedRowKeys: [selectedvendor],
-        }}
-        onRow={(record, rowIndex) => {
-          return {
-            onClick: (event) => {
-              handleOnRowClick(record);
-            },
-          };
-        }}
-      />
-    </Card>
-  );
+    return (
+        <Card
+            extra={
+                <Space wrap>
+                    <Button onClick={handleNewVendor}>{t("vendors.actions.new")}</Button>
+                    <Button onClick={() => refetch()}>
+                        <SyncOutlined/>
+                    </Button>
+                    <Input.Search
+                        placeholder={t("general.labels.search")}
+                        onChange={(e) => {
+                            setSearchText(e.target.value);
+                        }}
+                        value={searchText}
+                        enterButton
+                    />
+                </Space>
+            }
+        >
+            <Table
+                loading={loading}
+                pagination={{position: "top"}}
+                columns={columns}
+                rowKey="id"
+                onChange={handleTableChange}
+                dataSource={filteredVendors}
+                rowSelection={{
+                    onSelect: handleOnRowClick,
+                    type: "radio",
+                    selectedRowKeys: [selectedvendor],
+                }}
+                onRow={(record, rowIndex) => {
+                    return {
+                        onClick: (event) => {
+                            handleOnRowClick(record);
+                        },
+                    };
+                }}
+            />
+        </Card>
+    );
 }

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

@@ -1,42 +1,42 @@
-import { useQuery } from "@apollo/client";
+import {useQuery} from "@apollo/client";
 import queryString from "query-string";
 import React from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import {useLocation, useNavigate} from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
-import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
+import {QUERY_ALL_VENDORS} from "../../graphql/vendors.queries";
 import VendorsListComponent from "./vendors-list.component";
 
 export default function VendorsListContainer() {
-  const { loading, error, data, refetch } = useQuery(QUERY_ALL_VENDORS, {
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-  });
-  const search = queryString.parse(useLocation().search);
-  const history = useNavigate();
+    const {loading, error, data, refetch} = useQuery(QUERY_ALL_VENDORS, {
+        fetchPolicy: "network-only",
+        nextFetchPolicy: "network-only",
+    });
+    const search = queryString.parse(useLocation().search);
+    const history = useNavigate();
 
-  const handleNewVendor = () => {
-    search.selectedvendor = "new";
-    history({ search: queryString.stringify(search) });
-  };
+    const handleNewVendor = () => {
+        search.selectedvendor = "new";
+        history({search: queryString.stringify(search)});
+    };
 
-  const handleOnRowClick = (record) => {
-    if (record) {
-      search.selectedvendor = record.id;
-      history({ search: queryString.stringify(search) });
-    } else {
-      delete search.selectedvendor;
-      history({ search: queryString.stringify(search) });
-    }
-  };
+    const handleOnRowClick = (record) => {
+        if (record) {
+            search.selectedvendor = record.id;
+            history({search: queryString.stringify(search)});
+        } else {
+            delete search.selectedvendor;
+            history({search: queryString.stringify(search)});
+        }
+    };
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
-  return (
-    <VendorsListComponent
-      handleNewVendor={handleNewVendor}
-      handleOnRowClick={handleOnRowClick}
-      loading={loading}
-      vendors={data ? data.vendors : null}
-      refetch={refetch}
-    />
-  );
+    if (error) return <AlertComponent message={error.message} type="error"/>;
+    return (
+        <VendorsListComponent
+            handleNewVendor={handleNewVendor}
+            handleOnRowClick={handleOnRowClick}
+            loading={loading}
+            vendors={data ? data.vendors : null}
+            refetch={refetch}
+        />
+    );
 }