From 94ab5c3d8f20cd072209c2c2527e31abe1e8df1d Mon Sep 17 00:00:00 2001
From: Djeeberjr <djeeberjr@gmail.com>
Date: Sat, 18 Sep 2021 23:36:37 +0200
Subject: [PATCH] Implemented private routes

---
 src/App.tsx | 58 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5e20eef..4a9a671 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,38 +4,48 @@ import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-d
 import NotFound from "./components/NotFound"
 import Login from "./components/Login"
 import { useIsAuthQuery } from "./generated/graphql"
-  
-const App: React.FC = () => {
-	const {data: isAuth, loading } = useIsAuthQuery()
-	const [loginSuccessful,setLoginSuccessful] = useState(false)
+import { useEffect } from "react"
 
-	const loginRoutes = ()=>{
-		if (loginSuccessful || isAuth?.authorized){
-			// Routes available when logged in
-			return <>
-				<Route path="/f/" component={FileBrowser}/>
-				<Redirect from="/" exact to="/f/" />
-			</>
-		}else{
-			// Routes available when NOT logged in
-			return <>
-				<Route path="/login" exact >
-					<Login onLogin={()=>{
-						setLoginSuccessful(true)
-					}} />
-				</Route>
-				<Redirect from="*" to="/login" />
-			</>
+const App: React.FC = () => {
+	const { data } = useIsAuthQuery()
+	const [isAuth,setIsAuth] = useState(false)
+	const [ready,setReady] = useState(false)
+
+	useEffect(()=>{
+		if (data){
+			setIsAuth(data.authorized)
+			setReady(true)
 		}
-	}
+	},[data])
 
 	return (
 		<div className="dark:text-gray-300">
 			{
-				!loading && 
+				ready&& 
 				<Router>
 					<Switch>
-						{loginRoutes()}
+						{/* Private only routes */}
+						{
+							isAuth && [
+								<Route path="/f/" component={FileBrowser} key={null} />,
+								<Redirect from="/" exact to="/f/" key={null} />,
+								<Redirect from="/login" exact to="/f/" key={null} />,
+							]
+						}
+
+						{/* Public only routes */}
+						{
+							!isAuth && [
+								<Route path="/login" exact key={1} >
+									<Login onLogin={()=>{
+										setIsAuth(true)
+									}} />
+								</Route>,
+								<Redirect from="/f/" to="/login" key={2} />
+							]
+						}
+
+						{/* Public & private routes */}
 						<Route path="*" component={NotFound} />
 					</Switch>
 				</Router>