added parent to ObjID

codegen.yml

@@ -10,7 +10,10 @@ generates:
       - "typescript"
       - "typescript-operations"
       - "typescript-react-apollo"
+      - add:
+            content: "import ObjID from './../types/ObjID'"
     config:
       withHooks: true
       scalars:
         DateTime: string
+        objID: ObjID

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",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "rooks": "^5.7.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
   },
   "scripts": {
     "start": "craco start",
@@ -52,19 +41,27 @@
   },
   "devDependencies": {
     "@craco/craco": "^6.2.0",
+    "@graphql-codegen/add": "^3.1.0",
     "@graphql-codegen/cli": "1.21.7",
     "@graphql-codegen/introspection": "1.18.2",
     "@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,57 @@
-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"
+import BucketSelect from "./components/BucketSelect"
 
 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>
-					<Route path="/login" exact component={Login} />
-					<Route path="/f/" component={FileBrowser}/>
-					<Redirect from="/" exact to="/f/" />
-					<Route path="*" component={NotFound} />
-				</Switch>
-			</Router>
+		<div className="dark:text-gray-300 px-2 pt-1">
+			{
+				ready&& 
+				<Router>
+					<Switch>
+						{/* Private only routes */}
+						{
+							isAuth && [
+								<Route path="/f/" exact component={BucketSelect} key={null} />,
+								<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={null} >
+									<Login onLogin={()=>{
+										setIsAuth(true)
+									}} />
+								</Route>,
+								<Redirect from="*" to="/login" key={null} />
+							]
+						}
+
+						{/* Public & private routes */}
+						<Route path="*" component={NotFound} />
+					</Switch>
+				</Router>
+			}
 		</div>
 	)
 }

src/Cache.ts

@@ -0,0 +1,55 @@
+import { InMemoryCache } from "@apollo/client"
+import ObjID from "./types/ObjID"
+
+const cache = new InMemoryCache({
+	typePolicies:{
+		File:{
+			fields:{
+				id:{
+					merge(_,incomming){
+						// HACK: i use the merge function to change the id from a string to ObjID object.
+						// afaik apollo does not yet support custom scalar types.
+						if (!incomming){
+							return incomming
+						}else if (incomming instanceof ObjID){
+							return incomming
+						}else{
+							return ObjID.fromString(incomming as string)
+						}
+					}
+				}
+			}
+		},
+		Directory:{
+			fields:{
+				id:{
+					merge(_,incomming){
+						if (!incomming){
+							return incomming
+						}else if (incomming instanceof ObjID){
+							return incomming
+						}else{
+							return ObjID.fromString(incomming as string)
+						}
+					}
+				}
+			}
+		},
+		Query: {
+			fields: {
+				files: {
+					merge(existing, incoming){
+						return incoming
+					}
+				},
+				directorys:{
+					merge(existing, incoming){
+						return incoming
+					}
+				}
+			}
+		}
+	}
+})
+
+export default cache

src/components/Breadcrum.tsx

@@ -1,34 +1,55 @@
 import React from "react"
+import ObjID from "../types/ObjID"
 import  { ReactComponent as BreadcrumImage } from "./../assets/breadcrum.svg"
+import { Link } from "react-router-dom"
 
 interface Props{
-    path: string
-    onDirClick?: (path: string) => void
+    path?: ObjID
+    onDirClick?: (path: ObjID) => void
 }
 
