In progress subscriptions

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

@@ -1,16 +1,17 @@
 import React from "react";
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery, useSubscription } from "@apollo/react-hooks";
 //import { GET_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
 import { Table, Divider, Icon } from "antd";
 
-import { GET_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
+import {
+  GET_ALL_OPEN_JOBS,
+  SUBSCRIPTION_ALL_OPEN_JOBS
+} from "../../graphql/jobs.queries";
 
 export default function JobsPage() {
-  const {
-    loading,
-    error,
-    data: { jobs }
-  } = useQuery(GET_ALL_OPEN_JOBS);
+  const { loading, error, data } = useQuery(GET_ALL_OPEN_JOBS);
+
+  //const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS);
 
   const columns = [
     {
@@ -34,7 +35,9 @@ export default function JobsPage() {
       key: "customer",
       render: (text, record) => {
         return record.owner ? (
-          <div>{record.owner.first_name + " " + record.owner.last_name}</div>
+          <div>
+            {record.owner.first_name} {record.owner.last_name}
+          </div>
         ) : (
           "No Customer"
         );
@@ -45,7 +48,14 @@ export default function JobsPage() {
       dataIndex: "vehicle",
       key: "vehicle",
       render: (text, record) => {
-        return record.vehicle ? record.vehicle.v_make_desc : "No Vehicle";
+        return record.vehicle ? (
+          <div>
+            {record.vehicle.v_model_yr} {record.vehicle.v_make_desc}{" "}
+            {record.vehicle.v_model_desc}
+          </div>
+        ) : (
+          "No Vehicle"
+        );
       }
     },
     {
@@ -65,9 +75,11 @@ export default function JobsPage() {
     }
   ];
 
-  // if (loading) return <Spin />;
+  //if (loading) return "Loading";
   if (error) return `Error! ${error.message}`;
-  console.log("$$$Develop (jobs.page.jsx) | jobs", jobs);
+  //console.log("$$$Develop (jobs.page.jsx) | jobs", jobs);
+  console.log("JobsPage Rendering...");
+
   return (
     <div>
       <Table
@@ -75,7 +87,7 @@ export default function JobsPage() {
         pagination={{ position: "bottom" }}
         columns={columns.map(item => ({ ...item }))}
         rowKey="id"
-        dataSource={jobs ? jobs : null}
+        dataSource={data ? data.jobs : null}
       />
     </div>
   );