Merge pull request #1047 from internxt/bugfix/PB-1767-items-not-displ…

…ay-correctly [PB-1767]: bugfix/Files/folders are not displayed
internxt · Mar 5, 2024 · 112fca8 · 112fca8
2 parents 9c9bb11 + dd234d1
commit 112fca8
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 42 deletions.
diff --git a/src/app/drive/components/CreateFolderDialog/CreateFolderDialog.tsx b/src/app/drive/components/CreateFolderDialog/CreateFolderDialog.tsx
@@ -45,17 +45,18 @@ const CreateFolderDialog = ({ onFolderCreated, currentFolderId, neededFolderId }
   const createFolder = async () => {
     if (folderName && folderName.trim().length > 0) {
       setIsLoading(true);
+      const parentFolderId = currentFolderId ?? neededFolderId;
       await dispatch(
         storageThunks.createFolderThunk({
           folderName,
-          parentFolderId: currentFolderId ? currentFolderId : neededFolderId,
+          parentFolderId,
         }),
       )
         .unwrap()
         .then(() => {
           onFolderCreated && onFolderCreated();
-          dispatch(storageActions.setHasMoreDriveFolders(true));
-          dispatch(storageActions.setHasMoreDriveFiles(true));
+          dispatch(storageActions.setHasMoreDriveFolders({ folderId: parentFolderId, status: true }));
+          dispatch(storageActions.setHasMoreDriveFiles({ folderId: parentFolderId, status: true }));
           setTimeout(() => {
             dispatch(fetchSortedFolderContentThunk(currentFolderId));
             setIsLoading(false);
@@ -72,7 +73,7 @@ const CreateFolderDialog = ({ onFolderCreated, currentFolderId, neededFolderId }
           return e;
         });
     } else {
-      setError(translate('error.folderCannotBeEmpty') as string);
+      setError(translate('error.folderCannotBeEmpty'));
     }
   };
 
@@ -92,9 +93,9 @@ const CreateFolderDialog = ({ onFolderCreated, currentFolderId, neededFolderId }
         <Input
           disabled={isLoading}
           className={`${error !== '' ? 'error' : ''}`}
-          label={translate('modals.newFolderModal.label') as string}
-          value={folderName as string}
-          placeholder={translate('modals.newFolderModal.placeholder') as string}
+          label={translate('modals.newFolderModal.label')}
+          value={folderName}
+          placeholder={translate('modals.newFolderModal.placeholder')}
           onChange={(name) => {
             setFolderName(name);
             setError('');

diff --git a/src/app/drive/components/DriveExplorer/DriveExplorer.tsx b/src/app/drive/components/DriveExplorer/DriveExplorer.tsx
@@ -156,6 +156,7 @@ const DriveExplorer = (props: DriveExplorerProps): JSX.Element => {
   const [hasMoreItems, setHasMoreItems] = useState<boolean>(true);
   const [hasMoreTrashFolders, setHasMoreTrashFolders] = useState<boolean>(true);
   const [isLoadingTrashItems, setIsLoadingTrashItems] = useState(false);
+  const hasMoreItemsToLoad = isTrash ? hasMoreItems : hasMoreFiles || hasMoreFolders;
 
   // RIGHT CLICK MENU STATES
   const [isListElementsHovered, setIsListElementsHovered] = useState<boolean>(false);
@@ -822,7 +823,7 @@ const DriveExplorer = (props: DriveExplorerProps): JSX.Element => {
                   items={items}
                   isLoading={isTrash ? isLoadingTrashItems : isLoading}
                   onEndOfScroll={fetchItems}
-                  hasMoreItems={hasMoreItems}
+                  hasMoreItems={hasMoreItemsToLoad}
                   isTrash={isTrash}
                   onHoverListItems={(areHovered) => {
                     setIsListElementsHovered(areHovered);
@@ -1045,6 +1046,8 @@ const dropTargetCollect: DropTargetCollector<
 
 export default connect((state: RootState) => {
   const currentFolderId: number = storageSelectors.currentFolderId(state);
+  const hasMoreFolders = state.storage.hasMoreDriveFolders[currentFolderId] ?? true;
+  const hasMoreFiles = state.storage.hasMoreDriveFiles[currentFolderId] ?? true;
 
   return {
     isAuthenticated: state.user.isAuthenticated,
@@ -1063,7 +1066,7 @@ export default connect((state: RootState) => {
     planUsage: state.plan.planUsage,
     folderOnTrashLength: state.storage.folderOnTrashLength,
     filesOnTrashLength: state.storage.filesOnTrashLength,
-    hasMoreFolders: state.storage.hasMoreDriveFolders,
-    hasMoreFiles: state.storage.hasMoreDriveFiles,
+    hasMoreFolders,
+    hasMoreFiles,
   };
 })(DropTarget([NativeTypes.FILE], dropTargetSpec, dropTargetCollect)(DriveExplorer));
diff --git a/src/app/drive/components/DriveExplorer/DriveExplorerList/DriveExplorerList.tsx b/src/app/drive/components/DriveExplorer/DriveExplorerList/DriveExplorerList.tsx
@@ -77,6 +77,25 @@ const createDriveListItem = (item: DriveItemData, isTrash?: boolean) => (
   <DriveExplorerListItem item={item} isTrash={isTrash} />
 );
 
+const resetDriveOrder = ({
+  dispatch,
+  orderType,
+  direction,
+  currentFolderId,
+}: {
+  dispatch;
+  orderType: string;
+  direction: string;
+  currentFolderId: number;
+}) => {
+  dispatch(storageActions.setDriveItemsSort(orderType));
+  dispatch(storageActions.setDriveItemsOrder(direction));
+
+  dispatch(storageActions.setHasMoreDriveFolders({ folderId: currentFolderId, status: true }));
+  dispatch(storageActions.setHasMoreDriveFiles({ folderId: currentFolderId, status: true }));
+  dispatch(fetchSortedFolderContentThunk(currentFolderId));
+};
+
 const DriveExplorerList: React.FC<DriveExplorerListProps> = memo((props) => {
   const [isAllSelectedEnabled, setIsAllSelectedEnabled] = useState(false);
   const [editNameItem, setEditNameItem] = useState<DriveItemData | null>(null);
@@ -143,21 +162,11 @@ const DriveExplorerList: React.FC<DriveExplorerListProps> = memo((props) => {
     dispatch(storageActions.setOrder({ by: value.field, direction }));
 
     if (value.field === 'name') {
-      dispatch(storageActions.setDriveItemsSort('plainName'));
-      dispatch(storageActions.setDriveItemsOrder(direction));
-
-      dispatch(storageActions.setHasMoreDriveFolders(true));
-      dispatch(storageActions.setHasMoreDriveFiles(true));
-      dispatch(fetchSortedFolderContentThunk(currentFolderId));
+      resetDriveOrder({ dispatch, orderType: 'plainName', direction, currentFolderId });
     }
 
     if (value.field === 'updatedAt') {
-      dispatch(storageActions.setDriveItemsSort('updatedAt'));
-      dispatch(storageActions.setDriveItemsOrder(direction));
-
-      dispatch(storageActions.setHasMoreDriveFolders(true));
-      dispatch(storageActions.setHasMoreDriveFiles(true));
-      dispatch(fetchSortedFolderContentThunk(currentFolderId));
+      resetDriveOrder({ dispatch, orderType: 'updatedAt', direction, currentFolderId });
     }
   };
 

diff --git a/src/app/drive/views/DriveView/DriveView.tsx b/src/app/drive/views/DriveView/DriveView.tsx
@@ -139,7 +139,7 @@ export default connect((state: RootState) => {
 
   return {
     namePath: state.storage.namePath,
-    isLoading: state.storage.loadingFolders[currentFolderId],
+    isLoading: state.storage.loadingFolders[currentFolderId] ?? true,
     currentFolderId,
     items: sortedItems,
   };

diff --git a/src/app/store/slices/storage/index.ts b/src/app/store/slices/storage/index.ts
@@ -4,7 +4,6 @@ import selectors from './storage.selectors';
 import { storageExtraReducers } from '../storage/storage.thunks';
 import { filtersFactory, orderFactory, StorageSetFiltersPayload, StorageState } from './storage.model';
 import databaseService, { DatabaseCollection } from '../../../database/services/database.service';
-import itemsListService from '../../../drive/services/items-list.service';
 import { OrderDirection, OrderSettings } from '../../../core/types';
 import { DriveItemData, DriveItemPatch, FileViewMode, FolderPath } from '../../../drive/types';
 import { ShareLink } from '@internxt/sdk/dist/drive/share/types';
@@ -18,8 +17,8 @@ const initialState: StorageState = {
   moveDialogLevels: {},
   levelsFoldersLength: {},
   levelsFilesLength: {},
-  hasMoreDriveFolders: true,
-  hasMoreDriveFiles: true,
+  hasMoreDriveFolders: {},
+  hasMoreDriveFiles: {},
   recents: [],
   isLoadingRecents: false,
   isLoadingDeleted: false,
@@ -109,15 +108,15 @@ export const storageSlice = createSlice({
       state.levelsFilesLength[action.payload.folderId] = 0;
       state.levels[action.payload.folderId] = [];
     },
-    setHasMoreDriveFolders: (state: StorageState, action: PayloadAction<boolean>) => {
-      state.hasMoreDriveFolders = action.payload;
+    setHasMoreDriveFolders: (state: StorageState, action: PayloadAction<{ folderId: number; status: boolean }>) => {
+      state.hasMoreDriveFolders[action.payload.folderId] = action.payload.status;
     },
-    setHasMoreDriveFiles: (state: StorageState, action: PayloadAction<boolean>) => {
-      state.hasMoreDriveFiles = action.payload;
+    setHasMoreDriveFiles: (state: StorageState, action: PayloadAction<{ folderId: number; status: boolean }>) => {
+      state.hasMoreDriveFiles[action.payload.folderId] = action.payload.status;
     },
     resetDrivePagination: (state: StorageState) => {
-      state.hasMoreDriveFiles = true;
-      state.hasMoreDriveFolders = true;
+      state.hasMoreDriveFolders[state.currentPath.id] = true;
+      state.hasMoreDriveFiles[state.currentPath.id] = true;
     },
     setRecents: (state: StorageState, action: PayloadAction<DriveItemData[]>) => {
       state.recents = action.payload;

diff --git a/src/app/store/slices/storage/storage.model.ts b/src/app/store/slices/storage/storage.model.ts
@@ -15,8 +15,8 @@ export interface StorageState {
   moveDialogLevels: Record<number, DriveItemData[]>;
   levelsFoldersLength: Record<number, number>;
   levelsFilesLength: Record<number, number>;
-  hasMoreDriveFolders: boolean;
-  hasMoreDriveFiles: boolean;
+  hasMoreDriveFolders: Record<number, boolean>;
+  hasMoreDriveFiles: Record<number, boolean>;
   recents: DriveItemData[];
   isLoadingRecents: boolean;
   isLoadingDeleted: boolean;

diff --git a/src/app/store/slices/storage/storage.selectors.ts b/src/app/store/slices/storage/storage.selectors.ts
@@ -37,10 +37,10 @@ const storageSelectors = {
     return this.levelItems(state)(currentFolderId);
   },
   hasMoreFiles(state: RootState): boolean {
-    return state.storage.hasMoreDriveFiles;
+    return state.storage.hasMoreDriveFiles[state.storage.currentPath.id];
   },
   hasMoreFolders(state: RootState): boolean {
-    return state.storage.hasMoreDriveFolders;
+    return state.storage.hasMoreDriveFolders[state.storage.currentPath.id];
   },
   levelItems(state: RootState): (folderId: number) => DriveItemData[] {
     return (folderId) => state.storage.levels[folderId] || [];

diff --git a/src/app/store/slices/storage/storage.thunks/fetchFolderContentThunk.ts b/src/app/store/slices/storage/storage.thunks/fetchFolderContentThunk.ts
@@ -20,8 +20,9 @@ export const fetchPaginatedFolderContentThunk = createAsyncThunk<void, number, {
   'storage/fetchFolderContent',
   async (folderId, { getState, dispatch }) => {
     const storageState = getState().storage;
-    const hasMoreDriveFolders = storageState.hasMoreDriveFolders;
-    const hasMoreDriveFiles = storageState.hasMoreDriveFiles;
+    const hasMoreDriveFolders = storageState.hasMoreDriveFolders[folderId] ?? true;
+    const hasMoreDriveFiles = storageState.hasMoreDriveFiles[folderId] ?? true;
+
     const foldersOffset = (storageState.levels[folderId] ?? []).filter(filterFolderItems).length;
     const filesOffset = (storageState.levels[folderId] ?? []).filter(filterFilesItems).length;
     const driveItemsSort = storageState.driveItemsSort;
@@ -63,10 +64,10 @@ export const fetchPaginatedFolderContentThunk = createAsyncThunk<void, number, {
       dispatch(storageActions.addItems({ folderId, items: parsedItems }));
 
       if (hasMoreDriveFolders) {
-        dispatch(storageActions.setHasMoreDriveFolders(!areLastItems));
+        dispatch(storageActions.setHasMoreDriveFolders({ folderId, status: !areLastItems }));
         dispatch(storageActions.addFolderFoldersLength({ folderId, foldersLength: itemslength }));
       } else {
-        dispatch(storageActions.setHasMoreDriveFiles(!areLastItems));
+        dispatch(storageActions.setHasMoreDriveFiles({ folderId, status: !areLastItems }));
         dispatch(storageActions.addFolderFilesLength({ folderId, filesLength: itemslength }));
       }
     } catch (error) {

diff --git a/src/app/store/slices/storage/storage.thunks/fetchSortedFolderContentThunk.ts b/src/app/store/slices/storage/storage.thunks/fetchSortedFolderContentThunk.ts
@@ -14,8 +14,8 @@ const DEFAULT_LIMIT = 50;
 export const fetchSortedFolderContentThunk = createAsyncThunk<void, number, { state: RootState }>(
   'storage/fetchSortedFolderContentThunk',
   async (folderId, { getState, dispatch }) => {
-    dispatch(storageActions.setHasMoreDriveFolders(true));
-    dispatch(storageActions.setHasMoreDriveFiles(true));
+    dispatch(storageActions.setHasMoreDriveFolders({ folderId, status: true }));
+    dispatch(storageActions.setHasMoreDriveFiles({ folderId, status: true }));
 
     const storageState = getState().storage;
     const hasMoreDriveFolders = storageState.hasMoreDriveFolders;

diff --git a/src/app/store/slices/storage/storage.thunks/goToFolderThunk.ts b/src/app/store/slices/storage/storage.thunks/goToFolderThunk.ts
@@ -28,6 +28,9 @@ export const goToFolderThunk = createAsyncThunk<void, FolderPath, { state: RootS
       // no need to go to the same folder
       return;
     }
+
+    dispatch(storageActions.setHasMoreDriveFolders({ folderId: path.id, status: true }));
+    dispatch(storageActions.setHasMoreDriveFiles({ folderId: path.id, status: true }));
     dispatch(storageActions.clearCurrentThumbnailItems({ folderId: path.id }));
     const isInNamePath: boolean = storageSelectors.isFolderInNamePath(getState())(path.id);