Removed a few container pages as we will be using hooks instead. Cleaned up a few debug statements.

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

@@ -1,6 +0,0 @@
-import React from "react";
-import JobsPage from "./jobs.pages";
-
-export default function JobsPageContainer() {
-  return <JobsPage />;
-}

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

@@ -0,0 +1,82 @@
+import React from "react";
+import { useQuery } 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";
+
+export default function JobsPage() {
+  const {
+    loading,
+    error,
+    data: { jobs }
+  } = useQuery(GET_ALL_OPEN_JOBS);
+
+  const columns = [
+    {
+      title: "RO #",
+      dataIndex: "ro_number",
+      key: "ro_number"
+    },
+    {
+      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 ? record.vehicle.v_make_desc : "No Vehicle";
+      }
+    },
+    {
+      title: "Action",
+      key: "action",
+      render: (text, record) => (
+        <span>
+          <a>Action 一 {record.ro_number}</a>
+          <Divider type="vertical" />
+          <a>Delete</a>
+          <Divider type="vertical" />
+          <a className="ant-dropdown-link">
+            More actions <Icon type="down" />
+          </a>
+        </span>
+      )
+    }
+  ];
+
+  // if (loading) return <Spin />;
+  if (error) return `Error! ${error.message}`;
+  console.log("$$$Develop (jobs.page.jsx) | jobs", jobs);
+  return (
+    <div>
+      <Table
+        loading={loading}
+        pagination={{ position: "bottom" }}
+        columns={columns.map(item => ({ ...item }))}
+        rowKey="id"
+        dataSource={jobs ? jobs : null}
+      />
+    </div>
+  );
+}

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

@@ -1,25 +0,0 @@
-import React from "react";
-import { useQuery } from "@apollo/react-hooks";
-//import { GET_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
-import { gql } from "apollo-boost";
-import Spin from "../../components/loading-spinner/loading-spinner.component";
-
-const g = gql`
-  {
-    associations {
-      id
-      shopid
-      useremail
-      active
-    }
-  }
-`;
-
-export default function JobsPage() {
-  const { loading, error, data } = useQuery(g);
-
-  if (loading) return <Spin />;
-  if (error) return `Error! ${error.message}`;
-  console.log(data);
-  return <div>Hi</div>;
-}

client/src/pages/manage/manage.page.jsx

@@ -2,8 +2,8 @@ import React from "react";
 import { Route } from "react-router";
 
 //Component Imports
-import WhiteBoardPageContainer from "../white-board/white-board.page.container";
-import JobsPageContainer from "../jobs/jobs.page.container";
+import WhiteBoardPage from "../white-board/white-board.page";
+import JobsPage from "../jobs/jobs.page";
 import JobsDetailPageContainer from "../jobs-detail/jobs-detail.page.container";
 import HeaderComponentContainer from "../../components/header/header.container";
 import FooterComponent from "../../components/footer/footer.component";
@@ -20,17 +20,9 @@ export default function Manage({ match }) {
       </Header>
 
       <Content>
-        <Route
-          exact
-          path={`${match.path}`}
-          component={WhiteBoardPageContainer}
-        />
+        <Route exact path={`${match.path}`} component={WhiteBoardPage} />
 
-        <Route
-          exact
-          path={`${match.path}/jobs`}
-          component={JobsPageContainer}
-        />
+        <Route exact path={`${match.path}/jobs`} component={JobsPage} />
         <Route
           path={`${match.path}/jobs/:jobId`}
           component={JobsDetailPageContainer}

client/src/pages/white-board/white-board.page.container.jsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-import WhiteBoardPage from "./white-board.page";
-
-export default function WhiteBoardPageContainer() {
-  return <WhiteBoardPage />;
-}

client/src/pages/white-board/white-board.page.jsx

@@ -40,6 +40,7 @@ export default function WhiteBoardPage({ whiteBoardLeftSiderVisible }) {
   return (
     <Layout>
       <Sider
+        collapsible={true}
         breakpoint="lg"
         collapsedWidth="0"
         onBreakpoint={broken => {