-const Breadcrum: React.FC<Props> = (props) => {
-	const parts = props.path.split("/").filter(e=>e.length > 0)
+const Breadcrum: React.FC<Props> = ({path,onDirClick}) => {
+
+	if (!path){
+		return <ul className="flex text-gray-500 dark:text-gray-400  text-lg ">
+			<div className="breadcrum-item text-blue-500">
+				<Link to="/f/">
+					Home
+				</Link>
+			</div>
+		</ul>
+	}
+
+	const keyParts = path.key.split("/").filter(e=>e.length > 0)
 
 	return (
-		<ul className="flex text-gray-500 dark:text-gray-400  text-lg">
-			<li className="inline-flex items-center cursor-pointer">
-				<a onClick={()=>{
-					props.onDirClick?.("/")
-				}}>
-					Root
-				</a>
-			</li>
+		<ul className="flex text-gray-500 dark:text-gray-400  text-lg ">
+			<div className="breadcrum-item">
+				<Link to="/f/">
+					Home
+				</Link>
+			</div>
+			<div className="breadcrum-item">
+				<BreadcrumImage className="h-5 w-auto text-gray-400 cursor-default" />
+				<li>
+					<a className={!keyParts.length?"text-blue-500":""} onClick={()=>{
+						onDirClick?.(new ObjID(path.bucket,"/"))
+					}}>
+						{path.bucket}
+					</a>
+				</li>
+			</div>
 
-			{parts.map((e,i,arr)=>{
+			{keyParts.map((e,i,arr)=>{
 				const last = i == arr.length - 1
-				return <div key={e} className="inline-flex items-center cursor-pointer">
-					<BreadcrumImage className="h-5 w-auto text-gray-400" />
+				return <div key={e} className="breadcrum-item">
+					<BreadcrumImage className="h-5 w-auto text-gray-400 cursor-default" />
 					<li>
 						<a 
 							className={`${last?"text-blue-500":""}`}
 							onClick={()=>{
 								if (!last){
-									props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
+									onDirClick?.(new ObjID(path.bucket,arr.slice(0,i+1).join("/")))
 								}
 							}}>{e}</a>
 					</li>

src/components/BucketSelect.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+import { useHistory } from "react-router-dom"
+import { useListBucktesQuery } from "../generated/graphql"
+import Breadcrum from "./Breadcrum"
+import MoreMenu from "./MoreMenu"
+import { ReactComponent as Spinner } from "./../assets/spinner.svg"
+import Table, { Data } from "./Table"
+
+const BucketSelect: React.FC = () => {
+	const history = useHistory()
+	const {data: buckets, loading} = useListBucktesQuery()
+	const tableData: Data = {
+		headers:[{name:"Bucket"}],
+		body:(!buckets?[]:buckets.buckets.map(e=>{return {cells:[{name:e||""}],onClick:()=>{history.push(`/f/${e}`)}}}))
+	}
+
+	return (
+		<div>
+			<div className="flex justify-between h-12">
+				<Breadcrum />
+				<div className="ml-auto">
+					<MoreMenu />
+				</div>
+			</div>
+			<Table data={tableData}/>
+			{loading && 
+				<div className="flex justify-center mt-4">
+					<Spinner className="animate-spin h-6 w-6 dark:text-white"  />
+				</div>
+			}
+		</div>
+	)
+}
+
+export default BucketSelect

src/components/DirectoryElement.tsx

@@ -1,23 +0,0 @@
-import React from "react"
-import { Directory } from "../generated/graphql"
-import { MdFolderOpen } from "react-icons/md"
-
-interface Props {
-    dir: Directory
-}
-
-const DirectoryElement: React.FC<Props> = (props) => {
-	return (
-		<>
-			<td>
-				<MdFolderOpen className="inline"/> {props.dir.name}
-			</td>
-			<td>
-			</td>
-			<td>	
-			</td>
-		</>
-	)
-}
-
-export default DirectoryElement

src/components/FileBrowser.tsx

@@ -4,41 +4,28 @@ import { useContextMenu } from "react-contexify"
 import { RouteComponentProps } from "react-router-dom"
 import downloadFile from "../functions/downloadFile"
 import genDownloadLink from "../functions/genDownloadLink"
-import normalizeDirPath from "../functions/normalizeDirPath"
 import uploadFile from "../functions/uploadFile"
-import { useCopyMutation, useCreateDirMutation, useDeleteDirMutation, useDeleteFileMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql"
+import { useCopyMutation, useCreateDirMutation, useDeleteDirMutation, useDeleteFileMutation, useMoveDirMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
 import CreateDirButton from "./CreateDirButton"
-import DragAndDrop from "./DragAndDrop"
+import GlobalDragAndDrop from "./GlobalDragAndDrop"
 import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
 import FileOpen from "./FileOpen"
 import FileUploadButton from "./FileUploadButton"
 import { ReactComponent as Spinner } from "./../assets/spinner.svg"
 import FileBrowserList from "./FileBrowserList"
-import pathRename from "../functions/pathRename"
-
-function uriToPath(pathname:string) {
-	// strip the "/f" from e.g. "/f/dir1/dir2"
-	const path = pathname.substr(2)
-	if (!path.endsWith("/")){
-		return path + "/"
-	}
-	return path
-}
-
-function pathToUri(path:string) {
-	return (path.startsWith("/")?"/f":"/f/") + path
-}
+import MoreMenu from "./MoreMenu"
+import ObjID from "../types/ObjID"
+import cache from "../Cache"
 
 const FileBrowser: React.FC<RouteComponentProps> = (props) => {
-	const path = uriToPath(props.location.pathname)
-
-	const [openFileId, setOpenFileId] = useState("")
+	const path = ObjID.fromURI(props.location.pathname)
+	const [openFileId, setOpenFileId] = useState<ObjID>()
 	const [showFile, setShowFile] = useState(false)
 
-	const [srcID,setSrcID] = useState("")
+	const [srcID,setSrcID] = useState<ObjID | null>()
 	const [pasteAction,setPasteAction] = useState<Action>()
-	const [editID,setEditID] = useState("")
+	const [editID,setEditID] = useState<ObjID>()
 	const [editEnable,setEditEnable] = useState(false)
 
 	const [deleteMutation] = useDeleteFileMutation()
@@ -46,6 +33,7 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 	const [moveMutation] = useMoveMutation()
 	const [createDirMutation] = useCreateDirMutation()
 	const [deleteDirMutation] = useDeleteDirMutation()
+	const [moveDirMutation] = useMoveDirMutation()
 
 	const { show: showFileContext } = useContextMenu({
 		id: CONTEXT_MENU_FILE,
@@ -57,7 +45,7 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 
 	const { data, loading, refetch: refetchDir } = useOpenDirQuery({
 		variables:{
-			path
+			path: path
 		}
 	})
 
@@ -65,14 +53,14 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 		const wait: Promise<boolean>[] = []
 		for (let i = 0; i < files.length; i++) {
 			const file = files[i]
-			wait.push(uploadFile(file, path + file.name))
+			wait.push(uploadFile(file, new ObjID(path.bucket,path.key + file.name)))
 		}
 
 		await Promise.all(wait)
 		refetchDir()
 	}
 
-	async function onContextSelect(action:Action, id: string) {
+	async function onContextSelect(action:Action, id: ObjID) {
 		switch (action) {
 		case Action.FileDelete:
 			await deleteMutation({variables:{id}})
@@ -80,19 +68,33 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 			break
 		case Action.FileCopy:
 		case Action.FileMove:
+		case Action.DirMove:
 			setSrcID(id)
 			setPasteAction(action)
 			break
 		case Action.FilePaste:
-			if (pasteAction === Action.FileCopy){
+			if (pasteAction === Action.FileCopy && srcID){
 				await copyMutation({variables:{src:srcID,dest:path}})
 				refetchDir()
 			}
 
-			if (pasteAction === Action.FileMove){
+			if (pasteAction === Action.FileMove && srcID){
 				await moveMutation({variables:{src:srcID,dest:path}})
 				refetchDir()
+				setSrcID(null)
 			}
+
+			if (pasteAction === Action.DirMove && srcID){
+				await moveDirMutation({variables:{src:srcID,dest:path}})
+				refetchDir()
+
+				cache.evict({
+					id: `Directory:${srcID.toString()}` // TODO: check for a better way to generate cache ids
+				})
+				
+				setSrcID(null)
+			}
+
 			break
 		case Action.DirDelete:
 			await deleteDirMutation({variables:{path:id}})
@@ -116,81 +118,82 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 				onSelect={onContextSelect}
 				pasteActive={!!srcID}
 			/>
-			<DragAndDrop
+			<GlobalDragAndDrop
 				handleDrop={async (files)=>{
 					await handleDrop(files)
-				}}
-			>
-				<div className="flex justify-between">
-					<Breadcrum path={path} onDirClick={(newPath)=>{
-						props.history.push(pathToUri(newPath))
-					}}/>
-					<div className="ml-auto">
-						<CreateDirButton 
-							onPressed={async (dirName)=>{
-								const fullPath = normalizeDirPath(path + dirName)
-								await createDirMutation({variables:{path: fullPath}})
-								refetchDir()
-							}}
-						/>
-					</div>
-					<div>
-						<FileUploadButton 
-							onUpload={(files)=>handleDrop(files)}
-						/>
-					</div>
-
-				</div>
-				<div>
-					<FileBrowserList 
-						directorys={data?.directorys || []}
-						files={data?.files || []}
-
-						onDirClick={(e,path)=>{
-							props.history.push(pathToUri(path))
-						}}
-
-						onDirContext={(e,path)=>{
-							e.preventDefault()
-							showDirContext(e,{props:{id:path}})
-						}}
-
-						onFileClick={(e,id)=>{
-							setOpenFileId(id)
-							setShowFile(true)
-						}}
-
-						onFileContext={(e,id)=>{
-							e.preventDefault()
-							showFileContext(e,{props:{id}})
-						}}
-
-						editId={editID}
-						editEnable={editEnable}
-
-						onRenameDone={async (id,changed,newName)=>{
-							setEditEnable(false)
-							if (changed){
-								// TODO: maybe change the name on client so it seems more smooth rather then haveing it refetch
-								// TODO: input check & error handling
-								await moveMutation({variables:{
-									src:id,
-									dest: pathRename(id,newName)
-								}})
-								refetchDir()
-							}
+				}}/>
+			<div className="flex justify-between h-12">
+				<Breadcrum path={path} onDirClick={(newPath)=>{
+					props.history.push(newPath.toURI())
+				}}/>
+				<div className="ml-auto">
+					<CreateDirButton 
+						onPressed={async (dirName)=>{
+							const dirID = new ObjID(path.bucket,path.key + dirName + "/")
+							await createDirMutation({variables:{path: dirID}})
+							refetchDir()
 						}}
 					/>
-					{loading && 
-						<div className="flex justify-center mt-4">
-							<Spinner className="animate-spin h-6 w-6 dark:text-white"  />
-						</div>
-					}
 				</div>
-				<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
-					setShowFile(false)
-				}} />
-			</DragAndDrop>
+				<div>
+					<FileUploadButton 
+						onUpload={(files)=>handleDrop(files)}
+					/>
+				</div>
+				<div>
+					<MoreMenu />
+				</div>
+
+			</div>
+			<div>
+				<FileBrowserList 
+					directorys={data?.directories || []}
+					files={data?.files || []}
+
+					onDirClick={(e,path)=>{
+						props.history.push(path.toURI())
+					}}
+
+					onDirContext={(e,path)=>{
+						e.preventDefault()
+						showDirContext(e,{props:{id:path}})
+					}}
+
+					onFileClick={(e,id)=>{
+						setOpenFileId(id)
+						setShowFile(true)
+					}}
+
+					onFileContext={(e,id)=>{
+						e.preventDefault()
+						showFileContext(e,{props:{id}})
+					}}
+
+					editId={editID}
+					editEnable={editEnable}
+
+					onRenameDone={async (id,changed,newName)=>{
+						setEditEnable(false)
+						if (changed){
+							// TODO: maybe change the name on client so it seems more smooth rather then haveing it refetch
+							// TODO: input check & error handling
+							await moveMutation({variables:{
+								src:id,
+								dest: id.rename(newName)
+							}})
+							refetchDir()
+						}
+					}}
+				/>
+				{loading && 
+					<div className="flex justify-center mt-4">
+						<Spinner className="animate-spin h-6 w-6 dark:text-white"  />
+					</div>
+				}
+			</div>
+			<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
+				setShowFile(false)
+			}} />
 		</div>
 	)
 }

src/components/FileBrowserContextMenu.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Item, ItemParams, Menu, Separator } from "react-contexify"
-
+import ObjID from "../types/ObjID"
 
 export const CONTEXT_MENU_FILE = "CONTEXT_MENU_FILE"
 export const CONTEXT_MENU_DIR = "CONTEXT_MENU_DIR"
@@ -12,16 +12,17 @@ export enum Action {
 	FileMove,
 	FileDownload,
 	FileRename,
-	DirDelete
+	DirDelete,
+	DirMove,
 }
 
 interface Props {
-    onSelect?: (action: Action, id: string)=>void
+    onSelect?: (action: Action, id: ObjID)=>void
 	pasteActive?: boolean
 }
 
 const FileBrowserContextMenu: React.FC<Props> = (props) => {
-	function onClick({ props: itemProps, data }:  ItemParams<{id:string}, Action>) {
+	function onClick({ props: itemProps, data }:  ItemParams<{id:ObjID}, Action>) {
 		if (itemProps?.id && data != null){
 			props.onSelect?.(data,itemProps.id) 
 		}
@@ -40,7 +41,7 @@ const FileBrowserContextMenu: React.FC<Props> = (props) => {
 			</Menu>
 			<Menu id={CONTEXT_MENU_DIR} animation={false} className="dark:bg-gray-400">
 				<Item onClick={onClick} data={Action.DirDelete} >Delete</Item>
-				<Item onClick={onClick}  >Item 2</Item>
+				<Item onClick={onClick} data={Action.DirMove} >Move</Item>
 				<Separator />
 				<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>
 			</Menu>

src/components/FileBrowserElement.tsx

@@ -1,43 +0,0 @@
-import React from "react"
-import { Directory, File } from "../generated/graphql"
-import DirectoryComponent from "./DirectoryElement"
-import FileElement from "./FileElement"
-
-interface Props {
-    file?: File
-    dir?: Directory
-    onClick?: (event: React.MouseEvent ,data: File | Directory) => void
-	onContextMenu?: (e:React.MouseEvent) => void
-	edit: boolean
-	onRename?: (newName: string)=>void
-	onCancleRename?: ()=>void
-}
-
-const FileBrowserElement: React.FC<Props> = (props) => {
-	return (
-		<tr 
-			className="hover:bg-gray-100 dark:hover:bg-gray-900 text-lg"
-			onClick={(e)=>{
-				if(props.file){
-					props.onClick?.(e,props.file)
-				}else if(props.dir){
-					props.onClick?.(e,props.dir)
-				}
-			}}
-
-			onContextMenu={(e)=>props.onContextMenu?.(e)}
-			
-		>
-			{(props.file) ? <FileElement
-				edit={props.edit}
-				file={props.file}
-				onCancleRename={props.onCancleRename}
-				onRename={props.onRename}
-			/>:(props.dir)?<DirectoryComponent
-				dir={props.dir} 
-			/>:<></>}
-		</tr>
-	)
-}
-
-export default FileBrowserElement

src/components/FileBrowserList.tsx

@@ -1,80 +1,80 @@
 import React from "react"
+import { FaRegFileAlt } from "react-icons/fa"
+import { MdFolderOpen } from "react-icons/md"
+import dateFormat from "../functions/dateFomat"
+import sizeToReadable from "../functions/sizeToReadable"
 import { Directory, File } from "../generated/graphql"
-import FileBrowserElement from "./FileBrowserElement"
+import ObjID from "../types/ObjID"
+import Renameable from "./Renameable"
+import Table, { Data, Row } from "./Table"
 
 interface Props{
     directorys: Directory[]
     files: File[]
     
-	onFileContext?: (event: React.MouseEvent, id: string)=>void
-    onDirContext?: (event: React.MouseEvent, path: string)=>void
-    onFileClick?: (event: React.MouseEvent,id: string)=>void
-    onDirClick?: (event: React.MouseEvent,path: string)=>void
+	onFileContext?: (event: React.MouseEvent, id: ObjID)=>void
+    onDirContext?: (event: React.MouseEvent, path: ObjID)=>void
+    onFileClick?: (event: React.MouseEvent,id: ObjID)=>void
+    onDirClick?: (event: React.MouseEvent,path: ObjID)=>void
 
-	editId:  string
+	editId?:  ObjID
 	editEnable: boolean
-	onRenameDone?: (id: string, changed: boolean, newName: string)=>void
+	onRenameDone?: (id: ObjID, changed: boolean, newName: string)=>void
 }
 
-const FileBrowserList: React.FC<Props> = (props) => {
-	return <>
-		<table className="w-full">
-			<thead className="border-b-2 dark:border-gray-900">
-				<tr>
-					<th className="text-left">Name</th>
-					<th className="text-left">Last Modified</th>
-					<th className="text-left">Size</th>
-				</tr>
-			</thead>
-			<tbody className="divide-y dark:divide-gray-900">
-				{ props.directorys.map(v => (<FileBrowserElement
-					key={v.id}
-					dir={v}
-					onClick={(e,dir)=>{
-						props.onDirClick?.(e,dir.id)
-					}}
-					onContextMenu={(e)=>{
-						props.onDirContext?.(e,v.id)
-					}}
+const FileBrowserList: React.FC<Props> = ({
+	files,directorys,onDirClick,onDirContext,onFileClick,onFileContext,onRenameDone,editId,editEnable
+}) => {
 
-					edit={props.editEnable && (v.id === props.editId)}
+	const tableData: Data = {
+		headers: [
+			{name: "Name"},
+			{name: "Last Modified"},
+			{name: "Size"}
+		],
+		body:[
+			...directorys.map((e):Row<Directory>=>{return {
+				cells:[
+					{
+						name:e.name || "",
+						component: <div>
+							<MdFolderOpen className="inline" />
+							<Renameable
+								text={e.name || ""}
+								edit={editEnable && (e.id === editId)}
+								onRename={(newName)=>{e.name != newName?onRenameDone?.(e.id,true,newName):onRenameDone?.(e.id,false,newName)}}
+								onCancleRename={()=>onRenameDone?.(e.id,false,"")}
+							/>
+						</div>
+					}],
+				data: e,
+				onClick: ((e,data)=>onDirClick?.(e,data.id)),
+				onContextMenu: ((e,data)=>onDirContext?.(e,data.id))
+			}}),
+			...files.map((e):Row<File>=>{return {
+				cells:[
+					{
+						name:e.name || "",
+						component: <div>
+							<FaRegFileAlt className="inline" />
+							<Renameable
+								text={e.name || ""}
+								edit={editEnable && (e.id === editId)}
+								onRename={(newName)=>{e.name != newName?onRenameDone?.(e.id,true,newName):onRenameDone?.(e.id,false,newName)}}
+								onCancleRename={()=>onRenameDone?.(e.id,false,"")}
+							/>
+						</div>
+					},
+					{name:dateFormat(e.lastModified)},{name:sizeToReadable(e.size)}],
+				data: e,
+				onClick: ((e,data)=>onFileClick?.(e,data.id)),
+				onContextMenu: ((e,data)=>onFileContext?.(e,data.id))
+			}}),
+		],
 		
-					onRename={(newName)=>{
-						if (v.name != newName){
-							props.onRenameDone?.(v.id,true,newName)
-						}else{
-							props.onRenameDone?.(v.id,false,newName)
-						}
-					}}
+	}
 
-					onCancleRename={()=>props.onRenameDone?.(v.id,false,"")}
-				/>))}
-								
-				{ props.files.map(v => (<FileBrowserElement 
-					key={v.id}
-					file={v}
-					onClick={(e,file)=>{
-						props.onFileClick?.(e,file.id)
-					}}
-					onContextMenu={(e)=>{
-						props.onFileContext?.(e,v.id)
-					}}
-
-					edit={props.editEnable && (v.id === props.editId)}
-
-					onRename={(newName)=>{
-						if (v.name != newName){
-							props.onRenameDone?.(v.id,true,newName)
-						}else{
-							props.onRenameDone?.(v.id,false,newName)
-						}
-					}}
-
-					onCancleRename={()=>props.onRenameDone?.(v.id,false,"")}
-				/>))}
-			</tbody>
-		</table>
-	</>
+	return <Table data={tableData} />
 }
 
 export default FileBrowserList

src/components/FileElement.tsx

@@ -1,38 +0,0 @@
-import React from "react"
-import { File } from "../generated/graphql"
-import sizeToReadable from "../functions/sizeToReadable"
-import dateFormat from "../functions/dateFomat"
-import { FaRegFileAlt } from "react-icons/fa"
-import Renameable from "./Renameable"
-
-interface Props {
-    file: File,
-	edit: boolean
-	onRename?: (newName: string)=>void
-	onCancleRename?: ()=>void
-}
-
-const FileElement: React.FC<Props> = (props) => {
-	return (
-		<>
-			<td>
-				<FaRegFileAlt className="inline" />
-				<Renameable
-					text={props.file.name || ""}
-					edit={props.edit}
-					onCancleRename={props.onCancleRename}
-					onRename={props.onRename} 
-				/>
-			</td>
-			<td>
-				{dateFormat(props.file.lastModified)}
-			</td>
-			<td>
-				{sizeToReadable(props.file.size)}
-			</td>
-
-		</>
-	)
-}
-
-export default FileElement

src/components/FileOpen.tsx

@@ -4,9 +4,10 @@ import ImageOpener from "./ImageOpener"
 import TextOpener from "./TextOpener"
 import Modal from "./Modal"
 import AudioOpener from "./AudioOpener"
+import ObjID from "../types/ObjID"
 
 interface Props {
-    id: string
+    id?: ObjID
 	show: boolean
 	onCloseClick?: ()=>void
 }

src/components/GlobalDragAndDrop.tsx

@@ -10,12 +10,10 @@ interface Props {
 	handleDrop?: (files: FileList)=>void
 }
 
-const DragAndDrop: React.FC<Props> = (props) => {
-	const dropRef = React.createRef<HTMLDivElement>()
+const GlobalDragAndDrop: React.FC<Props> = (props) => {
 	const [hover,setHover] = useState(false)
 
 	function handleDragEnter(event: DragEvent) {
-		// console.debug("dragenter",event)
 		event.preventDefault()
 		event.stopPropagation()
 		setHover(true)
@@ -23,7 +21,6 @@ const DragAndDrop: React.FC<Props> = (props) => {
 	}
 
 	function handleDragLeave(event: DragEvent) {
-		// console.debug("dragleave",event)
 		event.preventDefault()
 		event.stopPropagation()
 		setHover(false)
@@ -38,7 +35,6 @@ const DragAndDrop: React.FC<Props> = (props) => {
 	}
 
 	function handleDrop(event: DragEvent) {
-		console.debug("drop",event)
 		event.preventDefault()
 		event.stopPropagation()
 		setHover(false)
@@ -49,31 +45,25 @@ const DragAndDrop: React.FC<Props> = (props) => {
 	}
 
 	useEffect(()=>{
-		if(dropRef.current){
-			dropRef.current.addEventListener("dragenter",handleDragEnter)
-			dropRef.current.addEventListener("dragleave",handleDragLeave)
-			dropRef.current.addEventListener("dragover",handleDragOver)
-			dropRef.current.addEventListener("drop",handleDrop)
+		document.addEventListener("dragenter",handleDragEnter)
+		document.addEventListener("dragleave",handleDragLeave)
+		document.addEventListener("dragover",handleDragOver)
+		document.addEventListener("drop",handleDrop)
+
+		return ()=>{
+			document.removeEventListener("dragenter",handleDragEnter)
+			document.removeEventListener("dragleave",handleDragLeave)
+			document.removeEventListener("dragover",handleDragOver)
+			document.removeEventListener("drop",handleDrop)
 			
-			return ()=>{
-				if (dropRef.current){
-					dropRef.current.removeEventListener("dragenter",handleDragEnter)
-					dropRef.current.removeEventListener("dragleave",handleDragLeave)
-					dropRef.current.removeEventListener("dragover",handleDragOver)
-					dropRef.current.removeEventListener("drop",handleDrop)
-				}
-			}
 		}
+	
 	},[])
 
 	return (
-		<div ref={dropRef} 
-			className={`fixed top-0 left-0 w-full h-full z-10
-				${hover? "border-dashed border-gray-600 border-4":""}`}
-		>
-			{props.children}
-		</div>
+		<div className={`fixed top-0 left-0 w-full h-full z-10 pointer-events-none
+				${hover? "border-dashed border-gray-600 border-4":""}`} />
 	)
 }
 
-export default DragAndDrop
+export default GlobalDragAndDrop

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/components/Table.tsx

@@ -0,0 +1,61 @@
+import React from "react"
+
+export interface Header {
+	name: string
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface Row<T = any> {
+	cells: Cell[]
+	data?: T,
+	// TODO: maybe there is some TS magic to apply here so that rowData has the same type as data without using generics
+	onClick?: (e: React.MouseEvent, rowData: T ) => void 
+	onContextMenu?: (e: React.MouseEvent, data: T)=>void
+}
+
+export interface Cell {
+	name: string
+	component?: React.ReactNode
+}
+
+export interface Data {
+	headers: Header[]
+	body: Row[]
+}
+
+interface Props {
+	data: Data
+}
+
+const Table: React.FC<Props> = ({data:{headers,body}}) => {
+	const numCol = headers.length
+	return (
+		<table className="w-full">
+			<thead className="border-b-2 dark:border-gray-900">
+				<tr>
+					{headers.map((e,i)=><th key={i} className="text-left">{e.name}</th>)}
+				</tr>
+			</thead>
+			<tbody className="divide-y dark:divide-gray-900">
+				{body.map((row,rowIndex)=>
+					<tr 
+						className="hover:bg-gray-100 dark:hover:bg-gray-900 text-lg"
+						key={rowIndex}
+						onClick={e=>row.onClick?.(e,row.data)}
+						onContextMenu={e=>row.onContextMenu?.(e,row.data)}
+					>
+						{(row.cells.length >= numCol?
+							row.cells:
+							row.cells.concat(Array(numCol - row.cells.length).fill({name:""}))) // Pad array to fit numCol
+							.map((cell,cellIndex)=>
+								<td key={cellIndex}>
+									{cell.component || cell.name}
+								</td>
+							)}
+					</tr>)}
+			</tbody>
+		</table>
+	)
+}
+
+export default Table

src/functions/genDownloadLink.ts

@@ -1,5 +1,7 @@
-function genDownloadLink(id:string): string {
-	return `/api/file?id=${encodeURIComponent(id)}`
+import ObjID from "../types/ObjID"
+
+function genDownloadLink(id:ObjID): string {
+	return `/api/file?id=${encodeURIComponent(id.toString())}`
 }
 
 export default genDownloadLink

src/functions/logout.ts

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

src/functions/pathRename.ts

@@ -1,11 +0,0 @@
-function pathRename(id:string, newFilename: string): string {
-	const isDir = id.endsWith("/")
-	const parts = id.split("/")
-	if (!parts.length)
-		throw new Error("Maleformed id")
-	parts[parts.length - (isDir?2:1)] = newFilename
-
-	return parts.join("/")
-}
-
-export default pathRename

src/functions/uploadFile.ts

@@ -1,5 +1,7 @@
-async function uploadFile(file:File,id: string): Promise<boolean> {
-	const res = await fetch(`/api/file?${new URLSearchParams({id:id}).toString()}`,{
+import ObjID from "../types/ObjID"
+
+async function uploadFile(file:File,id: ObjID): Promise<boolean> {
+	const res = await fetch(`/api/file?${new URLSearchParams({id:id.toString()}).toString()}`,{
 		method: "POST",
 		headers: {
 			"Content-Type": file.type

src/generated/graphql.tsx

@@ -1,3 +1,4 @@
+import ObjID from "./../types/ObjID"
 import { gql } from "@apollo/client"
 import * as Apollo from "@apollo/client"
 export type Maybe<T> = T | null;
@@ -14,6 +15,11 @@ export type Scalars = {
   Float: number;
   /** DateTime is a DateTime in ISO 8601 format */
   DateTime: string;
+  /**
+   * String representing a bucket, key and version combination.
+   * 			Looks like this: "bucketName:/name/of/key" or "bucketName@version:/name/of/key"
+   */
+  objID: ObjID;
 };
 
 
@@ -22,7 +28,7 @@ export type Directory = {
   __typename?: "Directory";
   directorys?: Maybe<Array<Maybe<Directory>>>;
   files?: Maybe<Array<Maybe<File>>>;
-  id: Scalars["ID"];
+  id: Scalars["objID"];
   name?: Maybe<Scalars["String"]>;
   parent?: Maybe<Directory>;
 };
@@ -33,7 +39,7 @@ export type File = {
   contentType?: Maybe<Scalars["String"]>;
   etag?: Maybe<Scalars["String"]>;
   /** The uniqe ID of the file. Represents the path and the s3 key. */
-  id: Scalars["ID"];
+  id: Scalars["objID"];
   lastModified?: Maybe<Scalars["DateTime"]>;
   name?: Maybe<Scalars["String"]>;
   parent?: Maybe<Directory>;
@@ -56,28 +62,29 @@ export type RootMutation = {
   delete?: Maybe<Scalars["String"]>;
   deleteDir: Scalars["String"];
   login: LoginResut;
-  move?: Maybe<File>;
+  move: File;
+  moveDir: Array<Maybe<File>>;
 };
 
 
 export type RootMutationCopyArgs = {
-  src: Scalars["ID"];
-  dest: Scalars["ID"];
+  src: Scalars["objID"];
+  dest: Scalars["objID"];
 };
 
 
 export type RootMutationCreateDirArgs = {
-  path: Scalars["ID"];
+  path: Scalars["objID"];
 };
 
 
 export type RootMutationDeleteArgs = {
-  id: Scalars["ID"];
+  id: Scalars["objID"];
 };
 
 
 export type RootMutationDeleteDirArgs = {
-  path: Scalars["ID"];
+  path: Scalars["objID"];
 };
 
 
@@ -88,35 +95,46 @@ export type RootMutationLoginArgs = {
 
 
 export type RootMutationMoveArgs = {
-  src: Scalars["ID"];
-  dest: Scalars["ID"];
+  src: Scalars["objID"];
+  dest: Scalars["objID"];
+};
+
+
+export type RootMutationMoveDirArgs = {
+  src: Scalars["objID"];
+  dest: Scalars["objID"];
 };
 
 export type RootQuery = {
   __typename?: "RootQuery";
-  directorys: Array<Directory>;
+  /** True if the user is authorized */
+  authorized: Scalars["Boolean"];
+  /** List available buckets */
+  buckets: Array<Maybe<Scalars["String"]>>;
+  directories: Array<Directory>;
   file?: Maybe<File>;
   files: Array<File>;
 };
 
 
-export type RootQueryDirectorysArgs = {
-  path: Scalars["String"];
+export type RootQueryDirectoriesArgs = {
+  path: Scalars["objID"];
 };
 
 
 export type RootQueryFileArgs = {
-  id: Scalars["ID"];
+  id: Scalars["objID"];
 };
 
 
 export type RootQueryFilesArgs = {
-  path: Scalars["String"];
+  path: Scalars["objID"];
 };
 
+
 export type CopyMutationVariables = Exact<{
-  src: Scalars["ID"];
-  dest: Scalars["ID"];
+  src: Scalars["objID"];
+  dest: Scalars["objID"];
 }>;
 
 
@@ -129,7 +147,7 @@ export type CopyMutation = (
 );
 
 export type CreateDirMutationVariables = Exact<{
-  path: Scalars["ID"];
+  path: Scalars["objID"];
 }>;
 
 
@@ -142,7 +160,7 @@ export type CreateDirMutation = (
 );
 
 export type DeleteDirMutationVariables = Exact<{
-  path: Scalars["ID"];
+  path: Scalars["objID"];
 }>;
 
 
@@ -152,7 +170,7 @@ export type DeleteDirMutation = (
 );
 
 export type DeleteFileMutationVariables = Exact<{
-  id: Scalars["ID"];
+  id: Scalars["objID"];
 }>;
 
 
@@ -162,7 +180,7 @@ export type DeleteFileMutation = (
 );
 
 export type GetFileQueryVariables = Exact<{
-  id: Scalars["ID"];
+  id: Scalars["objID"];
 }>;
 
 
@@ -174,6 +192,22 @@ export type GetFileQuery = (
   )> }
 );
 
+export type IsAuthQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type IsAuthQuery = (
+  { __typename?: "RootQuery" }
+  & Pick<RootQuery, "authorized">
+);
+
+export type ListBucktesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ListBucktesQuery = (
+  { __typename?: "RootQuery" }
+  & Pick<RootQuery, "buckets">
+);
+
 export type LoginMutationVariables = Exact<{
   username: Scalars["String"];
   password: Scalars["String"];
@@ -189,21 +223,35 @@ export type LoginMutation = (
 );
 
 export type MoveMutationVariables = Exact<{
-  src: Scalars["ID"];
-  dest: Scalars["ID"];
+  src: Scalars["objID"];
+  dest: Scalars["objID"];
 }>;
 
 
 export type MoveMutation = (
   { __typename?: "RootMutation" }
-  & { move?: Maybe<(
+  & { move: (
     { __typename?: "File" }
     & Pick<File, "id">
-  )> }
+  ) }
+);
+
+export type MoveDirMutationVariables = Exact<{
+  src: Scalars["objID"];
+  dest: Scalars["objID"];
+}>;
+
+
+export type MoveDirMutation = (
+  { __typename?: "RootMutation" }
+  & { moveDir: Array<Maybe<(
+    { __typename?: "File" }
+    & Pick<File, "id">
+  )>> }
 );
 
 export type OpenDirQueryVariables = Exact<{
-  path: Scalars["String"];
+  path: Scalars["objID"];
 }>;
 
 
@@ -212,7 +260,7 @@ export type OpenDirQuery = (
   & { files: Array<(
     { __typename?: "File" }
     & Pick<File, "id" | "name" | "size" | "lastModified">
-  )>, directorys: Array<(
+  )>, directories: Array<(
     { __typename?: "Directory" }
     & Pick<Directory, "id" | "name">
   )> }
@@ -220,7 +268,7 @@ export type OpenDirQuery = (
 
 
 export const CopyDocument = gql`
-    mutation copy($src: ID!, $dest: ID!) {
+    mutation copy($src: objID!, $dest: objID!) {
   copy(src: $src, dest: $dest) {
     id
   }
@@ -254,7 +302,7 @@ export type CopyMutationHookResult = ReturnType<typeof useCopyMutation>;
 export type CopyMutationResult = Apollo.MutationResult<CopyMutation>;
 export type CopyMutationOptions = Apollo.BaseMutationOptions<CopyMutation, CopyMutationVariables>;
 export const CreateDirDocument = gql`
-    mutation createDir($path: ID!) {
+    mutation createDir($path: objID!) {
   createDir(path: $path) {
     id
   }
@@ -287,7 +335,7 @@ export type CreateDirMutationHookResult = ReturnType<typeof useCreateDirMutation
 export type CreateDirMutationResult = Apollo.MutationResult<CreateDirMutation>;
 export type CreateDirMutationOptions = Apollo.BaseMutationOptions<CreateDirMutation, CreateDirMutationVariables>;
 export const DeleteDirDocument = gql`
-    mutation deleteDir($path: ID!) {
+    mutation deleteDir($path: objID!) {
   deleteDir(path: $path)
 }
     `
@@ -318,7 +366,7 @@ export type DeleteDirMutationHookResult = ReturnType<typeof useDeleteDirMutation
 export type DeleteDirMutationResult = Apollo.MutationResult<DeleteDirMutation>;
 export type DeleteDirMutationOptions = Apollo.BaseMutationOptions<DeleteDirMutation, DeleteDirMutationVariables>;
 export const DeleteFileDocument = gql`
-    mutation deleteFile($id: ID!) {
+    mutation deleteFile($id: objID!) {
   delete(id: $id)
 }
     `
@@ -349,7 +397,7 @@ export type DeleteFileMutationHookResult = ReturnType<typeof useDeleteFileMutati
 export type DeleteFileMutationResult = Apollo.MutationResult<DeleteFileMutation>;
 export type DeleteFileMutationOptions = Apollo.BaseMutationOptions<DeleteFileMutation, DeleteFileMutationVariables>;
 export const GetFileDocument = gql`
-    query getFile($id: ID!) {
+    query getFile($id: objID!) {
   file(id: $id) {
     id
     name
@@ -387,6 +435,70 @@ 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 ListBucktesDocument = gql`
+    query listBucktes {
+  buckets
+}
+    `
+
+/**
+ * __useListBucktesQuery__
+ *
+ * To run a query within a React component, call `useListBucktesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useListBucktesQuery` 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 } = useListBucktesQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useListBucktesQuery(baseOptions?: Apollo.QueryHookOptions<ListBucktesQuery, ListBucktesQueryVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useQuery<ListBucktesQuery, ListBucktesQueryVariables>(ListBucktesDocument, options)
+}
+export function useListBucktesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ListBucktesQuery, ListBucktesQueryVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useLazyQuery<ListBucktesQuery, ListBucktesQueryVariables>(ListBucktesDocument, options)
+}
+export type ListBucktesQueryHookResult = ReturnType<typeof useListBucktesQuery>;
+export type ListBucktesLazyQueryHookResult = ReturnType<typeof useListBucktesLazyQuery>;
+export type ListBucktesQueryResult = Apollo.QueryResult<ListBucktesQuery, ListBucktesQueryVariables>;
 export const LoginDocument = gql`
     mutation Login($username: String!, $password: String!) {
   login(username: $username, password: $password) {
@@ -423,7 +535,7 @@ export type LoginMutationHookResult = ReturnType<typeof useLoginMutation>;
 export type LoginMutationResult = Apollo.MutationResult<LoginMutation>;
 export type LoginMutationOptions = Apollo.BaseMutationOptions<LoginMutation, LoginMutationVariables>;
 export const MoveDocument = gql`
-    mutation move($src: ID!, $dest: ID!) {
+    mutation move($src: objID!, $dest: objID!) {
   move(src: $src, dest: $dest) {
     id
   }
@@ -456,15 +568,49 @@ export function useMoveMutation(baseOptions?: Apollo.MutationHookOptions<MoveMut
 export type MoveMutationHookResult = ReturnType<typeof useMoveMutation>;
 export type MoveMutationResult = Apollo.MutationResult<MoveMutation>;
 export type MoveMutationOptions = Apollo.BaseMutationOptions<MoveMutation, MoveMutationVariables>;
+export const MoveDirDocument = gql`
+    mutation moveDir($src: objID!, $dest: objID!) {
+  moveDir(src: $src, dest: $dest) {
+    id
+  }
+}
+    `
+export type MoveDirMutationFn = Apollo.MutationFunction<MoveDirMutation, MoveDirMutationVariables>;
+
+/**
+ * __useMoveDirMutation__
+ *
+ * To run a mutation, you first call `useMoveDirMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useMoveDirMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [moveDirMutation, { data, loading, error }] = useMoveDirMutation({
+ *   variables: {
+ *      src: // value for 'src'
+ *      dest: // value for 'dest'
+ *   },
+ * });
+ */
+export function useMoveDirMutation(baseOptions?: Apollo.MutationHookOptions<MoveDirMutation, MoveDirMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<MoveDirMutation, MoveDirMutationVariables>(MoveDirDocument, options)
+}
+export type MoveDirMutationHookResult = ReturnType<typeof useMoveDirMutation>;
+export type MoveDirMutationResult = Apollo.MutationResult<MoveDirMutation>;
+export type MoveDirMutationOptions = Apollo.BaseMutationOptions<MoveDirMutation, MoveDirMutationVariables>;
 export const OpenDirDocument = gql`
-    query openDir($path: String!) {
+    query openDir($path: objID!) {
   files(path: $path) {
     id
     name
     size
     lastModified
   }
-  directorys(path: $path) {
+  directories(path: $path) {
     id
     name
   }

src/graphql/copy.graphql

@@ -1,4 +1,4 @@
-mutation copy($src: ID!, $dest: ID!) {
+mutation copy($src: objID!, $dest: objID!) {
   copy(src: $src,dest: $dest){
     id
   }

src/graphql/createDir.graphql

@@ -1,4 +1,4 @@
-mutation createDir($path: ID!){
+mutation createDir($path: objID!){
   createDir(path:$path){
     id
   }

src/graphql/deleteDir.graphql

@@ -1,3 +1,3 @@
-mutation deleteDir($path: ID!){
+mutation deleteDir($path: objID!){
   deleteDir(path:$path)
 }

src/graphql/deleteFile.graphql

@@ -1,3 +1,3 @@
-mutation deleteFile($id: ID!) {
+mutation deleteFile($id: objID!) {
   delete(id:$id)
 }

src/graphql/getFile.graphql

@@ -1,4 +1,4 @@
-query getFile($id: ID!){
+query getFile($id: objID!){
   file(id: $id){
     id
     name

src/graphql/isAuth.graphql

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

src/graphql/listBuckets.graphql

@@ -0,0 +1,3 @@
+query listBucktes{
+    buckets
+}

src/graphql/move.graphql

@@ -1,4 +1,4 @@
-mutation move($src: ID!, $dest: ID!) {
+mutation move($src: objID!, $dest: objID!) {
   move(src: $src,dest: $dest){
     id
   }

src/graphql/moveDir.graphql

@@ -0,0 +1,5 @@
+mutation moveDir($src: objID!, $dest: objID!) {
+  moveDir(src: $src,dest: $dest){
+    id
+  }
+}

src/graphql/openDir.graphql

@@ -1,11 +1,11 @@
-query openDir($path: String!) {
+query openDir($path: objID!) {
   files(path:$path){
     id
     name
     size
     lastModified
   }
-  directorys(path: $path){
+  directories(path: $path){
     id
     name
   }

src/index.scss

@@ -7,3 +7,7 @@
 .text-input{
     @apply bg-transparent border-gray-900 dark:border-gray-300 dark:text-gray-300 outline-none border-b
 }
+
+.breadcrum-item{
+    @apply inline-flex items-center cursor-pointer
+}

src/index.tsx

@@ -2,29 +2,13 @@ import React from "react"
 import ReactDOM from "react-dom"
 import "./index.scss"
 import App from "./App"
-import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"
+import { ApolloClient, ApolloProvider } from "@apollo/client"
 import "react-contexify/dist/ReactContexify.css"
+import cache from "./Cache"
 
 const client = new ApolloClient({
 	uri: "/api/graphql",
-	cache: new InMemoryCache({
-		typePolicies:{
-			Query: {
-				fields: {
-					files: {
-						merge(existing, incoming){
-							return incoming
-						}
-					},
-					directorys:{
-						merge(existing, incoming){
-							return incoming
-						}
-					}
-				}
-			}
-		}
-	})
+	cache: cache,
 })
 
 // Disable drag and drop behaviour on document

src/types/ObjID.ts

@@ -0,0 +1,106 @@
+const stringRegex =  /(.*?)(@(.*))?:(.*)/
+
+class ObjID {
+	public bucket: string
+	public key: string
+	public version?: string
+
+	constructor(bucket: string, key: string, version?: string) {
+		this.bucket = bucket
+		if(!key){
+			this.key = "/"
+		}else{
+			this.key = key
+		}
+		if (version){
+			this.version = version
+		}
+
+		this.normalize()
+	}
+	
+	public toString(): string {
+		if (this.version) {
+			return `${this.bucket}@${this.version}:${this.key}`
+		}else{
+			return `${this.bucket}:${this.key}`
+		}
+	}
+
+	public normalize(): void{
+		if (!this.key.startsWith("/")){
+			this.key = "/" + this.key
+		}
+	}
+
+	public isDirectory(): boolean {
+		return this.key.endsWith("/")
+	}
+
+	public toURI(): string {
+		return `/f/${this.bucket}${this.key}`
+	}
+
+	public toJSON(): string{
+		// HACK: toJSON is required so that apollo can parse the ObjID back to a string
+		// that can be used in gql query
+		return this.toString()
+	}
+
+	public rename(name: string): ObjID{
+		const parts = this.key.split("/")
+		parts[parts.length - (this.isDirectory()?2:1)] = name
+		return new ObjID(this.bucket,parts.join("/"))
+	}
+
+	/**
+	 * Get the parent of the object. If Obj is a file then the containing directory
+	 * if Obj is a directory it returns the parent
+	 * @returns parent ObjID or null if already at root
+	 */
+	public parent(): ObjID | null {
+		if (this.key == "/") {
+			// Already at root. We dont have a parent
+			return null
+		}
+	
+		if (this.isDirectory()) {
+			const parts = this.key.split("/")
+			const parent = new ObjID(this.bucket, parts.slice(0,-2).join("/") + "/")
+			parent.normalize()
+			return parent
+		} else {
+			const parts = this.key.split("/")
+			const parent = new ObjID(this.bucket, parts.slice(0,-1).join("/")  + "/")
+			parent.normalize()
+			return parent
+		}
+	}
+
+	public static fromString(from: string): ObjID{
+		const match = stringRegex.exec(from)
+
+		if (!match){
+			throw new Error("Failed to parse ObjID")
+		}
+
+		return new ObjID(match[1],match[4],match[3])
+	}
+
+	public static fromURI(uri: string): ObjID{
+		let uri2 = uri
+
+		if (!uri2.endsWith("/")){
+			uri2 += "/"
+		}
+
+		const parts = uri2.split("/")
+
+		const bucket = parts[2]
+		const key = parts.slice(3).join("/")
+
+		return new ObjID(bucket,key)
+	}
+}
+
+export default ObjID

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==
@@ -1392,6 +1392,14 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@graphql-codegen/add@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/add/-/add-3.1.0.tgz#cd02fd6d80a7f62839cb27160b62e48366a237c5"
+  integrity sha512-vRRHpuUFadYXnPrb5RNiIzm3Ao39UxjvrdX760lEfXh2qeG7YddM5QFC+ev2BH3X452R15gv/gf/rXy0+Hqm1A==
+  dependencies:
+    "@graphql-codegen/plugin-helpers" "^2.1.0"
+    tslib "~2.3.0"
+
 "@graphql-codegen/cli@1.21.7":
   version "1.21.7"
   resolved "https://registry.npmjs.org/@graphql-codegen/cli/-/cli-1.21.7.tgz"
@@ -1466,6 +1474,18 @@
     lodash "~4.17.0"
     tslib "~2.3.0"
 
+"@graphql-codegen/plugin-helpers@^2.1.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/plugin-helpers/-/plugin-helpers-2.1.1.tgz#fc13e735763574ef308045bbb95c3e7201ec0027"
+  integrity sha512-7jjN9fekMQkpd7cRTbaBxgqt/hkR3CXeOUSsEyHFDDHKtvCrnev3iyc75IeWXpO9tOwDE8mVPTzEZnu4QukrNA==
+  dependencies:
+    "@graphql-tools/utils" "^8.1.1"
+    change-case-all "1.0.14"
+    common-tags "1.8.0"
+    import-from "4.0.0"
+    lodash "~4.17.0"
+    tslib "~2.3.0"
+
 "@graphql-codegen/typescript-operations@1.18.4":
   version "1.18.4"
   resolved "https://registry.npmjs.org/@graphql-codegen/typescript-operations/-/typescript-operations-1.18.4.tgz"
@@ -1720,6 +1740,13 @@
     camel-case "4.1.2"
     tslib "~2.2.0"
 
+"@graphql-tools/utils@^8.1.1":
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/@graphql-tools/utils/-/utils-8.2.3.tgz#9d7b9e7e116d11d26c2687f4d9cfb2b54568838b"
+  integrity sha512-RR+aiusf2gIfnPmrDIH1uA45QuPiHB54RD+BmWyMcl88tWAjeJtqZeWPqUTq/1EXrNeocJAJQqogHV4Fbbzx3A==
+  dependencies:
+    tslib "~2.3.0"
+
 "@graphql-tools/wrap@^7.0.4":
   version "7.0.8"
   resolved "https://registry.npmjs.org/@graphql-tools/wrap/-/wrap-7.0.8.tgz"
@@ -2357,60 +2384,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 +2491,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 +2634,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 +5312,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 +5322,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 +5761,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 +9534,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 +12631,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 +13127,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 +14595,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"