Fixed all firebase login issues. Added private routes. Reconfigured components and reorganized project.

client/src/App/App.container.jsx

@@ -3,16 +3,13 @@
 import React, { useState, useEffect } from "react";
 import firebase from "../firebase/firebase.utils";
 import App from "./App";
-import { Spin } from "antd";
+
 import { gql } from "apollo-boost";
-import { useMutation } from "@apollo/react-hooks";
 import { HttpLink } from "apollo-link-http";
 import ApolloClient from "apollo-client";
 import { InMemoryCache } from "apollo-cache-inmemory";
 
-//import gql from "graphql-tag";
+import Spin from '../components/loading-spinner/loading-spinner.component'
-
-//      on_conflict: { constraint: users_pkey, update_columns: [authid] }
 
 const UPSERT_USER = gql`
   mutation upsert_user($authEmail: String!, $authToken: String!) {
@@ -36,9 +33,6 @@ const client = new ApolloClient({
 
 export default function Auth() {
   const [authState, setAuthState] = useState({ status: "loading" });
-  // const [upsertUser] = useMutation(UPSERT_USER, {
-  //   client
-  // });
 
   useEffect(() => {
     return firebase.auth().onAuthStateChanged(async user => {
@@ -57,7 +51,6 @@ export default function Auth() {
         const idTokenResult = await user.getIdTokenResult();
         const hasuraClaim =
           idTokenResult.claims["https://hasura.io/jwt/claims"];
-        console.log("idTokenResult", idTokenResult);
         if (hasuraClaim) {
           setAuthState({ status: "in", user, token });
         } else {
@@ -89,25 +82,14 @@ export default function Auth() {
 
   let content;
   if (authState.status === "loading") {
-    content = <Spin size="large" />;
+    content = <Spin />;
   } else {
     content = (
       <>
-        <div>
-          {authState.status === "in" ? (
-            <div>
-              <h2>Welcome, {authState.user.displayName}</h2>
-              <button onClick={signOut}>Sign out</button>
-            </div>
-          ) : (
-            <div>Sign in</div>
-          )}
-        </div>
-
         <App authState={authState} />
       </>
     );
   }
 
-  return <div className="auth">{content}</div>;
+  return <div className="app-container">{content}</div>;
 }

client/src/App/App.js

@@ -1,19 +1,21 @@
 import React from "react";
+import { Switch, Route } 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";
 //Styling imports
 import "./App.css";
 
-import HeaderAppBarContainer from "../components/header-app-bar/header-app-bar.container";
+//Component Imports
-import SignIn from "../components/sign-in/sign-in.component";
+import SignIn from "../components/landing-components/sign-in/sign-in.component";
-import initialState from "../graphql/initial-state";
+import LandingPage from "../pages/landing/landing.component";
-import JobListContainer from "../components/job-list/job-list.container";
+import Manage from "../pages/manage/manage.component";
+
+import PrivateRoute from "../utils/private-route";
 
-//Todo: Issue with this line. Not sure why.
 const graphqlEndpoint = process.env.REACT_APP_GRAPHQL_ENDPOINT;
 
 export default function App({ authState }) {
@@ -30,14 +32,16 @@ export default function App({ authState }) {
     typeDefs
   });
   client.writeData({
-    data: initialState
+    data: { ...initialState, authState }
   });
 
   return (
     <ApolloProvider client={client}>
-      <HeaderAppBarContainer />
+      <Switch>
-      {isIn ? null : <SignIn />}
+        <Route exact path="/" component={LandingPage} />
-      <JobListContainer />
+        <Route exact path="/signin" component={SignIn} />
+        <PrivateRoute isAuthorized={isIn} path="/manage" component={Manage} />
+      </Switch>
     </ApolloProvider>
   );
 }

client/src/components/header-app-bar/header-app-bar.component.jsx

@@ -1,67 +0,0 @@
-import React, { Component } from "react";
-import { Menu, Icon } from "antd";
-
-const { SubMenu } = Menu;
-class HeaderAppBar extends Component {
-  handleClick = e => {
-    console.log("click ", e);
-    this.setState({
-      current: e.key
-    });
-  };
-
-  render() {
-    const { selectedNavItem, navItems } = this.props;
-    return (
-      <Menu
-        onClick={this.handleClick}
-        selectedKeys={selectedNavItem}
-        mode="horizontal"
-      >
-        {
-          navItems.map(navItem => (
-          <Menu.Item key={navItem.title}>{navItem.title}</Menu.Item>
-        ))
-      }
-      </Menu>
-
-      //   <Menu.Item key="mail">
-      //     <Icon type="mail" />
-      //     Navigation One
-      //   </Menu.Item>
-      //   <Menu.Item key="app" disabled>
-      //     <Icon type="appstore" />
-      //     Navigation Two
-      //   </Menu.Item>
-      //   <SubMenu
-      //     title={
-      //       <span className="submenu-title-wrapper">
-      //         <Icon type="setting" />
-      //         Navigation Three - Submenu
-      //       </span>
-      //     }
-      //   >
-      //     <Menu.ItemGroup title="Item 1">
-      //       <Menu.Item key="setting:1">Option 1</Menu.Item>
-      //       <Menu.Item key="setting:2">Option 2</Menu.Item>
-      //     </Menu.ItemGroup>
-      //     <Menu.ItemGroup title="Item 2">
-      //       <Menu.Item key="setting:3">Option 3</Menu.Item>
-      //       <Menu.Item key="setting:4">Option 4</Menu.Item>
-      //     </Menu.ItemGroup>
-      //   </SubMenu>
-      //   <Menu.Item key="alipay">
-      //     <a
-      //       href="https://ant.design"
-      //       target="_blank"
-      //       rel="noopener noreferrer"
-      //     >
-      //       Navigation Four - Link
-      //     </a>
-      //   </Menu.Item>
-      // </Menu>
-    );
-  }
-}
-
-export default HeaderAppBar;

client/src/components/header-app-bar/header-app-bar.container.jsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { Query } from "react-apollo";
-import { gql } from "apollo-boost";
-
-import { Spin, Alert } from "antd";
-import HeaderAppBar from "./header-app-bar.component";
-
-const GET_NAV_ITEMS = gql`
-  query nav_items {
-    masterdata_by_pk(key: "NAV_ITEMS") {
-      value
-    }
-  }
-`;
-
-const GET_SELECTED_NAV_ITEM = gql`
-  query selected_nav_item {
-    selectedNavItem @client
-  }
-`;
-
-const HeaderAppBarContainer = () => (
-  <Query query={GET_SELECTED_NAV_ITEM}>
-    {({ loading, error, data: { selectedNavItem } }) => {
-      return (
-        <Query query={GET_NAV_ITEMS}>
-          {({ loading, error, data }) => {
-            if (loading) return <Spin size="large" />;
-            if (error) return <Alert message={error.message} />;
-            const parsedNavItems = JSON.parse(data.masterdata_by_pk.value)
-            return (
-              <HeaderAppBar
-                selectedNavItem={selectedNavItem}
-                navItems={parsedNavItems}
-              />
-            );
-          }}
-        </Query>
-      );
-    }}
-  </Query>
-);
-
-export default HeaderAppBarContainer;

client/src/components/header/header.component.jsx

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { Menu, Icon } from "antd";
+import "./header.styles.scss";
+
+class Header extends Component {
+  handleClick = e => {
+    console.log("click ", e);
+    this.setState({
+      current: e.key
+    });
+  };
+
+  render() {
+    const { selectedNavItem, navItems } = this.props;
+    return (
+      <Menu
+        className="header"
+        onClick={this.handleClick}
+        selectedKeys={selectedNavItem}
+        mode="horizontal"
+      >
+        {navItems.map(navItem => (
+          <Menu.Item key={navItem.title}>
+            <Link to={navItem.path}>
+              <Icon type={navItem.icontype} />
+              {navItem.title}
+            </Link>
+          </Menu.Item>
+        ))}
+      </Menu>
+    );
+  }
+}
+
+export default Header;

client/src/components/header/header.container.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Query } from "react-apollo";
+
+import { Alert } from "antd";
+import Header from "./header.component";
+
+import Spin from "../loading-spinner/loading-spinner.component";
+
+import {
+  GET_SELECTED_NAV_ITEM,
+  GET_LANDING_NAV_ITEMS,
+  GET_NAV_ITEMS
+} from "../../graphql/metadata.queries";
+
+const HeaderContainer = ({ landingHeader }) => {
+  let GET_METADATA;
+  if (landingHeader) GET_METADATA = GET_LANDING_NAV_ITEMS;
+  else GET_METADATA = GET_NAV_ITEMS;
+
+  return (
+    <Query query={GET_SELECTED_NAV_ITEM}>
+      {({ loading, error, data: { selectedNavItem } }) => {
+        return (
+          <Query query={GET_METADATA}>
+            {({ loading, error, data }) => {
+              if (loading) return <Spin />;
+              if (error) return <Alert message={error.message} />;
+              const parsedNavItems = JSON.parse(data.masterdata_by_pk.value);
+              return (
+                <Header
+                  selectedNavItem={selectedNavItem}
+                  navItems={parsedNavItems}
+                />
+              );
+            }}
+          </Query>
+        );
+      }}
+    </Query>
+  );
+};
+
+export default HeaderContainer;

client/src/components/header/header.styles.scss

@@ -0,0 +1,4 @@
+.header{
+        text-align: center;     
+        width: 100%; 
+}

client/src/components/job-list/job-list.container.jsx

@@ -2,8 +2,9 @@ import React from "react";
 import { Query } from "react-apollo";
 import { gql } from "apollo-boost";
 
-import { Spin, Alert } from "antd";
+import {  Alert } from "antd";
 
+import Spin from '../loading-spinner/loading-spinner.component'
 import JobList from "./job-list.component";
 
 const GET_JOBS = gql`
