Backup before moving to local state instead of hooks.

client/public/manifest.json

@@ -8,7 +8,7 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo1240.png",
+      "src": "logo240.png",
       "type": "image/png",
       "sizes": "192x192"
     },

client/src/App/App.container.jsx

@@ -76,16 +76,6 @@ export default function Auth() {
     });
   }, []);
 
-  const signOut = async () => {
-    try {
-      setAuthState({ status: "loading" });
-      await firebase.auth().signOut();
-      setAuthState({ status: "out" });
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
   let content;
   if (authState.status === "loading") {
     content = <Spin />;

client/src/App/App.js

@@ -16,6 +16,7 @@ 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;
 
@@ -47,15 +48,22 @@ export default function App({ authState }) {
 
   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 ? <Redirect to="/manage" /> : <SignInContainer />
+            authState.status == "in" ? (
+              <Redirect to="/manage" />
+            ) : (
+              <SignInContainer />
+            )
           }
         />
+        {/* <Route path="/signin" component={SignInContainer} /> */}
         <PrivateRoute isAuthorized={isIn} path="/manage" component={Manage} />
       </Switch>
     </ApolloProvider>

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

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

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

@@ -27,7 +27,6 @@ const HeaderContainer = ({ landingHeader }) => {
               if (loading) return <Spin />;
               if (error) return <Alert message={error.message} />;
               const parsedNavItems = JSON.parse(data.masterdata_by_pk.value);
-              console.log("::1", landingHeader);
               return (
                 <Header
                   selectedNavItem={selectedNavItem}

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

@@ -1,11 +1,17 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
+import firebase from "../../firebase/firebase.utils";
 
 export default function SignOut() {
+  const [authState, setAuthState] = useState();
 
+  const signOut = async () => {
+    try {
+      const p = await firebase.auth().signOut();
+      setAuthState({ status: "out" });
+    } catch (error) {
+      console.log(error);
+    }
+  };
 
-    return (
+  return <div onClick={signOut}>Sign Out</div>;
-        <div>
-            Sign Out
-        </div>
-    )
 }

client/src/graphql/initial-state.js

@@ -1,5 +1,8 @@
 export default {
-
+  currentUser: {
+    email: null,
+    displayName: null
+  },
   selectedNavItem: "Home",
   recentItems: []
 };

client/src/pages/unauthorized/unauthorized.component.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Typography } from "antd";
+import HeaderContainer from "../../components/header/header.container";
+
+export default function Unauthorized() {
+  return (
+    <div>
+      <HeaderContainer landingHeader />
+      <Typography.Title>Unauthorized</Typography.Title>
+      <Typography.Paragraph>
+        You do not have permission to view the requested page.
+      </Typography.Paragraph>
+    </div>
+  );
+}

client/src/utils/private-route.js

@@ -7,7 +7,7 @@ export default ({ component: Component, isAuthorized, ...rest }) => (
       isAuthorized === true ? (
         <Component {...props} />
       ) : (
-        <Redirect to="/signin" />
+        <Redirect to="/unauthorized" />
       )
     }
   />