Implemented private routes

package.json

@@ -4,25 +4,14 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.3.21",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-router-dom": "^5.1.8",
     "graphql": "^15.5.1",
-    "node-sass": "^6.0.1",
-    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-contexify": "^5.0.0",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "rooks": "^5.7.1",
-    "typescript": "^4.1.2",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
-    "web-vitals": "^1.0.1"
   },
   "scripts": {
     "start": "craco start",
@@ -57,14 +46,21 @@
     "@graphql-codegen/typescript": "^1.23.0",
     "@graphql-codegen/typescript-operations": "1.18.4",
     "@graphql-codegen/typescript-react-apollo": "2.3.1",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.28.4",
     "@typescript-eslint/parser": "^4.28.4",
     "apollo": "^2.33.4",
     "autoprefixer": "^9",
     "eslint": "^7.31.0",
     "eslint-plugin-react": "^7.24.0",
+    "node-sass": "^6.0.1",
     "postcss": "^7",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
+    "react-scripts": "4.0.3",
+    "typescript": "^4.1.2"
   },
   "proxy": "http://localhost:8080"
 }

src/App.tsx

@@ -1,20 +1,55 @@
-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"
+import { useEffect } from "react"
+
 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">
-			<Router>
+			{
-				<Switch>
+				ready&& 
-					<Route path="/login" exact component={Login} />
+				<Router>
-					<Route path="/f/" component={FileBrowser}/>
+					<Switch>
-					<Redirect from="/" exact to="/f/" />
+						{/* Private only routes */}
-					<Route path="*" component={NotFound} />
+						{
-				</Switch>
+							isAuth && [
-			</Router>
+								<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>
+			}
 		</div>
 	)
 }

src/components/FileBrowser.tsx

@@ -16,6 +16,7 @@ import FileUploadButton from "./FileUploadButton"
 import { ReactComponent as Spinner } from "./../assets/spinner.svg"
 import FileBrowserList from "./FileBrowserList"
 import pathRename from "../functions/pathRename"
+import MoreMenu from "./MoreMenu"
 
 function uriToPath(pathname:string) {
 	// strip the "/f" from e.g. "/f/dir1/dir2"
@@ -139,6 +140,9 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 							onUpload={(files)=>handleDrop(files)}
 						/>
 					</div>
+					<div>
+						<MoreMenu />
+					</div>
 
 				</div>
 				<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/components/MoreMenu.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+import { useState } from "react"
+import { MdMoreVert } from "react-icons/md"
+import { useHistory } from "react-router-dom"
+import { useOutsideClickRef } from "rooks"
+import logout from "../functions/logout"
+import MoreMenuEntry from "./MoreMenuEntry"
+
+const MoreMenu: React.FC = () => {
+	const [showMenu,setShowMenu] = useState(false)
+	const history = useHistory()
+
+	const [outsideRef] = useOutsideClickRef(()=>{
+		setShowMenu(false)
+	})
+
+	return <>
+		<button
+			onClick={()=>{
+				setShowMenu(!showMenu)
+			}}
+		>
+			<MdMoreVert size="40"/>
+		</button>
+		<div className="" ref={outsideRef} >
+			{
+				showMenu && (
+					<div className="absolute -ml-32 bg-white dark:bg-gray-800 p-2 border-2 dark:border-gray-900">
+						{/* TODO: there has got to be a better way than "w-36" */}
+						<div className="w-36">
+							<ul>
+								<MoreMenuEntry>
+									Menu 1
+								</MoreMenuEntry>
+								<MoreMenuEntry>
+									Menu 2
+								</MoreMenuEntry>
+								<MoreMenuEntry
+									onclick={async ()=>{
+										setShowMenu(false)
+										await logout()
+										history.push("/login")
+									}}
+								>
+									Logout
+								</MoreMenuEntry>
+							</ul>
+						</div>
+					</div>
+				)
+			}
+		</div>
+	</>
+}
+
+export default MoreMenu

src/components/MoreMenuEntry.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+
+interface Props {
+	onclick?: ()=>void
+}
+
+const MoreMenuEntry: React.FC<Props> = (props) => {
+	return (
+		<li 
+			className="py-2 px-2 hover:bg-gray-100 dark:hover:bg-gray-900 cursor-pointer text-xl"
+			onClick={props.onclick}
+		>
+			{props.children}
+		</li>
+	)
+}
+
+export default MoreMenuEntry

src/functions/logout.ts

@@ -0,0 +1,7 @@
+async function logout(): Promise<void> {
+	await fetch("/api/logout",{
+		method:"POST"
+	})
+}
+
+export default logout

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
+}

