Merge branch '54mir/authentication' of github.com:molecula/featurebase into 54mir/authentication

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 { useAuth } from "services/useAuth";
+import PrivateRoute from "shared/PrivateRoute/PrivateRoute";
+import { lightTheme } from "theme/";
+import Main from "Main";
+import Signin from "App/AuthFlow/Signin";
 
 const App = () => {
   const auth = useAuth();
@@ -13,19 +13,23 @@ const App = () => {
   return (
     <BrowserRouter>
       {auth.isLoading ? (
+        // Loading, retreiving auth status
         <div></div>
       ) : (
+        // Loading done, display app based on auth status
         <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>

lattice/src/App/AuthFlow/SignInButton.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 SignInButton: React.FC<Props> = ({ children }) => {
+  const signinOnClick = (e) => {
+    window.location.href = "/login";
+  };
+
   return (
-    <a href="/login">
-      <Button variant="contained" color="primary" size="large" fullWidth>
-        Sign in
-      </Button>
-    </a>
+    <Button variant="contained" color="primary" size="large" onClick={signinOnClick} fullWidth>
+      Sign in
+    </Button>
   );
 };
 

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>
-    </a>
+    <Button variant="contained" color="secondary" onClick={signoutOnClick}>
+      Sign out
+    </Button>
   );
 };
 

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;

lattice/src/App/AuthFlow/index.ts

@@ -1 +1 @@
-export * from './Login';
+export * from './Signin';

lattice/src/Main.tsx

@@ -1,16 +1,16 @@
+import { useEffect, useState } from "react";
+import { Route, Switch } from "react-router-dom";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import { MuiThemeProvider } from "@material-ui/core/styles";
+
+import { Header } from "shared/Header";
+import { Nav } from "shared/Nav";
+import { darkTheme, lightTheme } from "theme/";
 import { Home } from "App/Home";
 import { MoleculaTablesContainer } from "App/MoleculaTables";
 import { NotFound } from "App/NotFound";
 import { QueryContainer } from "App/Query";
 import { QueryBuilderContainer } from "App/QueryBuilder";
-import { useEffect, useState } from "react";
-import { Route, Switch } from "react-router-dom";
-import { Header } from "shared/Header";
-import { Nav } from "shared/Nav";
-import { darkTheme, lightTheme } from "theme/";
-
-import CssBaseline from "@material-ui/core/CssBaseline";
-import { MuiThemeProvider } from "@material-ui/core/styles";
 
 import css from "./App.module.scss";
 
@@ -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>

lattice/src/index.tsx

@@ -1,11 +1,10 @@
-import './index.scss';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { ProvideAuth } from 'services/useAuth';
 
-import App from './App';
 import * as serviceWorker from './serviceWorker';
+import './index.scss';
+import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>

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,
   };
 }

lattice/src/shared/PrivateRoute/PrivateRoute.tsx

@@ -1,4 +1,5 @@
 import { Redirect, Route } from 'react-router-dom';
+
 import { useAuth } from 'services/useAuth';
 
 function PrivateRoute({ component: Component, ...rest }) {
@@ -8,12 +9,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={{