diff --git a/lattice/src/App.tsx b/lattice/src/App.tsx index 6d21e662b..9ee4804e1 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 Main from "Main"; -import Signin from "App/AuthFlow/Signin"; 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,8 +13,10 @@ const App = () => { return ( {auth.isLoading ? ( + // Loading, retreiving auth status
) : ( + // Loading done, display app based on auth status {auth.isAuthOn ? ( // Auth is on, hide the routes with PrivateRoute diff --git a/lattice/src/App/AuthFlow/SignInButton.tsx b/lattice/src/App/AuthFlow/SignInButton.tsx index a31202647..2b43b1121 100644 --- a/lattice/src/App/AuthFlow/SignInButton.tsx +++ b/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 = ({ children }) => { + const signinOnClick = (e) => { + window.location.href = "/login"; + }; + return ( - - - + ); }; diff --git a/lattice/src/App/AuthFlow/SignOutButton.tsx b/lattice/src/App/AuthFlow/SignOutButton.tsx index 5dd75b804..b38c2cf33 100644 --- a/lattice/src/App/AuthFlow/SignOutButton.tsx +++ b/lattice/src/App/AuthFlow/SignOutButton.tsx @@ -11,9 +11,9 @@ const SignOutButton: React.FC = ({ children }) => { }; return ( - + ); }; diff --git a/lattice/src/Main.tsx b/lattice/src/Main.tsx index b305bbaed..44b80179f 100644 --- a/lattice/src/Main.tsx +++ b/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"; diff --git a/lattice/src/index.tsx b/lattice/src/index.tsx index b8b53d0af..cc5626a9f 100644 --- a/lattice/src/index.tsx +++ b/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( diff --git a/lattice/src/shared/PrivateRoute/PrivateRoute.tsx b/lattice/src/shared/PrivateRoute/PrivateRoute.tsx index e33bc9866..5a76677fc 100644 --- a/lattice/src/shared/PrivateRoute/PrivateRoute.tsx +++ b/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 }) {