Web: Files: fixed fetch files

packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js

@@ -68,6 +68,7 @@ const FilesRowContainer = ({
   fetchMoreFiles,
   hasMoreFiles,
   isRooms,
+  selectedFolderId,
 }) => {
   useEffect(() => {
     if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
@@ -93,6 +94,7 @@ const FilesRowContainer = ({
       hasMoreFiles={hasMoreFiles}
       draggable
       useReactWindow
+      selectedFolderId={selectedFolderId}
     >
       {filesList.map((item, index) => (
         <SimpleFilesRow
@@ -107,28 +109,31 @@ const FilesRowContainer = ({
   );
 };
 
-export default inject(({ filesStore, auth, treeFoldersStore }) => {
-  const {
-    filesList,
-    viewAs,
-    setViewAs,
-    filterTotal,
-    fetchMoreFiles,
-    hasMoreFiles,
-  } = filesStore;
-  const { isVisible: infoPanelVisible } = auth.infoPanelStore;
-  const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
+export default inject(
+  ({ filesStore, auth, treeFoldersStore, selectedFolderStore }) => {
+    const {
+      filesList,
+      viewAs,
+      setViewAs,
+      filterTotal,
+      fetchMoreFiles,
+      hasMoreFiles,
+    } = filesStore;
+    const { isVisible: infoPanelVisible } = auth.infoPanelStore;
+    const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
 
-  const isRooms = isRoomsFolder || isArchiveFolder;
+    const isRooms = isRoomsFolder || isArchiveFolder;
 
-  return {
-    filesList,
-    viewAs,
-    setViewAs,
-    infoPanelVisible,
-    filterTotal,
-    fetchMoreFiles,
-    hasMoreFiles,
-    isRooms,
-  };
-})(observer(FilesRowContainer));
+    return {
+      filesList,
+      viewAs,
+      setViewAs,
+      infoPanelVisible,
+      filterTotal,
+      fetchMoreFiles,
+      hasMoreFiles,
+      isRooms,
+      selectedFolderId: selectedFolderStore.id,
+    };
+  }
+)(observer(FilesRowContainer));

packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js

@@ -122,6 +122,7 @@ const Table = ({
   hasMoreFiles,
   filterTotal,
   isRooms,
+  selectedFolderId,
 }) => {
   const [tagCount, setTagCount] = React.useState(null);
 
@@ -206,6 +207,7 @@ const Table = ({
         useReactWindow
         infoPanelVisible={infoPanelVisible}
         columnInfoPanelStorageName={columnInfoPanelStorageName}
+        selectedFolderId={selectedFolderId}
       >
         {filesList.map((item, index) => {
           return index === 0 && item.isRoom ? (
@@ -246,39 +248,42 @@ const Table = ({
   );
 };
 
-export default inject(({ filesStore, treeFoldersStore, auth }) => {
-  const { isVisible: infoPanelVisible } = auth.infoPanelStore;
+export default inject(
+  ({ filesStore, treeFoldersStore, auth, selectedFolderStore }) => {
+    const { isVisible: infoPanelVisible } = auth.infoPanelStore;
 
-  const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
+    const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
 
-  const isRooms =
-    isRoomsFolder ||
-    isArchiveFolder ||
-    window.location.href.includes("/rooms?");
+    const isRooms =
+      isRoomsFolder ||
+      isArchiveFolder ||
+      window.location.href.includes("/rooms?");
 
-  const {
-    filesList,
-    viewAs,
-    setViewAs,
-    setFirsElemChecked,
-    setHeaderBorder,
-    fetchMoreFiles,
-    hasMoreFiles,
-    filterTotal,
-  } = filesStore;
+    const {
+      filesList,
+      viewAs,
+      setViewAs,
+      setFirsElemChecked,
+      setHeaderBorder,
+      fetchMoreFiles,
+      hasMoreFiles,
+      filterTotal,
+    } = filesStore;
 
-  return {
-    filesList,
-    viewAs,
-    setViewAs,
-    setFirsElemChecked,
-    setHeaderBorder,
-    theme: auth.settingsStore.theme,
-    userId: auth.userStore.user.id,
-    infoPanelVisible,
-    fetchMoreFiles,
-    hasMoreFiles,
-    filterTotal,
-    isRooms,
-  };
-})(observer(Table));
+    return {
+      filesList,
+      viewAs,
+      setViewAs,
+      setFirsElemChecked,
+      setHeaderBorder,
+      theme: auth.settingsStore.theme,
+      userId: auth.userStore.user.id,
+      infoPanelVisible,
+      fetchMoreFiles,
+      hasMoreFiles,
+      filterTotal,
+      isRooms,
+      selectedFolderId: selectedFolderStore.id,
+    };
+  }
+)(observer(Table));

packages/components/infinite-loader/Grid.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, createRef } from "react";
 import { InfiniteLoader, WindowScroller } from "react-virtualized";
 import { StyledList } from "./StyledInfiniteLoader";
 
@@ -12,12 +12,13 @@ const GridComponent = ({
   children,
   className,
   scroll,
+  selectedFolderId,
 }) => {
-  const loaderRef = React.createRef();
+  const loaderRef = createRef();
 
   useEffect(() => {
     setTimeout(() => loaderRef?.current?.resetLoadMoreRowsCache(true), 0);
-  }, [loaderRef]);
+  }, [loaderRef, selectedFolderId]);
 
   const isItemLoaded = useCallback(
     ({ index }) => {

packages/components/infinite-loader/List.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, createRef } from "react";
 import { InfiniteLoader, WindowScroller } from "react-virtualized";
 import Loaders from "@docspace/common/components/Loaders";
 import { StyledList } from "./StyledInfiniteLoader";
@@ -17,12 +17,13 @@ const ListComponent = ({
   className,
   scroll,
   infoPanelVisible,
+  selectedFolderId,
 }) => {
-  const loaderRef = React.createRef();
+  const loaderRef = createRef();
 
   useEffect(() => {
     setTimeout(() => loaderRef?.current?.resetLoadMoreRowsCache(true), 0);
-  }, [loaderRef]);
+  }, [loaderRef, selectedFolderId]);
 
   const renderRow = ({ key, index, style }) => {
     const isLoaded = isItemLoaded({ index: index + 2 });

packages/components/row-container/index.js

@@ -19,6 +19,7 @@ class RowContainer extends React.PureComponent {
       itemCount,
       fetchMoreFiles,
       hasMoreFiles,
+      selectedFolderId,
     } = this.props;
 
     return (
@@ -39,6 +40,7 @@ class RowContainer extends React.PureComponent {
             loadMoreItems={fetchMoreFiles}
             itemSize={itemHeight}
             onScroll={onScroll}
+            selectedFolderId={selectedFolderId}
           >
             {children}
           </InfiniteLoaderComponent>

packages/components/table-container/TableBody.js

@@ -15,6 +15,7 @@ const TableBody = (props) => {
     useReactWindow,
     onScroll,
     infoPanelVisible,
+    selectedFolderId,
   } = props;
 
   return useReactWindow ? (
@@ -34,6 +35,7 @@ const TableBody = (props) => {
         itemSize={itemHeight}
         onScroll={onScroll}
         infoPanelVisible={infoPanelVisible}
+        selectedFolderId={selectedFolderId}
       >
         {children}
       </InfiniteLoaderComponent>