Fixed selected nav item. Added lazy loading for WS client to resolve token issue. Added some filtering to jobs list.

client/src/pages/jobs/jobs.page.jsx

@@ -1,18 +1,16 @@
-import React from "react";
-import { useQuery, useSubscription } from "@apollo/react-hooks";
+import React, { useState } from "react";
+import { useSubscription } from "@apollo/react-hooks";
 import AlertComponent from "../../components/alert/alert.component";
 //import { GET_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
 import { Table, Divider, Icon } from "antd";
+import { alphaSort } from "../../utils/sorters";
 
-import {
-  GET_ALL_OPEN_JOBS,
-  SUBSCRIPTION_ALL_OPEN_JOBS
-} from "../../graphql/jobs.queries";
+import { SUBSCRIPTION_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
+//import { columns } from "./jobs.page.metadata";
 
 export default function JobsPage() {
-  // const { loading, error, data } = useQuery(GET_ALL_OPEN_JOBS, {
-  //   fetchPolicy: "network-only"
-  // });
+  const [sortedInfo, setSortedInfo] = useState({});
+
   const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, {
     fetchPolicy: "network-only"
   });
@@ -21,7 +19,10 @@ export default function JobsPage() {
     {
       title: "RO #",
       dataIndex: "ro_number",
-      key: "ro_number"
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a, b),
+      sortOrder: sortedInfo.columnKey === "ro_number" && sortedInfo.order,
+      ellipsis: true
     },
     {
       title: "Est. #",
@@ -31,7 +32,10 @@ export default function JobsPage() {
     {
       title: "Status",
       dataIndex: "status",
-      key: "status"
+      key: "status",
+      sorter: (a, b) => alphaSort(a, b),
+      sortOrder: sortedInfo.columnKey === "status" && sortedInfo.order,
+      ellipsis: true
     },
     {
       title: "Customer",
@@ -67,22 +71,25 @@ export default function JobsPage() {
       key: "action",
       render: (text, record) => (
         <span>
-          <a>Action 一 {record.ro_number}</a>
+          Action 一 {record.ro_number}
           <Divider type="vertical" />
-          <a>Delete</a>
           <Divider type="vertical" />
-          <a className="ant-dropdown-link">
-            More actions <Icon type="down" />
-          </a>
+          More actions <Icon type="down" />
         </span>
       )
     }
   ];
 
-  if (error) {
-    console.log("error", error);
-    return <AlertComponent message={error} />;
-  }
+  const handleChange = (pagination, filters, sorter) => {
+    console.log("Various parameters", pagination, filters, sorter);
+    // this.setState({
+    //   filteredInfo: filters,
+    //   sortedInfo: sorter,
+    // });
+    setSortedInfo(sorter);
+  };
+
+  if (error) return <AlertComponent message={error.message} />;
 
   return (
     <div>
@@ -92,6 +99,7 @@ export default function JobsPage() {
         columns={columns.map(item => ({ ...item }))}
         rowKey="id"
         dataSource={data ? data.jobs : null}
+        onChange={handleChange}
       />
     </div>
   );