Web: Files: fixed files upload

packages/asc-web-common/components/PageLayout/sub-components/section-paging.js

@@ -7,10 +7,6 @@ const StyledSectionPaging = styled.div`
 `;
 
 class SectionPaging extends React.Component {
-  shouldComponentUpdate(nextProps) {
-    return !equal(this.props, nextProps);
-  }
-
   render() {
     return <StyledSectionPaging {...this.props} />;
   }

products/ASC.Files/Client/src/pages/Home/Section/Paging/index.js

@@ -13,6 +13,7 @@ const SectionPagingContent = ({
   selectedCount,
   selectedFolderId,
   tReady,
+  totalPages,
 }) => {
   const { t } = useTranslation("Home");
   const onNextClick = useCallback(
@@ -105,7 +106,6 @@ const SectionPagingContent = ({
 
   const pageItems = useMemo(() => {
     if (filter.total < filter.pageCount) return [];
-    const totalPages = Math.ceil(filter.total / filter.pageCount);
     return [...Array(totalPages).keys()].map((item) => {
       return {
         key: item,
@@ -115,7 +115,7 @@ const SectionPagingContent = ({
         }),
       };
     });
-  }, [filter.total, filter.pageCount, t]);
+  }, [filter.total, filter.pageCount, t, totalPages]);
 
   const emptyPageSelection = {
     key: 0,
@@ -168,11 +168,14 @@ const SectionPagingContent = ({
 export default inject(({ filesStore, selectedFolderStore }) => {
   const { files, folders, fetchFiles, filter, setIsLoading } = filesStore;
 
+  const totalPages = Math.ceil(filter.total / filter.pageCount);
+
   return {
     files,
     folders,
     selectedFolderId: selectedFolderStore.id,
     filter,
+    totalPages,
 
     setIsLoading,
     fetchFiles,

products/ASC.Files/Client/src/store/FilesStore.js

@@ -310,6 +310,8 @@ class FilesStore {
           const isRecycleBinFolder =
             data.current.rootFolderType === FolderType.TRASH;
 
+          !isRecycleBinFolder && this.checkUpdateNode(data, folderId);
+
           if (!isRecycleBinFolder && withSubfolders) {
             const path = data.pathParts.slice(0);
             const foldersCount = data.current.foldersCount;
@@ -340,7 +342,7 @@ class FilesStore {
           const selectedFolder = {
             selectedFolder: { ...this.selectedFolderStore },
           };
-          this.createThumbnails();
+          this.viewAs === "tile" && this.createThumbnails();
           return Promise.resolve(selectedFolder);
         })
         .catch((err) => {
@@ -363,6 +365,29 @@ class FilesStore {
     return request();
   };
 
+  checkUpdateNode = async (data, folderId) => {
+    const { treeFolders, getSubfolders } = this.treeFoldersStore;
+
+    const somePath = data.pathParts.slice(0);
+    const path = data.pathParts.slice(0);
+    let newItems = treeFolders;
+
+    while (somePath.length !== 1) {
+      newItems = newItems.find((x) => x.id === somePath[0])?.folders;
+      if (!newItems) {
+        return;
+      }
+
+      somePath.shift();
+    }
+
+    if (!newItems.find((x) => x.id == folderId)) {
+      path.splice(data.pathParts.length - 1, 1);
+      const subfolders = await getSubfolders(data.current.parentId);
+      loopTreeFolders(path, treeFolders, subfolders, 0);
+    }
+  };
+
   isFileSelected = (fileId, parentId) => {
     const item = this.selection.find(
       (x) => x.id === fileId && x.parentId === parentId

products/ASC.Files/Client/src/store/UploadDataStore.js

@@ -2,12 +2,12 @@ import { makeAutoObservable, runInAction } from "mobx";
 import { TIMEOUT } from "../helpers/constants";
 import { loopTreeFolders } from "../helpers/files-helpers";
 import uniqueid from "lodash/uniqueId";
-import throttle from "lodash/throttle";
 import sumBy from "lodash/sumBy";
 import { ConflictResolveType } from "@appserver/common/constants";
 import {
   getFolder,
   getFileInfo,
+  getFolderInfo,
   getProgress,
   uploadFile,
   convertFile,
@@ -317,7 +317,8 @@ class UploadDataStore {
                 file.inConversion = false;
               }
             });
-            this.refreshFiles(toFolderId, false);
+
+            //this.refreshFiles(toFolderId, false);
             break;
           }
 
@@ -335,7 +336,7 @@ class UploadDataStore {
             }
           });
 
-          this.refreshFiles(toFolderId, false);
+          this.refreshFiles(file);
           const percent = this.getConversationPercent(index + 1);
           this.setConversionPercent(percent, !!error);
         }
@@ -450,46 +451,122 @@ class UploadDataStore {
     }
   };
 
-  refreshFiles = (folderId, needUpdateTree = true) => {
-    const { setTreeFolders } = this.treeFoldersStore;
-    if (
-      this.selectedFolderStore.id === folderId &&
-      window.location.pathname.indexOf("/history") === -1
-    ) {
-      return this.filesStore.fetchFiles(
-        this.selectedFolderStore.id,
-        this.filesStore.filter.clone(),
-        false,
-        true
-      );
-    } else if (needUpdateTree) {
-      return getFolder(folderId, this.filesStore.filter.clone()).then(
-        (data) => {
-          const path = data.pathParts;
-          const newTreeFolders = this.treeFoldersStore.treeFolders;
-          const folders = data.folders;
-          const foldersCount = data.count;
-          loopTreeFolders(path, newTreeFolders, folders, foldersCount);
-          setTreeFolders(newTreeFolders);
+  refreshFiles = async (currentFile) => {
+    const {
+      files,
+      setFiles,
+      folders,
+      setFolders,
+      filter,
+      setFilter,
+    } = this.filesStore;
+    if (window.location.pathname.indexOf("/history") === -1) {
+      const newFiles = files;
+      const newFolders = folders;
+      const path = currentFile.path;
+
+      let folderInfo = null;
+      const index = path.findIndex((x) => x === this.selectedFolderStore.id);
+      const folderId = index !== -1 ? path[index + 1] : null;
+      if (folderId) folderInfo = await getFolderInfo(folderId);
+
+      const newPath = [];
+      if (folderInfo) {
+        let i = 0;
+        while (path[i] && path[i] !== folderId) {
+          newPath.push(path[i]);
+          i++;
         }
-      );
+      }
+
+      if (newPath[newPath.length - 1] !== this.selectedFolderStore.id) {
+        return;
+      }
+
+      const addNewFile = () => {
+        if (folderInfo) {
+          const isFolderExist = newFolders.find((x) => x.id === folderInfo.id);
+          if (!isFolderExist && folderInfo) {
+            newFolders.unshift(folderInfo);
+            setFolders(newFolders);
+            const newFilter = filter;
+            newFilter.total = newFilter.total += 1;
+            setFilter(newFilter);
+          }
+        } else {
+          const isFileExist = newFiles.find(
+            (x) => x.id === currentFile.fileInfo.id
+          );
+
+          if (!isFileExist && currentFile && currentFile.fileInfo) {
+            newFiles.unshift(currentFile.fileInfo);
+            setFiles(newFiles);
+            const newFilter = filter;
+            newFilter.total = newFilter.total += 1;
+            setFilter(newFilter);
+          }
+        }
+      };
+
+      const isFiltered =
+        filter.filterType ||
+        filter.authorType ||
+        filter.search ||
+        filter.page !== 0;
+
+      if ((!currentFile && !folderInfo) || isFiltered) return;
+      if (folderInfo && this.selectedFolderStore.id === folderInfo.id) return;
+
+      if (folderInfo) {
+        const folderIndex = folders.findIndex((f) => f.id === folderInfo.id);
+        if (folderIndex !== -1) {
+          folders[folderIndex] = folderInfo;
+          return;
+        }
+      }
+
+      if (filter.total >= filter.pageCount) {
+        if (files.length) {
+          newFiles.pop();
+          addNewFile();
+        } else {
+          newFolders.pop();
+          addNewFile();
+        }
+      } else {
+        addNewFile();
+      }
+
+      if (!!folderInfo) {
+        const {
+          expandedKeys,
+          setExpandedKeys,
+          treeFolders,
+        } = this.treeFoldersStore;
+
+        const newExpandedKeys = expandedKeys.filter(
+          (x) => x !== newPath[newPath.length - 1] + ""
+        );
+
+        setExpandedKeys(newExpandedKeys);
+
+        loopTreeFolders(
+          newPath,
+          treeFolders,
+          this.filesStore.folders.length === 1 ? this.filesStore.folders : [],
+          this.filesStore.folders.length
+        );
+      }
     }
   };
 
-  throttleRefreshFiles = throttle((toFolderId) => {
-    return this.refreshFiles(toFolderId).catch((err) => {
-      console.log("RefreshFiles failed", err);
-      return Promise.resolve();
-    });
-  }, 1000);
-
   uploadFileChunks = async (
     location,
     requestsDataArray,
     fileSize,
     indexOfFile,
     file,
-    t
+    path
   ) => {
     const length = requestsDataArray.length;
     for (let index = 0; index < length; index++) {
@@ -543,8 +620,9 @@ class UploadDataStore {
     // All chuncks are uploaded
 
     const currentFile = this.files[indexOfFile];
+    currentFile.path = path;
     if (!currentFile) return Promise.resolve();
-    const { toFolderId, needConvert } = currentFile;
+    const { needConvert } = currentFile;
 
     if (needConvert) {
       runInAction(() => (currentFile.action = "convert"));
@@ -556,7 +634,10 @@ class UploadDataStore {
       }
       return Promise.resolve();
     } else {
-      return this.throttleRefreshFiles(toFolderId);
+      if (currentFile.action === "uploaded") {
+        this.refreshFiles(currentFile);
+      }
+      return Promise.resolve();
     }
   };
 
@@ -646,6 +727,7 @@ class UploadDataStore {
     )
       .then((res) => {
         const location = res.data.location;
+        const path = res.data.path;
 
         const requestsDataArray = [];
 
@@ -659,9 +741,9 @@ class UploadDataStore {
           chunk++;
         }
 
-        return { location, requestsDataArray, fileSize };
+        return { location, requestsDataArray, fileSize, path };
       })
-      .then(({ location, requestsDataArray, fileSize }) => {
+      .then(({ location, requestsDataArray, fileSize, path }) => {
         this.primaryProgressDataStore.setPrimaryProgressBarData({
           icon: "upload",
           visible: true,
@@ -678,7 +760,7 @@ class UploadDataStore {
           fileSize,
           indexOfFile,
           file,
-          t
+          path
         );
       })
       .catch((err) => {