Applied similar method to vault browser

src/web/vaultBrowser/VaultBrowser.tsx

@@ -2,10 +2,39 @@ import { ArrowBack, Article, Delete, Download, Folder, Refresh } from "@mui/icon
 import { Box, AppBar, Toolbar, Typography, Tooltip, IconButton } from "@mui/material";
 import { DataGrid, GridActionsCellItem, GridRenderCellParams, GridRowParams, GridSelectionModel } from "@mui/x-data-grid";
 import { DirID, EncryptedDir, EncryptedItem, ItemPath, Vault } from "cryptomator-ts";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { WebDAV } from "../../lib/cryptomator/WebDAV";
+import { DirCache, ExpStatus } from "../../types/types";
 import { ItemDownloader } from "../ItemDownloader";
 
+enum Querying {
+	/**
+	 * Disable nothing
+	 */
+	None,
+	/**
+	 * Show items, but disallow changing dir and interacting with buttons
+	 */
+	Partial,
+	/**
+	 * Hide items and show loading icon instead
+	 */
+	Full
+}
+
+type DirInfo = {
+	name: string;
+	id: DirID;
+};
+
+/**
+ * The following approach is used for this component:
+ * Encrypted directory can be loaded independently from current directory
+ * If the changed directory is not loaded, it will trigger loading
+ * Otherwise, it uses cache
+ * Force reload will always bypass and override cache
+ */
+
 export function VaultBrowser(props: {
 	vault: Vault,
 	client: WebDAV,
@@ -14,10 +43,12 @@ export function VaultBrowser(props: {
 	openDownloads: () => void
 }){
 
-	const [dir, setDir] = useState<EncryptedDir[]>([]);
-	const [items, setItems] = useState<EncryptedItem[]>([]);
-	const [querying, setQuerying] = useState(false);
+	const [dir, setDir] = useState<DirInfo[]>([]);
+	const [items, setItems] = useState<DirCache<EncryptedItem>>({});
+	const [querying, setQuerying] = useState<Querying>(Querying.None);
 	const [sel, setSel] = useState<GridSelectionModel>([]);
+
+	const itemsCache = useRef<DirCache<EncryptedItem>>({'': {explored: ExpStatus.NotStarted}});
 
 	const columns = useMemo(() => [
 		{field: 'type', headerName: '', width: 24, renderCell: (params: GridRenderCellParams<string>) => {
@@ -39,67 +70,84 @@ export function VaultBrowser(props: {
 	], [props.download]);
 
 	const rows = useMemo(() => {
-		if (querying) return [];
-		else {
-			const rows = [];
-			if(dir.length){
-				rows.push(
-					{
-						id: 'parent',
-						name: 'Up one level',
-						type: 'parent'
-					}
-				);
-			}
-			for(const item of items){
-				rows.push({
-					id: item.fullName,
-					name: item.decryptedName,
-					type: item.type,
-					obj: item
-				});
-			}
-			return rows;
+		const rows = [];
+		if(dir.length){
+			rows.push(
+				{
+					id: 'parent',
+					name: 'Up one level',
+					type: 'parent'
+				}
+			);
 		}
-	}, [querying]);
-
-	useEffect(() => {
-		loadItems();
-	}, [dir]);
-
-	useEffect(() => {
-		console.log(items);
+		const currentDirId = dir.length === 0 ? '' as DirID : dir[dir.length - 1].id;
+		const currentItems = items[currentDirId];
+		if(currentItems?.explored !== ExpStatus.Ready) return [];
+		for(const item of currentItems.child){
+			rows.push({
+				id: item.fullName,
+				name: item.decryptedName,
+				type: item.type,
+				obj: item
+			});
+		}
+		return rows;
 	}, [items]);
 
-	const loadItems = async () => {
-		const temp = [...items];
+	const saveItems = (data: DirCache<EncryptedItem>) => {
+		for(const k in data) itemsCache.current[k] = data[k];
+		setItems({...itemsCache.current});
+	}
+
+	const loadItems = async (dirId: DirID, bypassCache?: boolean) => {
+		const temp = itemsCache.current[dirId] ?? {
+			child: [],
+			explored: ExpStatus.NotStarted
+		};
+		if(temp.explored === ExpStatus.Ready && !bypassCache) return;
 		try {
-			setQuerying(true);
-			setItems([]);
-			const newItems = await props.vault.listItems(dir.length === 0 ? '' as DirID : await dir[dir.length - 1].getDirId());
-			setItems(newItems);
+			const update: DirCache<EncryptedItem> = {};
+			update[dirId] = {explored: ExpStatus.Querying};
+			saveItems(update);
+			const newItems = await props.vault.listItems(dirId);
+			update[dirId] = {
+				child: newItems,
+				explored: ExpStatus.Ready
+			}
+			saveItems(update);
 		} catch(e) {
-			setItems(temp);
-		} finally {
-			setQuerying(false);
+			const delta: DirCache<EncryptedItem> = {};
+			delta[dirId] = {explored: ExpStatus.Error};
+			saveItems(delta);
 		}
 	}
 
-	const onRowClick = (r: GridRowParams) => {
-		if(r.row.type === 'parent') loadSubDir(null);
-		else if(r.row.type === 'd') loadSubDir(r.row.obj);
+	const changeDir = async (subDir: DirInfo | null) => {
+		setQuerying(Querying.Full);
+		if (subDir === null) {
+			const newDir = dir.slice(0, -1);
+			await loadItems(dir[dir.length - 1].id);
+			setDir(newDir);
+		} else {
+			await loadItems(subDir.id);
+			setDir([...dir, subDir]);
+		}
+		setQuerying(Querying.None);
 	}
 
-	const loadSubDir = async (subDir: EncryptedDir | null) => {
-		if (subDir === null) setDir(dir.slice(0, -1));
-		else setDir([...dir, subDir]);
+	const onRowClick = async (r: GridRowParams) => {
+		if(r.row.type === 'parent') changeDir(null);
+		else if(r.row.type === 'd') changeDir({
+			name: (r.row.obj as EncryptedDir).decryptedName,
+			id: await (r.row.obj as EncryptedDir).getDirId()
+		});
 	}
 
 	return (
 		<Box sx={{display: 'flex', flexDirection: 'column', height: '100%', flex: 1}}>
 			<AppBar position='static'>
 				<Toolbar>
-					<Typography variant='h5'>{`${[props.vault.name]}: ${dir.length === 0 ? 'Root' : dir[dir.length - 1].decryptedName}`}</Typography>
+					<Typography variant='h5'>{`${[props.vault.name]}: ${dir.length === 0 ? 'Root' : dir[dir.length - 1].name}`}</Typography>
 					<Box sx={{flex: 1}}/>
 					<Tooltip title='Refresh'>
 						<span>
@@ -117,11 +165,11 @@ export function VaultBrowser(props: {
 					isRowSelectable={(params: GridRowParams) => params.row.type !== 'parent'}
 					columns={columns}
 					rows={rows}
-					loading={querying}
+					loading={querying === Querying.Full}
 					checkboxSelection
 					selectionModel={sel}
 					onSelectionModelChange={items => {
-						if(!querying) setSel(items);
+						if(querying !== Querying.None) setSel(items);
 					}}
 				/>
 			</Box>