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>
   );

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { Divider, Icon } from "antd";
+
+export const columns = [
+  {
+    title: "RO #",
+    dataIndex: "ro_number",
+    key: "ro_number",
+    sorter: (a, b) => a.ro_number > b.ro_number,
+    sortOrder: sortedInfo.columnKey === "ro_number" && sortedInfo.order,
+    ellipsis: true
+  },
+  {
+    title: "Est. #",
+    dataIndex: "est_number",
+    key: "est_number"
+  },
+  {
+    title: "Status",
+    dataIndex: "status",
+    key: "status"
+  },
+  {
+    title: "Customer",
+    dataIndex: "customer",
+    key: "customer",
+    render: (text, record) => {
+      return record.owner ? (
+        <div>
+          {record.owner.first_name} {record.owner.last_name}
+        </div>
+      ) : (
+        "No Customer"
+      );
+    }
+  },
+  {
+    title: "Vehicle",
+    dataIndex: "vehicle",
+    key: "vehicle",
+    render: (text, record) => {
+      return record.vehicle ? (
+        <div>
+          {record.vehicle.v_model_yr} {record.vehicle.v_make_desc}{" "}
+          {record.vehicle.v_model_desc}
+        </div>
+      ) : (
+        "No Vehicle"
+      );
+    }
+  },
+  {
+    title: "Action",
+    key: "action",
+    render: (text, record) => (
+      <span>
+        Action 一 {record.ro_number}
+        <Divider type="vertical" />
+        <Divider type="vertical" />
+        More actions <Icon type="down" />
+      </span>
+    )
+  }
+];