Merge pull request #1925 from holium/trove-space-fix

-fix navigating to a space with selected trove
holium · Jul 17, 2023 · d5fc880 · d5fc880 · vercel · Jul 17, 2023
2 parents 4d47f0c + 13a90c0
commit d5fc880
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 10 deletions.
diff --git 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<boolean>(false);
   const [displayFileInput, setDisplayFileInput] = useState<boolean>(false);
   const [displayFileLink, setDisplayFileLink] = useState<boolean>(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/Navigation.tsx b/trove/src/components/Navigation.tsx
@@ -11,9 +11,14 @@ export const Navigation = ({ selectedSpace }: Props) => {
   //presisted space data for filtering search correctly
   const navigate = useNavigate();
   const setSpace = useTroveStore((store: TroveStore) => store.setSpace);
+  const setSelectedTopLevelFolder = useTroveStore(
+    (store: TroveStore) => store.setSelectedTopLevelFolder
+  );
   useEffect(() => {
     //everytime space changes redirect to that space
     if (selectedSpace) {
+      //make sure we don't have a selected top level forlder when we navigate (trove)
+      setSelectedTopLevelFolder(null);
       navigate(selectedSpace);
     }
   }, [selectedSpace]);

diff --git 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 (
@@ -53,7 +61,7 @@ export const RecursiveTree = memo(
     };
     return (
       <Box>
-        {itemList.map((item: any) => {
+        {itemList?.map((item: any) => {
           if (item.type === 'folder') {
             return createTree(item.path, item);
           } else {

diff --git 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<TroveStore>((set) => ({
   setInPersonalSpace: (state: any) => set(() => ({ inPersonalSpace: state })),
 
   troveRenderTree: null,
-  setTroveRenderTree: (newTroveRenderTree: any) =>
+  setTroveRenderTree: (newTroveRenderTree: TroveRenderTree) =>
     set(() => ({ troveRenderTree: newTroveRenderTree })),
 
   topLevelFolders: [],