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";
-
-//      on_conflict: { constraint: users_pkey, update_columns: [authid] }
+import Spin from '../components/loading-spinner/loading-spinner.component'
 
 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";
-import SignIn from "../components/sign-in/sign-in.component";
-import initialState from "../graphql/initial-state";
-import JobListContainer from "../components/job-list/job-list.container";
+//Component Imports
+import SignIn from "../components/landing-components/sign-in/sign-in.component";
+import LandingPage from "../pages/landing/landing.component";
+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 />
-      {isIn ? null : <SignIn />}
-      <JobListContainer />
+      <Switch>
+        <Route exact path="/" component={LandingPage} />
+        <Route exact path="/signin" component={SignIn} />
+        <PrivateRoute isAuthorized={isIn} path="/manage" component={Manage} />
+      </Switch>
     </ApolloProvider>
   );
 }