From 7de6c37b11cf295718e027c81806fa57733ec8a3 Mon Sep 17 00:00:00 2001
From: Hoang Pham <hoang.pham@molecula.com>
Date: Tue, 21 Dec 2021 16:06:02 -0600
Subject: [PATCH] UI - cleaned up code, added comments

---
 lattice/src/App.tsx                            | 18 ++++++++++--------
 lattice/src/App/AuthFlow/SignOutButton.tsx     | 14 ++++++++------
 .../src/App/AuthFlow/{Login.tsx => Signin.tsx} |  4 ++--
 lattice/src/App/AuthFlow/index.ts              |  2 +-
 lattice/src/Main.tsx                           | 11 ++---------
 lattice/src/services/useAuth.tsx               | 11 -----------
 .../src/shared/PrivateRoute/PrivateRoute.tsx   |  5 ++---
 7 files changed, 25 insertions(+), 40 deletions(-)
 rename lattice/src/App/AuthFlow/{Login.tsx => Signin.tsx} (93%)

diff --git a/lattice/src/App.tsx b/lattice/src/App.tsx
index 533976608..6d21e662b 100644
--- a/lattice/src/App.tsx
+++ b/lattice/src/App.tsx
@@ -1,11 +1,11 @@
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
-import { MuiThemeProvider } from '@material-ui/core/styles';
+import { BrowserRouter, Route, Switch } from "react-router-dom";
+import { MuiThemeProvider } from "@material-ui/core/styles";
 
