Web: files: Code simplification.

2022-02-09 17:25:40 +03:00 · 2022-02-09 17:25:40 +03:00 · f8a748aae3
commit f8a748aae3
parent e8c2ce8294
7 changed files with 58 additions and 299 deletions
--- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js
+++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js
@ -38,6 +38,7 @@ class SelectFileDialogModalView extends React.Component {
      onSelectFolder,
      selectedFolder,
      passedId,
+      foldersList,
    } = this.props;
    switch (foldersType) {
      case "exceptSortedByTags":
@ -96,7 +97,9 @@ class SelectFileDialogModalView extends React.Component {
        break;
      case "third-party":
        try {
-          this.folderList = await SelectFolderDialog.getCommonThirdPartyList();
+          this.folderList = foldersList
+            ? foldersList
+            : await SelectFolderDialog.getCommonThirdPartyList();
          this.folderList.length !== 0
            ? this.onSetSelectedFolder()
            : this.setState({ isAvailable: false });
--- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/index.js
+++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/index.js
@ -265,6 +265,7 @@ class SelectFileDialogBody extends React.Component {
      onSetFileName,
      tReady,
      headerName,
+      foldersList,
    } = this.props;
    const {
      isVisible,
@ -337,6 +338,7 @@ class SelectFileDialogBody extends React.Component {
        passedId={passedId}
        titleFilesList={titleFilesList}
        primaryButtonName={this.buttonName}
+        foldersList={foldersList}
      />
    );
  }
--- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/modalView.js
+++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/modalView.js
@ -1,261 +0,0 @@
-import React from "react";
-import { StyledAsidePanel, StyledSelectFilePanel } from "../StyledPanels";
-import ModalDialog from "@appserver/components/modal-dialog";
-import SelectFolderDialog from "../SelectFolderDialog";
-import FolderTreeBody from "../../FolderTreeBody";
-import FilesListBody from "./FilesListBody";
-import Button from "@appserver/components/button";
-import Text from "@appserver/components/text";
-import { isArrayEqual } from "@appserver/components/utils/array";
-import { getFoldersTree } from "@appserver/common/api/files";
-import {
-  exceptSortedByTagsFolders,
-  exceptPrivacyTrashFolders,
-} from "../SelectFolderDialog/ExceptionFoldersConstants";
-
-class SelectFileDialogModalView extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isLoading: true,
-      isAvailable: true,
-    };
-    this.folderList = "";
-    this.noTreeSwitcher = false;
-  }
-
-  componentDidMount() {
-    const { onSetLoadingData } = this.props;
-    this.setState({ isLoadingData: true }, function () {
-      onSetLoadingData && onSetLoadingData(true);
-
-      this.trySwitch();
-    });
-  }
-  trySwitch = async () => {
-    const {
-      foldersType,
-      onSelectFolder,
-      selectedFolder,
-      passedId,
-    } = this.props;
-    switch (foldersType) {
-      case "exceptSortedByTags":
-        try {
-          const foldersTree = await getFoldersTree();
-          [
-            this.folderList,
-            this.noTreeSwitcher,
-          ] = SelectFolderDialog.convertFolders(
-            foldersTree,
-            exceptSortedByTagsFolders
-          );
-          this.onSetSelectedFolder();
-        } catch (err) {
-          console.error(err);
-        }
-
-        this.loadersCompletes();
-        break;
-      case "exceptPrivacyTrashFolders":
-        try {
-          const foldersTree = await getFoldersTree();
-          [
-            this.folderList,
-            this.noTreeSwitcher,
-          ] = SelectFolderDialog.convertFolders(
-            foldersTree,
-            exceptPrivacyTrashFolders
-          );
-          this.onSetSelectedFolder();
-        } catch (err) {
-          console.error(err);
-        }
-        this.loadersCompletes();
-        break;
-      case "common":
-        try {
-          this.folderList = await SelectFolderDialog.getCommonFolders();
-
-          !selectedFolder &&
-            onSelectFolder &&
-            onSelectFolder(
-              `${
-                selectedFolder
-                  ? selectedFolder
-                  : passedId
-                  ? passedId
-                  : this.folderList[0].id
-              }`
-            );
-        } catch (err) {
-          console.error(err);
-        }
-
-        this.loadersCompletes();
-        break;
-      case "third-party":
-        try {
-          this.folderList = await SelectFolderDialog.getCommonThirdPartyList();
-          this.folderList.length !== 0
-            ? this.onSetSelectedFolder()
-            : this.setState({ isAvailable: false });
-        } catch (err) {
-          console.error(err);
-        }
-
-        this.loadersCompletes();
-        break;
-    }
-  };
-
-  loadersCompletes = () => {
-    const { onSetLoadingData } = this.props;
-    onSetLoadingData && onSetLoadingData(false);
-
-    this.setState({
-      isLoading: false,
-    });
-  };
-
-  onSetSelectedFolder = () => {
-    const { onSelectFolder, selectedFolder, passedId } = this.props;
-
-    onSelectFolder &&
-      onSelectFolder(
-        `${
-          selectedFolder
-            ? selectedFolder
-            : passedId
-            ? passedId
-            : this.folderList[0].id
-        }`
-      );
-  };
-  onSelect = (folder) => {
-    const { onSelectFolder, selectedFolder } = this.props;
-
-    if (isArrayEqual([folder[0]], [selectedFolder])) {
-      return;
-    }
-
-    onSelectFolder && onSelectFolder(folder[0]);
-  };
-  render() {
-    const {
-      t,
-      isPanelVisible,
-      onClose,
-      zIndex,
-      withoutProvider,
-      expandedKeys,
-      filter,
-      onSelectFile,
-      filesList,
-      hasNextPage,
-      isNextPageLoading,
-      loadNextPage,
-      selectedFolder,
-      titleFilesList,
-      loadingText,
-      selectedFile,
-      onClickSave,
-      headerName,
-      primaryButtonName,
-    } = this.props;
-
-    const { isLoading, isAvailable } = this.state;
-
-    const isHeaderChildren = !!titleFilesList;
-
-    return (
-      <StyledAsidePanel visible={isPanelVisible}>
-        <ModalDialog
-          visible={isPanelVisible}
-          zIndex={zIndex}
-          onClose={onClose}
-          className="select-file-modal-dialog"
-          style={{ maxWidth: "725px" }}
-          displayType="modal"
-          modalBodyPadding="0px"
-          isLoading={isLoading}
-          modalLoaderBodyHeight="277px"
-        >
-          <ModalDialog.Header>
-            {headerName ? headerName : t("SelectFile")}
-          </ModalDialog.Header>
-          <ModalDialog.Body className="select-file_body-modal-dialog">
-            <StyledSelectFilePanel
-              isHeaderChildren={isHeaderChildren}
-              displayType="modal"
-              noTreeSwitcher={this.noTreeSwitcher}
-            >
-              <div className="modal-dialog_body">
-                <div className="modal-dialog_tree-body">
-                  <FolderTreeBody
-                    expandedKeys={expandedKeys}
-                    folderList={this.folderList}
-                    onSelect={this.onSelect}
-                    withoutProvider={withoutProvider}
-                    certainFolders
-                    isAvailable={isAvailable}
-                    filter={filter}
-                    selectedKeys={[selectedFolder]}
-                    isHeaderChildren={isHeaderChildren}
-                    displayType="modal"
-                  />
-                </div>
-                <div className="modal-dialog_files-body">
-                  <>
-                    {titleFilesList && (
-                      <Text className="modal-dialog-filter-title">
-                        {titleFilesList}
-                      </Text>
-                    )}
-                    {selectedFolder && (
-                      <FilesListBody
-                        filesList={filesList}
-                        onSelectFile={onSelectFile}
-                        hasNextPage={hasNextPage}
-                        isNextPageLoading={isNextPageLoading}
-                        loadNextPage={loadNextPage}
-                        selectedFolder={selectedFolder}
-                        loadingText={loadingText}
-                        selectedFile={selectedFile}
-                        listHeight={isHeaderChildren ? 260 : 303}
-                        onSetLoadingData={this.onSetLoadingData}
-                        displayType={"modal"}
-                      />
-                    )}
-                  </>
-                </div>
-              </div>
-            </StyledSelectFilePanel>
-          </ModalDialog.Body>
-          <ModalDialog.Footer>
-            <StyledSelectFilePanel isHeaderChildren={isHeaderChildren}>
-              <div className="select-file-dialog-modal_buttons">
-                <Button
-                  className="select-file-modal-dialog-buttons-save"
-                  primary
-                  size="medium"
-                  label={primaryButtonName}
-                  onClick={onClickSave}
-                  isDisabled={selectedFile.length === 0}
-                />
-                <Button
-                  className="modal-dialog-button"
-                  size="medium"
-                  label={t("Common:CancelButton")}
-                  onClick={onClose}
-                />
-              </div>
-            </StyledSelectFilePanel>
-          </ModalDialog.Footer>
-        </ModalDialog>
-      </StyledAsidePanel>
-    );
-  }
-}
-
-export default SelectFileDialogModalView;
--- a/products/ASC.Files/Client/src/components/panels/SelectFileInput/index.js
+++ b/products/ASC.Files/Client/src/components/panels/SelectFileInput/index.js
@ -51,6 +51,7 @@ class SelectFileInputBody extends React.PureComponent {
      zIndex,
      fontSizeInput,
      maxInputWidth,
+      foldersList,
    } = this.props;
    const { fileName } = this.state;

