From 8a72294c9160db09d57559ae5282c5473c8f12bc Mon Sep 17 00:00:00 2001
From: Patrick Fic <pfic@outlook.com>
Date: Fri, 6 Dec 2019 21:10:05 -0800
Subject: [PATCH] Backup before moving to local state instead of hooks.

---
 client/public/manifest.json                   |  2 +-
 client/src/App/App.container.jsx              | 10 ----
 client/src/App/App.js                         | 10 +++-
 .../components/header/header.component.jsx    | 50 +++++++++----------
 .../components/header/header.container.jsx    |  1 -
 .../sign-out/sign-out.component.jsx           | 18 ++++---
 client/src/graphql/initial-state.js           |  5 +-
 .../unauthorized/unauthorized.component.jsx   | 15 ++++++
 client/src/utils/private-route.js             |  2 +-
 9 files changed, 67 insertions(+), 46 deletions(-)
 create mode 100644 client/src/pages/unauthorized/unauthorized.component.jsx

diff --git a/client/public/manifest.json b/client/public/manifest.json
index ef4478843..da7573171 100644
--- a/client/public/manifest.json
+++ b/client/public/manifest.json
@@ -8,7 +8,7 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo1240.png",
+      "src": "logo240.png",
       "type": "image/png",
       "sizes": "192x192"
     },
diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx
index b48fba907..da9c2acad 100644
--- a/client/src/App/App.container.jsx
+++ b/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 />;
diff --git a/client/src/App/App.js b/client/src/App/App.js
index 701677aae..0d808c328 100644
--- a/client/src/App/App.js
+++ b/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>
diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
index 07b39e639..981f3411a 100644
--- a/client/src/components/header/header.component.jsx
+++ b/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 {
-  handleClick = e => {
+export default ({ selectedNavItem, navItems }) => {
+  const 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}>
-              {navItem.icontype ? <Icon type={navItem.icontype} /> : null}
-              {navItem.title}
-            </Link>
-          </Menu.Item>
-        ))}
-      </Menu>
-    );
-  }
-}
+  return (
+    <Menu
+      className="header"
+      onClick={handleClick}
+      selectedKeys={selectedNavItem}
+      mode="horizontal"
+    >
+      {navItems.map(navItem => (
+        <Menu.Item key={navItem.title}>
+          <Link to={navItem.path}>
+            {navItem.icontype ? <Icon type={navItem.icontype} /> : null}
+            {navItem.title}
+          </Link>
+        </Menu.Item>
+      ))}
 
-export default Header;
+      <Menu.Item>
+        <SignOut />
+      </Menu.Item>
+    </Menu>
+  );
+};
diff --git a/client/src/components/header/header.container.jsx b/client/src/components/header/header.container.jsx
index 1e4dbbd76..dac8e0608 100644
--- a/client/src/components/header/header.container.jsx
+++ b/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}
diff --git a/client/src/components/sign-out/sign-out.component.jsx b/client/src/components/sign-out/sign-out.component.jsx
index 55e239762..1f3d6c670 100644
--- a/client/src/components/sign-out/sign-out.component.jsx
+++ b/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 (
-        <div>
-            Sign Out
-        </div>
-    )
+  return <div onClick={signOut}>Sign Out</div>;
 }
diff --git a/client/src/graphql/initial-state.js b/client/src/graphql/initial-state.js
index 539ae1a62..513254aeb 100644
--- a/client/src/graphql/initial-state.js
+++ b/client/src/graphql/initial-state.js
@@ -1,5 +1,8 @@
 export default {
-
+  currentUser: {
+    email: null,
+    displayName: null
+  },
   selectedNavItem: "Home",
   recentItems: []
 };
diff --git a/client/src/pages/unauthorized/unauthorized.component.jsx b/client/src/pages/unauthorized/unauthorized.component.jsx
new file mode 100644
index 000000000..913be8192
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/utils/private-route.js b/client/src/utils/private-route.js
index 2ee406d81..f7e796e70 100644
--- a/client/src/utils/private-route.js
+++ b/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" />
       )
     }
   />