-import Main from 'Main';
-import Login from 'App/AuthFlow/Login';
-import { useAuth } from 'services/useAuth';
-import PrivateRoute from 'shared/PrivateRoute/PrivateRoute';
-import { lightTheme } from 'theme/';
+import Main from "Main";
+import Signin from "App/AuthFlow/Signin";
+import { useAuth } from "services/useAuth";
+import PrivateRoute from "shared/PrivateRoute/PrivateRoute";
+import { lightTheme } from "theme/";
 
 const App = () => {
   const auth = useAuth();
@@ -17,15 +17,17 @@ const App = () => {
       ) : (
         <MuiThemeProvider theme={lightTheme}>
           {auth.isAuthOn ? (
+            // Auth is on, hide the routes with PrivateRoute
             <Switch>
               <Route
                 exact
                 path="/signin"
-                render={(props) => <Login {...props} name="Login"></Login>}
+                render={(props) => <Signin {...props}></Signin>}
               />
               <PrivateRoute path="/" component={Main} />
             </Switch>
           ) : (
+            // Auth is off, all routes are accessible
             <Route path="/" component={Main} />
           )}
         </MuiThemeProvider>
diff --git a/lattice/src/App/AuthFlow/SignOutButton.tsx b/lattice/src/App/AuthFlow/SignOutButton.tsx
index e28170589..5dd75b804 100644
--- a/lattice/src/App/AuthFlow/SignOutButton.tsx
+++ b/lattice/src/App/AuthFlow/SignOutButton.tsx
@@ -1,17 +1,19 @@
-import React from 'react';
-import { Button } from '@material-ui/core';
+import React from "react";
+import { Button } from "@material-ui/core";
 
 interface Props {
   children?: React.ReactNode;
 }
 
 const SignOutButton: React.FC<Props> = ({ children }) => {
+  const signoutOnClick = (e) => {
+    window.location.href = "/logout";
+  };
+
   return (
-    <a href="/logout">
-      <Button variant="contained" color="secondary">
-        Signout
+      <Button variant="contained" color="secondary" onClick={signoutOnClick}>
+        Sign out
       </Button>
-    </a>
   );
 };
 
diff --git a/lattice/src/App/AuthFlow/Login.tsx b/lattice/src/App/AuthFlow/Signin.tsx
similarity index 93%
rename from lattice/src/App/AuthFlow/Login.tsx
rename to lattice/src/App/AuthFlow/Signin.tsx
index f19399ee5..d6ef3c457 100644
--- a/lattice/src/App/AuthFlow/Login.tsx
+++ b/lattice/src/App/AuthFlow/Signin.tsx
@@ -6,7 +6,7 @@ import { ReactComponent as MLogo } from 'assets/m-bug-alt.svg';
 import css from './AuthFlow.module.scss';
 import SignInButton from './SignInButton';
 
-function Login(props) {
+function Signin(props) {
   const renderLoginForm = () => (
     <Card>
       <CardHeader
@@ -29,4 +29,4 @@ function Login(props) {
     </div>
   );
 }
-export default Login;
+export default Signin;
diff --git a/lattice/src/App/AuthFlow/index.ts b/lattice/src/App/AuthFlow/index.ts
index f1d32a23a..364a48925 100644
--- a/lattice/src/App/AuthFlow/index.ts
+++ b/lattice/src/App/AuthFlow/index.ts
@@ -1 +1 @@
-export * from './Login';
\ No newline at end of file
+export * from './Signin';
\ No newline at end of file
diff --git a/lattice/src/Main.tsx b/lattice/src/Main.tsx
index bfa1946ee..b305bbaed 100644
--- a/lattice/src/Main.tsx
+++ b/lattice/src/Main.tsx
@@ -44,16 +44,9 @@ const Main = () => {
             <div className={css.mainContent}>
               <Switch>
                 <Route exact path="/" component={Home} />
-                <Route
-                  path="/tables/:id?"
-                  component={MoleculaTablesContainer}
-                />
+                <Route path="/tables/:id?" component={MoleculaTablesContainer}/>
                 <Route exact path="/query" component={QueryContainer} />
-                <Route
-                  exact
-                  path="/querybuilder"
-                  component={QueryBuilderContainer}
-                />
+                <Route exact path="/querybuilder" component={QueryBuilderContainer}/>
                 <Route component={NotFound} />
               </Switch>
             </div>
diff --git a/lattice/src/services/useAuth.tsx b/lattice/src/services/useAuth.tsx
index 790835fbc..fd0f4ece1 100644
--- a/lattice/src/services/useAuth.tsx
+++ b/lattice/src/services/useAuth.tsx
@@ -1,5 +1,4 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
 
 import { pilosa } from './eventServices';
 
@@ -25,7 +24,6 @@ export interface IUser {
 
 // Provider hook that creates auth object and handles state
 function useProvideAuth() {
-  const history = useHistory();
   const [user, setUser] = useState<IUser | undefined>(undefined);
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -41,13 +39,6 @@ function useProvideAuth() {
     });
   };
 
-  const signin = () => {
-    history.push(`/login`);
-  };
-
-  const signout = () => {
-    history.push("/logout");
-  };
   // Subscribe to user on mount
   // Because this sets state in the callback it will cause any ...
   // ... component that utilizes this hook to re-render with the ...
@@ -86,7 +77,5 @@ function useProvideAuth() {
     isAuthOn,
     user,
     userinfo,
-    signin,
-    signout,
   };
 }
diff --git a/lattice/src/shared/PrivateRoute/PrivateRoute.tsx b/lattice/src/shared/PrivateRoute/PrivateRoute.tsx
index 16fe98247..e33bc9866 100644
--- a/lattice/src/shared/PrivateRoute/PrivateRoute.tsx
+++ b/lattice/src/shared/PrivateRoute/PrivateRoute.tsx
@@ -8,12 +8,11 @@ function PrivateRoute({ component: Component, ...rest }) {
     <Route
       {...rest}
       render={(props) => {
-        // If the user is authed render the component
         if (auth.isAuthenticated) {
-          // if (true) {
+          // If the user is authenticated, render the component
           return <Component {...rest} {...props} />;
         } else {
-          // If they are not then we need to redirect to a public page
+          // If the user is not authenticated, redirect to sign in page
           return (
             <Redirect
               to={{