From 13a90c07ad3337d70d4ae968366df2fe30672fe1 Mon Sep 17 00:00:00 2001 From: Haroldthe24th Date: Mon, 17 Jul 2023 20:23:38 +0100 Subject: [PATCH] -types added to RecursiveTree props --- trove/src/components/Main.tsx | 6 ++--- trove/src/components/RecursiveTree.tsx | 10 ++++++- trove/src/store/troveStore.ts | 36 ++++++++++++++++++++++---- 3 files changed, 43 insertions(+), 9 deletions(-) diff --git a/trove/src/components/Main.tsx b/trove/src/components/Main.tsx index 97608c2fdc..57f096bf95 100644 --- a/trove/src/components/Main.tsx +++ b/trove/src/components/Main.tsx @@ -19,7 +19,7 @@ import { WrappedBackground, } from '../components'; import { moveFileAction, moveFolderAction } from '../store/troveActions'; -import useTroveStore, { TroveStore } from '../store/troveStore'; +import useTroveStore, { Node, TroveStore } from '../store/troveStore'; import { theme } from '../theme'; export const Main = ({ troveRenderTree, @@ -32,7 +32,6 @@ export const Main = ({ const [displayFolderInput, setDisplayFolderInput] = useState(false); const [displayFileInput, setDisplayFileInput] = useState(false); const [displayFileLink, setDisplayFileLink] = useState(false); - const api = useTroveStore((store: TroveStore) => store.api); const myPerms = useTroveStore((store: TroveStore) => store.myPerms); @@ -45,9 +44,10 @@ export const Main = ({ (store: TroveStore) => store.setSelectedNode ); const space = useTroveStore((store: TroveStore) => store.currentSpace); - const handleSelection = (data: any = null) => { + const handleSelection = (data: Node = null) => { //if we get the same instance twice, we unselect setSelectedNode(null); + if (!data) return; if (data?.id === selectedNode?.id) { //this block isn't empty } else { diff --git a/trove/src/components/RecursiveTree.tsx b/trove/src/components/RecursiveTree.tsx index 720405908c..73c352f4e7 100644 --- a/trove/src/components/RecursiveTree.tsx +++ b/trove/src/components/RecursiveTree.tsx @@ -1,11 +1,19 @@ import { memo } from 'react'; import Box from '@mui/material/Box'; +import { Node, TroveRenderTree } from '../store/troveStore'; import { FileItem } from './FileItem'; import { FolderItem } from './FolderItem'; //TODO: make two components for folders and one for files +interface Props { + itemList: undefined | [] | TroveRenderTree; + handleSelection: (data: Node) => void; + deleteFile: (key: string) => void; + selected: Node; + writePerms: boolean; +} export const RecursiveTree = memo( - ({ itemList, handleSelection, selected, writePerms, deleteFile }: any) => { + ({ itemList, handleSelection, selected, writePerms, deleteFile }: Props) => { const createTree = (name: any, data: any, parentCount = 0) => { if (data.type === 'folder') { return ( diff --git a/trove/src/store/troveStore.ts b/trove/src/store/troveStore.ts index 2616ed0681..9620250eaa 100644 --- a/trove/src/store/troveStore.ts +++ b/trove/src/store/troveStore.ts @@ -5,11 +5,37 @@ import { Role } from '../types'; export type Folder = null | string; -type Node = null | { +export type Node = null | { id: string; type: 'file' | 'folder'; }; - +interface TroveRenderFile { + [key: string]: { + url: string; + dat: { + size: string; + title: string; + key: string; + from: number; + description: string; + by: string; + extension: string; + }; + type: string; + }; +} +interface TroveRenderFolder { + text: string; + path: string; + type: string; + timestamp: number; + children: TroveRenderFolder | TroveRenderFile | []; //has either a folder or a file as a child or is an empty array +} +export type TroveRenderTree = + | { + [key: string]: TroveRenderFolder | TroveRenderFile | []; //a map of ship/space to trove folder and their files.. + }[] + | null; export interface TroveStore { api: null | typeof trovePreload; setApi: (api: typeof trovePreload) => void; @@ -20,8 +46,8 @@ export interface TroveStore { inPersonalSpace: null | boolean; setInPersonalSpace: (state: boolean) => void; - troveRenderTree: any; //calculated from the troves variable, for rendering in react - setTroveRenderTree: (newTroveRenderTree: any) => void; + troveRenderTree: TroveRenderTree; //calculated from the troves variable, for rendering in react + setTroveRenderTree: (newTroveRenderTree: TroveRenderTree) => void; topLevelFolders: any; setTopLevelFolders: (newTopLevelFolders: any) => void; @@ -65,7 +91,7 @@ const useTroveStore = create((set) => ({ setInPersonalSpace: (state: any) => set(() => ({ inPersonalSpace: state })), troveRenderTree: null, - setTroveRenderTree: (newTroveRenderTree: any) => + setTroveRenderTree: (newTroveRenderTree: TroveRenderTree) => set(() => ({ troveRenderTree: newTroveRenderTree })), topLevelFolders: [],