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

client/src/App/App.js

@@ -48,7 +48,7 @@ class App extends React.Component {
             });
           });
         }
-
+console.log('###Debug (app.js)| Token', token)
         //add the bearer token to the headers.
         localStorage.setItem("token", token);
       } else {
@@ -67,7 +67,7 @@ class App extends React.Component {
   }
 
   render() {
-    console.log("this.props.currentUser", this.props.currentUser.email);
+    console.log("###Debug (App.js) | Props Current User: ", this.props.currentUser.email);
     return (
       <div>
         <Switch>

client/src/App/App.js.bak

@@ -1,71 +0,0 @@
-import React from "react";
-import { Switch, Route, Redirect } from "react-router";
-import { ApolloProvider } from "react-apollo";
-import { HttpLink } from "apollo-link-http";
-import ApolloClient from "apollo-client";
-import { InMemoryCache } from "apollo-cache-inmemory";
-import { resolvers, typeDefs } from "../graphql/resolvers";
-import initialState from "../graphql/initial-state";
-import { gql } from "apollo-boost";
-//Styling imports
-import "./App.css";
-
-//Component Imports
-import LandingPage from "../pages/landing/landing.page";
-import Manage from "../pages/manage/manage.page";
-
-import PrivateRoute from "../utils/private-route";
-import SignInContainer from "../pages/sign-in/sign-in.container";
-import Unauthorized from "../pages/unauthorized/unauthorized.component";
-
-const graphqlEndpoint = process.env.REACT_APP_GRAPHQL_ENDPOINT;
-
-export default function App({ authState }) {
-  const isIn = authState.status === "in";
-  const headers = isIn ? { Authorization: `Bearer ${authState.token}` } : {};
-  const httpLink = new HttpLink({
-    uri: graphqlEndpoint,
-    headers
-  });
-  const client = new ApolloClient({
-    link: httpLink,
-    cache: new InMemoryCache(),
-    resolvers,
-    typeDefs
-  });
-
-  //Init local state.
-  client.writeData({
-    data: {
-      ...initialState,
-      currentUser: {
-        __typename: null,
-        email: authState.user ? authState.user.email : null,
-        displayName: authState.user ? authState.user.displayName : null
-      }
-    }
-  });
-
-  return (
-    <ApolloProvider client={client}>
-      <div>{authState.status}</div>
-      <Switch>
-        <Route exact path="/" component={LandingPage} />
-        <Route exact path="/unauthorized" component={Unauthorized} />
-        <Route
-          exact
-          path="/signin"
-          render={() =>
-            authState.status == "in" ? (
-              <Redirect to="/manage" />
-            ) : (
-              <SignInContainer />
-            )
-          }
-        />
-        {/* <Route path="/signin" component={SignInContainer} /> */}
-        <PrivateRoute isAuthorized={isIn} path="/manage" component={Manage} />
-      </Switch>
-    </ApolloProvider>
-  );
-}

client/src/components/footer/footer.component.jsx

@@ -1,9 +1,12 @@
-import React from 'react'
+import React from "react";
+import { Row, Col } from "antd";
 
 export default function FooterComponent() {
   return (
-        <div>
+    <Row>
+      <Col span={8} offset={9}>
         Copyright Snapt Software 2019. All rights reserved.
-        </div>
-    )
+      </Col>
+    </Row>
+  );
 }

client/src/components/sign-in-form/sign-in-form.container.jsx

@@ -1,12 +1,45 @@
 import React from "react";
 import { ApolloConsumer } from "react-apollo";
 import SignInFormComponent from "./sign-in-form.component";
+import { Row, Col, Layout, Typography } from "antd";
+import FooterComponent from "../footer/footer.component";
+import Logo from "../../assets/logo240.png";
+
+const { Content, Footer } = Layout;
 
 export default function SignInFormContainer() {
   return (
     <ApolloConsumer>
       {client => {
-        return <SignInFormComponent apolloClient={client} />;
+        return (
+          <Layout>
+            <Content>
+              <Row align="middle">
+                <Col span="2" offset="8">
+                  <div>
+                    <img
+                      src={Logo}
+                      height="100"
+                      width="100"
+                      alt="Bodyshop.app"
+                    />
+                  </div>
+                </Col>
+                <Col span="6">
+                  <Typography.Title>Bodyshop.app</Typography.Title>
+                </Col>
+              </Row>
+              <Row>
+                <Col span="8" offset="8">
+                  <SignInFormComponent apolloClient={client} />
+                </Col>
+              </Row>
+            </Content>
+            <Footer>
+              <FooterComponent />
+            </Footer>
+          </Layout>
+        );
       }}
     </ApolloConsumer>
   );

client/src/graphql/client.js

@@ -1,40 +1,40 @@
-import ApolloClient from "apollo-client";
-import { InMemoryCache } from "apollo-cache-inmemory";
-import { HttpLink } from "apollo-link-http";
-import { setContext } from "apollo-link-context";
-import { resolvers, typeDefs } from "./resolvers";
-import apolloLogger from "apollo-link-logger";
-import { ApolloLink } from "apollo-boost";
+// import ApolloClient from "apollo-client";
+// import { InMemoryCache } from "apollo-cache-inmemory";
+// import { HttpLink } from "apollo-link-http";
+// import { setContext } from "apollo-link-context";
+// import { resolvers, typeDefs } from "./resolvers";
+// import apolloLogger from "apollo-link-logger";
+// import { ApolloLink } from "apollo-boost";
 
-const httpLink = new HttpLink({
-  uri: process.env.REACT_APP_GRAPHQL_ENDPOINT
-});
+// const httpLink = new HttpLink({
+//   uri: process.env.REACT_APP_GRAPHQL_ENDPOINT
+// });
 
-const authLink = setContext((_, { headers }) => {
-  // get the authentication token from local storage if it exists
-  const token = localStorage.getItem("token");
-  // return the headers to the context so httpLink can read them
-  if (token) {
-    return {
-      headers: {
-        ...headers,
-        authorization: token ? `Bearer ${token}` : ""
-      }
-    };
-  } else {
-    return { headers };
-  }
-});
+// const authLink = setContext((_, { headers }) => {
+//   // get the authentication token from local storage if it exists
+//   const token = localStorage.getItem("token");
+//   // return the headers to the context so httpLink can read them
+//   if (token) {
+//     return {
+//       headers: {
+//         ...headers,
+//         authorization: token ? `Bearer ${token}` : ""
+//       }
+//     };
+//   } else {
+//     return { headers };
+//   }
+// });
 
-const middlewares = [];
-if (process.env.NODE_ENV === "development") {
-  middlewares.push(apolloLogger);
-}
-middlewares.push(authLink.concat(httpLink));
+// const middlewares = [];
+// if (process.env.NODE_ENV === "development") {
+//   middlewares.push(apolloLogger);
+// }
+// middlewares.push(authLink.concat(httpLink));
 
-export const client = new ApolloClient({
-  link: ApolloLink.from(middlewares),
-  cache: new InMemoryCache({ addTypename: false }),
-  typeDefs,
-  resolvers
-});
+// export const client = new ApolloClient({
+//   link: ApolloLink.from(middlewares),
+//   cache: new InMemoryCache({ addTypename: false }),
+//   typeDefs,
+//   resolvers
+// });

client/src/graphql/jobs.queries.js

@@ -4,16 +4,21 @@ export const GET_ALL_OPEN_JOBS = gql`
   {
     jobs {
       id
+      est_number
       ro_number
       status
       scheduled_completion
       scheduled_delivery
       vehicle {
         v_model_yr
-      v_model_desc
         v_make_desc
+        v_model_desc
         plate_no
       }
+      owner {
+        first_name
+        last_name
+      }
     }
   }
 `;

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 => {

client/yarn.lock

@@ -9962,7 +9962,7 @@ react-app-polyfill@^1.0.4:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
-"react-click-outside@github:tj/react-click-outside":
+react-click-outside@tj/react-click-outside:
   version "1.1.1"
   resolved "https://codeload.github.com/tj/react-click-outside/tar.gz/a833ddc5be47490307f9fcc6ed09d8c353108510"
 
@@ -10980,9 +10980,9 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
-"smooth-dnd@git+https://github.com/rcdexta/smooth-dnd.git":
+"smooth-dnd@https://github.com/rcdexta/smooth-dnd":
   version "0.6.3"
-  resolved "git+https://github.com/rcdexta/smooth-dnd.git#f13924c67bf6ffe4613d97bb1ee83f11d364eb1e"
+  resolved "https://github.com/rcdexta/smooth-dnd#f13924c67bf6ffe4613d97bb1ee83f11d364eb1e"
 
 snapdragon-node@^2.0.1:
   version "2.1.1"

package.json

@@ -7,6 +7,7 @@
     "npm": "6.11.3"
   },
   "scripts": {
+    "setup": "yarn && cd firebase && yarn && cd .. && cd client && yarn ",
     "client": "cd client && yarn start",
     "server": "nodemon server.js",
     "build": "cd client && npm run build",