implemented login redirect

src/App.tsx

@@ -1,20 +1,45 @@
-import React from "react"
+import React, { useState } from "react"
 import FileBrowser from "./components/FileBrowser"
 import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom"
 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)
+
+	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" />
+			</>
+		}
+	}
+
 	return (
 		<div className="dark:text-gray-300">
-			<Router>
-				<Switch>
-					<Route path="/login" exact component={Login} />
-					<Route path="/f/" component={FileBrowser}/>
-					<Redirect from="/" exact to="/f/" />
-					<Route path="*" component={NotFound} />
-				</Switch>
-			</Router>
+			{
+				!loading && 
+				<Router>
+					<Switch>
+						{loginRoutes()}
+						<Route path="*" component={NotFound} />
+					</Switch>
+				</Router>
+			}
 		</div>
 	)
 }

src/components/Login.tsx

@@ -1,9 +1,16 @@
 import React from "react"
 import { useState } from "react"
-import { RouteComponentProps } from "react-router-dom"
+import { useHistory } from "react-router-dom"
 import { useLoginMutation } from "../generated/graphql"
 
-const Login: React.FC<RouteComponentProps> = (props) => {
+interface Props {
+	onLogin?: ()=>void
+}
+
+const Login: React.FC<Props> = (props) => {
+
+	const history = useHistory()
+
 	const [username,setUsername] = useState("")
 	const [password,setPassword] = useState("")
 
@@ -41,7 +48,8 @@ const Login: React.FC<RouteComponentProps> = (props) => {
 
 						if (response.ok){
 							// Login successful
-							props.history.push("/f/")
+							props.onLogin?.()
+							history.push("/f/")
 						}else{
 							setLoginFailed(true)
 						}

src/generated/graphql.tsx

@@ -82,8 +82,8 @@ export type RootMutationDeleteDirArgs = {
 
 
 export type RootMutationLoginArgs = {
-  username: Scalars["String"];
   password: Scalars["String"];
+  username: Scalars["String"];
 };
 
 
@@ -94,6 +94,8 @@ export type RootMutationMoveArgs = {
 
 export type RootQuery = {
   __typename?: "RootQuery";
+  /** True if the user is authorized */
+  authorized: Scalars["Boolean"];
   directorys: Array<Directory>;
   file?: Maybe<File>;
   files: Array<File>;
@@ -174,6 +176,14 @@ export type GetFileQuery = (
   )> }
 );
 
+export type IsAuthQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type IsAuthQuery = (
+  { __typename?: "RootQuery" }
+  & Pick<RootQuery, "authorized">
+);
+
 export type LoginMutationVariables = Exact<{
   username: Scalars["String"];
   password: Scalars["String"];
@@ -387,6 +397,38 @@ export function useGetFileLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<Ge
 export type GetFileQueryHookResult = ReturnType<typeof useGetFileQuery>;
 export type GetFileLazyQueryHookResult = ReturnType<typeof useGetFileLazyQuery>;
 export type GetFileQueryResult = Apollo.QueryResult<GetFileQuery, GetFileQueryVariables>;
+export const IsAuthDocument = gql`
+    query isAuth {
+  authorized
+}
+    `
+
+/**
+ * __useIsAuthQuery__
+ *
+ * To run a query within a React component, call `useIsAuthQuery` and pass it any options that fit your needs.
+ * When your component renders, `useIsAuthQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useIsAuthQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useIsAuthQuery(baseOptions?: Apollo.QueryHookOptions<IsAuthQuery, IsAuthQueryVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useQuery<IsAuthQuery, IsAuthQueryVariables>(IsAuthDocument, options)
+}
+export function useIsAuthLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<IsAuthQuery, IsAuthQueryVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useLazyQuery<IsAuthQuery, IsAuthQueryVariables>(IsAuthDocument, options)
+}
+export type IsAuthQueryHookResult = ReturnType<typeof useIsAuthQuery>;
+export type IsAuthLazyQueryHookResult = ReturnType<typeof useIsAuthLazyQuery>;
+export type IsAuthQueryResult = Apollo.QueryResult<IsAuthQuery, IsAuthQueryVariables>;
 export const LoginDocument = gql`
     mutation Login($username: String!, $password: String!) {
   login(username: $username, password: $password) {

src/graphql/isAuth.graphql

@@ -0,0 +1,3 @@
+query isAuth{
+    authorized
+}