@@ -17,7 +18,7 @@ const GET_JOBS = gql`
 const JobListContainer = () => (
   <Query query={GET_JOBS}>
     {({ loading, error, data }) => {
-      if (loading) return <Spin size="large" />;
+      if (loading) return <Spin />;
       if (error) return <Alert message={error.message} />;
       console.log("JobListContainer Data:", data);
 

client/src/components/landing-components/sign-in/sign-in.component.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { auth } from "../../firebase/firebase.utils";
+import { auth } from "../../../firebase/firebase.utils";
 import { Form, Icon, Input, Button, Alert } from "antd";
 
 class SignIn extends React.Component {

client/src/components/loading-spinner/loading-spinner.component.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { Spin } from "antd";
+import "./loading-spinner.styles.scss";
+
+export default function LoadingSpinner() {
+  return <Spin className="spinner" size="large" delay="500" />;
+}

client/src/components/loading-spinner/loading-spinner.styles.scss

@@ -0,0 +1,3 @@
+.spinner {
+  text-align: center;
+}

client/src/components/manage-shop/manage-shop.component.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function ManageShop() {
+  return (
+    <div>
+     
+      This is the manage shop component.
+    </div>
+  );
+}

client/src/components/manage-shop/manage-shop.container.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Query } from "react-apollo";
+import { gql } from "apollo-boost";
+
+import { Alert } from "antd";
+import Spin from '../loading-spinner/loading-spinner.component'
+import ManageShop from "./manage-shop.component";
+
+const GET_NAV_ITEMS = gql`
+  query nav_items {
+    masterdata_by_pk(key: "NAV_ITEMS") {
+      value
+    }
+  }
+`;
+
+const ManageShopContainer = () => (
+  <Query query={GET_NAV_ITEMS}>
+    {({ loading, error, data }) => {
+      if (loading) return <Spin />;
+      if (error) return <Alert message={error.message} />;
+      return <ManageShop />;
+    }}
+  </Query>
+);
+
+export default ManageShopContainer;

client/src/components/sign-out/sign-out.component.jsx

@@ -0,0 +1,11 @@
+import React, { useState } from 'react'
+
+export default function SignOut() {
+
+
+    return (
+        <div>
+            Sign Out
+        </div>
+    )
+}

client/src/graphql/initial-state.js

@@ -1,3 +1,5 @@
 export default {
+  authState: null,
   selectedNavItem: "Home",
+  recentItems: []
 };

client/src/graphql/metadata.queries.js

@@ -0,0 +1,22 @@
+import { gql } from "apollo-boost";
+
+export const GET_LANDING_NAV_ITEMS = gql`
+  query nav_items {
+    masterdata_by_pk(key: "LANDING_NAV_ITEMS") {
+      value
+    }
+  }
+`;
+export const GET_NAV_ITEMS = gql`
+  query nav_items {
+    masterdata_by_pk(key: "NAV_ITEMS") {
+      value
+    }
+  }
+`;
+
+export const GET_SELECTED_NAV_ITEM = gql`
+  query selected_nav_item {
+    selectedNavItem @client
+  }
+`;

client/src/pages/landing/landing.component.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Typography } from "antd";
+
+import HeaderContainer from "../../components/header/header.container";
+
+export default function LandingPage() {
+  return (
+    <div>
+      <HeaderContainer landingHeader />
+      <Typography.Title>
+        Welcome to bodyshop.app.
+      </Typography.Title>
+    </div>
+  );
+}

client/src/pages/manage/manage.component.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Route } from "react-router";
+
+//Component Imports
+import ManageShopContainer from '../../components/manage-shop/manage-shop.container';
+
+
+//This page will handle all routing for the entire application. 
+export default function Manage({match}) {
+    console.log('Manage: match ', match)
+    return (
+        <div>
+            <Route exact path={`${match.path}`} component={ManageShopContainer}/>
+        </div>
+    )
+}

client/src/utils/private-route.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Route, Redirect } from "react-router-dom";
+export default ({ component: Component, isAuthorized, ...rest }) => (
+  <Route
+    {...rest}
+    render={props =>
+      isAuthorized === true ? (
+        <Component {...props} />
+      ) : (
+        <Redirect to="/signin" />
+      )
+    }
+  />
+);