@ -88,6 +89,7 @@ class SelectFileInputBody extends React.PureComponent {
            isMediaOnly={isMediaOnly}
            loadingLabel={loadingLabel}
            titleFilesList={titleFilesList}
+            foldersList={foldersList}
          />
        )}
      </StyledComponent>
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/ManualBackup.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/ManualBackup.js
@ -15,7 +15,6 @@ import { StyledModules, StyledManualBackup } from "./StyledBackup";
 import SelectFolderDialog from "files/SelectFolderDialog";
 import Loader from "@appserver/components/loader";
 import { saveToSessionStorage, getFromSessionStorage } from "../../utils";
-import { inject, observer } from "mobx-react";

 let selectedStorageType = "";

@ -138,7 +137,7 @@ class ManualBackup extends React.Component {
          downloadingProgress: 1,
        })
      )
-      .then(() => this.setIntervalProcess())
+      .then(() => !this.timerId && this.setIntervalProcess())
      .catch((err) => console.error(err));
  };

@ -187,6 +186,8 @@ class ManualBackup extends React.Component {
            this.setState({
              downloadingProgress: progress,
            });
+        } else {
+          clearInterval(this.timerId);
        }
      })
      .catch((err) => {
@ -274,7 +275,7 @@ class ManualBackup extends React.Component {

    try {
      await startBackup(moduleType, storageParams);
-      this.setIntervalProcess();
+      !this.timerId && this.setIntervalProcess();
    } catch (err) {
      toastr.error(`${t("CopyingError")}`);
      console.error(err);
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/RestoreBackup.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/RestoreBackup.js
@ -38,11 +38,9 @@ class RestoreBackup extends React.Component {
      isCheckedLocalFile: false,
      selectedFileId: "",
      selectedFile: "",
-      formSettings: {},
      isErrors: {},
-      isCopyingToLocal: false,
      downloadingProgress: 100,
-      isLoading: true,
+      isInitialLoading: true,
    };

    this._isMounted = false;
@ -59,24 +57,38 @@ class RestoreBackup extends React.Component {
    this.formSettings = "";
  }

-  componentDidMount() {
-    this._isMounted = true;
+  checkDownloadingProgress = async () => {
+    try {
+      const [commonThirdPartyList, backupProgress] = await Promise.all([
+        SelectFolderDialog.getCommonThirdPartyList(),
+        getBackupProgress(),
+      ]);
+
+      this.commonThirdPartyList = commonThirdPartyList;
+
+      if (backupProgress && !backupProgress.error) {
+        if (backupProgress.progress !== 100) {
+          this._isMounted &&
+            this.setState({
+              downloadingProgress: backupProgress.progress,
+            });

-    getBackupProgress().then((response) => {
-      if (response) {
-        if (!response.error && response.progress !== 100) {
          this.timerId = setInterval(() => this.getProgress(), 1000);
        }
      }
-    });
+    } catch (error) {
+      console.error(error);
+    }

-    SelectFolderDialog.getCommonThirdPartyList()
-      .then((thirdPartyArray) => (this.commonThirdPartyList = thirdPartyArray))
-      .finally(() =>
-        this.setState({
-          isLoading: false,
-        })
-      );
+    this.setState({
+      isInitialLoading: false,
+    });
+  };
+
+  componentDidMount() {
+    this._isMounted = true;
+
+    this.checkDownloadingProgress();
  }

  componentWillUnmount() {
@ -95,28 +107,29 @@ class RestoreBackup extends React.Component {
            console.log("error", res.error);
            this.timerId = null;
            this.setState({
-              isCopyingToLocal: false,
              downloadingProgress: 100,
            });
            return;
          }
-          if (this._isMounted) {
+
+          this._isMounted &&
            this.setState({
              downloadingProgress: res.progress,
            });
-          }
+
          if (res.progress === 100) {
            clearInterval(this.timerId);

            this.timerId && toastr.success(`${t("SuccessCopied")}`);
            this.timerId = null;
-            if (this._isMounted) {
+
+            this._isMounted &&
              this.setState({
-                isCopyingToLocal: false,
                downloadingProgress: 100,
              });
-            }
          }
+        } else {
+          clearInterval(this.timerId);
        }
      })
      .catch((err) => {
@ -124,12 +137,11 @@ class RestoreBackup extends React.Component {
        timerId && toastr.error(err);
        console.log("err", err);
        timerId = null;
-        if (this._isMounted) {
+
+        this._isMounted &&
          this.setState({
            downloadingProgress: 100,
-            isCopyingToLocal: false,
          });
-        }
      });
  };

@ -371,7 +383,7 @@ class RestoreBackup extends React.Component {
    const { t, history } = this.props;
    const {
      isChecked,
-      isLoading,
+      isInitialLoading,
      isNotify,
      isVisibleDialog,
      isPanelVisible,
@ -379,11 +391,8 @@ class RestoreBackup extends React.Component {
      isCheckedThirdParty,
      isCheckedThirdPartyStorage,
      isCheckedLocalFile,
-      formSettings,
      isErrors,
-      isCopyingToLocal,
      downloadingProgress,
-      storageId,
    } = this.state;

    const commonRadioButtonProps = {
@ -396,8 +405,11 @@ class RestoreBackup extends React.Component {

    const isDisabledThirdParty =
      this.commonThirdPartyList && this.commonThirdPartyList.length === 0;
+
+    const isMaxProgress = downloadingProgress === 100;
+
    console.log("render restore backup ", this.state, this.props);
-    return isLoading ? (
+    return isInitialLoading ? (
      <Loader className="pageLoader" type="rombs" size="40px" />
    ) : (
      <StyledRestoreBackup>
@ -453,6 +465,7 @@ class RestoreBackup extends React.Component {
          )}
          {isCheckedThirdParty && (
            <ThirdPartyResources
+              foldersList={this.commonThirdPartyList}
              isPanelVisible={isPanelVisible}
              onClose={this.onPanelClose}
              onClickInput={this.onClickInput}
@ -481,10 +494,9 @@ class RestoreBackup extends React.Component {
          <BackupListModalDialog
            t={t}
            isVisibleDialog={isVisibleDialog}
-            isLoading={isLoading}
            onModalClose={this.onModalClose}
            isNotify={isNotify}
-            isCopyingToLocal={isCopyingToLocal}
+            isCopyingToLocal={!isMaxProgress}
            history={history}
          />
        )}
@ -519,7 +531,7 @@ class RestoreBackup extends React.Component {
          label={t("RestoreButton")}
          onClick={this.onRestoreClick}
          primary
-          isDisabled={isCopyingToLocal || !isChecked}
+          isDisabled={!isMaxProgress || !isChecked}
          size="medium"
          tabIndex={10}
        />
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/StyledBackup.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/StyledBackup.js
@ -44,7 +44,7 @@ const commonStyles = css`
  }
  .select-folder_file-input {
    margin-left: 24px;
-    margin-top: 16px;
+    margin-top: 16px !important;
  }
 `;