yarn.lock

@@ -1246,7 +1246,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.14.8"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz"
   integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
@@ -2357,60 +2357,11 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@testing-library/dom@^7.28.1":
-  version "7.31.2"
-  resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz"
-  integrity sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^4.2.0"
-    aria-query "^4.2.2"
-    chalk "^4.1.0"
-    dom-accessibility-api "^0.5.6"
-    lz-string "^1.4.4"
-    pretty-format "^26.6.2"
-
-"@testing-library/jest-dom@^5.11.4":
-  version "5.14.1"
-  resolved "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz"
-  integrity sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    "@types/testing-library__jest-dom" "^5.9.1"
-    aria-query "^4.2.2"
-    chalk "^3.0.0"
-    css "^3.0.0"
-    css.escape "^1.5.1"
-    dom-accessibility-api "^0.5.6"
-    lodash "^4.17.15"
-    redent "^3.0.0"
-
-"@testing-library/react@^11.1.0":
-  version "11.2.7"
-  resolved "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz"
-  integrity sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^7.28.1"
-
-"@testing-library/user-event@^12.1.10":
-  version "12.8.3"
-  resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz"
-  integrity sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
-"@types/aria-query@^4.2.0":
-  version "4.2.2"
-  resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz"
-  integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
-
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
   version "7.1.15"
   resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.15.tgz"
@@ -2513,7 +2464,7 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@*", "@types/jest@^26.0.15":
+"@types/jest@^26.0.15":
   version "26.0.24"
   resolved "https://registry.npmjs.org/@types/jest/-/jest-26.0.24.tgz"
   integrity sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==
@@ -2656,13 +2607,6 @@
   resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz"
   integrity sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==
 
-"@types/testing-library__jest-dom@^5.9.1":
-  version "5.14.1"
-  resolved "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.1.tgz"
-  integrity sha512-Gk9vaXfbzc5zCXI9eYE9BI5BNHEp4D3FWjgqBE/ePGYElLAP+KvxBcsdkwfIVvezs605oiyd/VrpiHe3Oeg+Aw==
-  dependencies:
-    "@types/jest" "*"
-
 "@types/uglify-js@*":
   version "3.13.1"
   resolved "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz"
@@ -5341,11 +5285,6 @@ css-what@^5.0.0:
   resolved "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz"
   integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
 
-css.escape@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz"
-  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
-
 css@^2.0.0:
   version "2.2.4"
   resolved "https://registry.npmjs.org/css/-/css-2.2.4.tgz"
@@ -5356,15 +5295,6 @@ css@^2.0.0:
     source-map-resolve "^0.5.2"
     urix "^0.1.0"
 
-css@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/css/-/css-3.0.0.tgz"
-  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
-  dependencies:
-    inherits "^2.0.4"
-    source-map "^0.6.1"
-    source-map-resolve "^0.6.0"
-
 cssdb@^4.4.0:
   version "4.4.0"
   resolved "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz"
@@ -5804,11 +5734,6 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.5.6:
-  version "0.5.6"
-  resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz"
-  integrity sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw==
-
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz"
@@ -9582,11 +9507,6 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-lz-string@^1.4.4:
-  version "1.4.4"
-  resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz"
-  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
-
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz"
@@ -12684,6 +12604,14 @@ rollup@^1.31.1:
     "@types/node" "*"
     acorn "^7.1.0"
 
+rooks@^5.7.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/rooks/-/rooks-5.7.1.tgz#a9c91e94e760e21a9df5afc1de4ba07d09a6156d"
+  integrity sha512-Gztycgm+e+bS0vqLMSGlGe8f7rkXMxjfPj3FucM06/xu1CEFQx1pZ0zMVdWVxDeMXRePaQ2/g1K7ArIlGKyHbQ==
+  dependencies:
+    lodash.debounce "^4.0.8"
+    raf "^3.4.1"
+
 rsvp@^4.8.4:
   version "4.8.5"
   resolved "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz"
@@ -13172,14 +13100,6 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-resolve@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz"
-  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-
 source-map-support@^0.5.17, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.19:
   version "0.5.19"
   resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz"
@@ -14648,11 +14568,6 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
-web-vitals@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/web-vitals/-/web-vitals-1.1.2.tgz"
-  integrity sha512-PFMKIY+bRSXlMxVAQ+m2aw9c/ioUYfDgrYot0YUa+/xa0sakubWhSDyxAKwzymvXVdF4CZI71g06W+mqhzu6ig==
-
 webidl-conversions@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz"