Web: Files: AutoBackup: Optimization modules.

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/consumer-storage-settings/AmazonSettings.js

@@ -3,9 +3,9 @@ import TextInput from "@appserver/components/text-input";
 
 const bucketInput = "bucket";
 const regionInput = "region";
-const urlInput = "serviceUrl";
+const urlInput = "serviceurl";
-const forcePathStyleInput = "forcePathStyle";
+const forcePathStyleInput = "forcepathstyle";
-const httpInput = "useHttp";
+const httpInput = "usehttp";
 const sseInput = "sse";
 class AmazonSettings extends React.Component {
   static formNames = () => {
@@ -80,7 +80,7 @@ class AmazonSettings extends React.Component {
           name={urlInput}
           className="backup_text-input"
           scale
-          value={formSettings.serviceUrl}
+          value={formSettings.serviceurl}
           onChange={onChange}
           isDisabled={isLoadingData || isLoading || this.isDisabled}
           placeholder={this.serviceUrlPlaceholder || ""}
@@ -90,7 +90,7 @@ class AmazonSettings extends React.Component {
           name={forcePathStyleInput}
           className="backup_text-input"
           scale
-          value={formSettings.forcePathStyle}
+          value={formSettings.forcepathstyle}
           onChange={onChange}
           isDisabled={isLoadingData || isLoading || this.isDisabled}
           placeholder={this.forcePathStylePlaceholder || ""}
@@ -100,7 +100,7 @@ class AmazonSettings extends React.Component {
           name={httpInput}
           className="backup_text-input"
           scale
-          value={formSettings.useHttp}
+          value={formSettings.usehttp}
           onChange={onChange}
           isDisabled={isLoadingData || isLoading || this.isDisabled}
           placeholder={this.useHttpPlaceholder || ""}

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/DocumentsModule.js

@@ -3,7 +3,7 @@ import { withTranslation } from "react-i18next";
 import SelectFolderInput from "files/SelectFolderInput";
 import ScheduleComponent from "./ScheduleComponent";
 
-class DocumentsModule extends React.Component {
+class DocumentsModule extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -30,7 +30,6 @@ class DocumentsModule extends React.Component {
       onSelectFolder,
       isError,
       isLoadingData,
-      onSetLoadingData,
       isReset,
       isThirdPartyDefault,
       defaultSelectedFolder,
@@ -47,7 +46,6 @@ class DocumentsModule extends React.Component {
           onClickInput={this.onClickInput}
           isPanelVisible={isPanelVisible}
           isError={isError}
-          onSetLoadingData={onSetLoadingData}
           foldersType="common"
           withoutProvider
           isSavingProcess={isLoadingData}

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/ThirdPartyModule.js

@@ -3,7 +3,7 @@ import { withTranslation } from "react-i18next";
 import SelectFolderInput from "files/SelectFolderInput";
 import ScheduleComponent from "./ScheduleComponent";
 
-class ThirdPartyModule extends React.Component {
+class ThirdPartyModule extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -30,7 +30,6 @@ class ThirdPartyModule extends React.Component {
       onSelectFolder,
       isError,
       isLoadingData,
-      onSetLoadingData,
       isReset,
       isThirdPartyDefault,
       defaultSelectedFolder,
@@ -47,7 +46,6 @@ class ThirdPartyModule extends React.Component {
           onClickInput={this.onClickInput}
           isPanelVisible={isPanelVisible}
           isError={isError}
-          onSetLoadingData={onSetLoadingData}
           foldersType="third-party"
           isSavingProcess={isLoadingData}
           id={passedId}

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/ThirdPartyStorageModule.js

@@ -14,6 +14,7 @@ let googleStorageId = ThirdPartyStorages.GoogleId;
 class ThirdPartyStorageModule extends React.PureComponent {
   constructor(props) {
     super(props);
+    const { storageInfo } = this.props;
 
     this.state = {
       availableOptions: [],
@@ -21,15 +22,18 @@ class ThirdPartyStorageModule extends React.PureComponent {
       selectedStorage: "",
       defaultSelectedStorage: "",
       selectedId: "",
-      isLoading: false,
     };
-  }
-  componentDidMount() {
-    const { storageInfo } = this.props;
 
     storageInfo && this.getOptions(storageInfo);
+    this._isMount = false;
+  }
+  componentDidMount() {
+    this._isMount = true;
   }
 
+  componentWillUnmount() {
+    this._isMount = false;
+  }
   componentDidUpdate(prevProps) {
     const { isSuccessSave, isReset, storageInfo } = this.props;
     const {
@@ -61,67 +65,86 @@ class ThirdPartyStorageModule extends React.PureComponent {
     let options = [];
     let availableStorage = {};
 
+    let newState = {};
+
     for (let item = 0; item < storageBackup.length; item++) {
-      let obj = {
+      const backupElem = storageBackup[item];
-        [storageBackup[item].id]: {
+
-          isSet: storageBackup[item].isSet,
+      const { isSet, properties, title, id, current } = backupElem;
-          properties: storageBackup[item].properties,
+
-          title: storageBackup[item].title,
+      let tempObj = {
-          id: storageBackup[item].id,
+        [id]: {
+          isSet: isSet,
+          properties: properties,
+          title: title,
+          id: id,
         },
       };
+
       let titleObj = {
-        key: storageBackup[item].id,
+        key: id,
-        label: storageBackup[item].title,
+        label: title,
         disabled: false,
       };
+
       options.push(titleObj);
+      availableStorage = { ...availableStorage, ...tempObj };
 
-      availableStorage = { ...availableStorage, ...obj };
+      if (current) {
-
-      if (storageBackup[item].current) {
         isSetDefaultIdStorage = true;
-        onSetStorageId(storageBackup[item].id);
+        onSetStorageId(id);
-        this.setState({
+
-          selectedStorage: storageBackup[item].title,
+        newState = {
-          defaultSelectedStorage: storageBackup[item].title,
+          selectedStorage: title,
-          selectedId: storageBackup[item].id,
+          defaultSelectedStorage: title,
-          defaultSelectedId: storageBackup[item].id,
+          selectedId: id,
-        });
+          defaultSelectedId: id,
+        };
       }
 
-      if (!isFirstSet && storageBackup[item].isSet) {
+      if (!isFirstSet && isSet) {
         isFirstSet = true;
-        firstSetId = storageBackup[item].id;
+        firstSetId = id;
       }
     }
 
     if (!isSetDefaultIdStorage && !isFirstSet) {
-      onSetStorageId(availableStorage[googleStorageId].id);
+      const currentStorage = availableStorage[googleStorageId];
-      this.setState({
+      const { id, title } = currentStorage;
-        selectedStorage: availableStorage[googleStorageId].title,
+
-        defaultSelectedStorage: availableStorage[googleStorageId].title,
+      onSetStorageId(id);
-        selectedId: availableStorage[googleStorageId].id,
+
-        defaultSelectedId: availableStorage[googleStorageId].id,
+      newState = {
-      });
+        selectedStorage: title,
+        defaultSelectedStorage: title,
+        selectedId: id,
+        defaultSelectedId: id,
+      };
     }
 
     if (!isSetDefaultIdStorage && isFirstSet) {
-      onSetStorageId(availableStorage[firstSetId].id);
+      const currentStorage = availableStorage[firstSetId];
+      const { id, title } = currentStorage;
 
-      this.setState({
+      onSetStorageId(id);
-        selectedStorage: availableStorage[firstSetId].title,
+
-        defaultSelectedStorage: availableStorage[firstSetId].title,
+      newState = {
-        selectedId: availableStorage[firstSetId].id,
+        selectedStorage: title,
-        defaultSelectedId: availableStorage[firstSetId].id,
+        defaultSelectedStorage: title,
-      });
+        selectedId: id,
+        defaultSelectedId: id,
+      };
     }
 
-    this.setState({
+    newState = {
+      ...newState,
       availableOptions: options,
       availableStorage: availableStorage,
-      isLoading: false,
+    };
-    });
+
+    this._isMount
+      ? this.setState({ ...newState })
+      : (this.state = { ...newState });
   };
 
   checkChanges = () => {
@@ -160,7 +183,6 @@ class ThirdPartyStorageModule extends React.PureComponent {
       availableOptions,
       availableStorage,
       selectedStorage,
-      isLoading,
       selectedId,
     } = this.state;
 
@@ -180,7 +202,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
             options={availableOptions}
             selectedOption={{ key: 0, label: selectedStorage }}
             onSelect={this.onSelect}
-            isDisabled={isLoadingData || isLoading}
+            isDisabled={isLoadingData}
             noBorder={false}
             scaled
             scaledOptions
@@ -188,19 +210,19 @@ class ThirdPartyStorageModule extends React.PureComponent {
             className="backup_combo"
           />
 
-          {selectedId === GoogleId && !isLoading && (
+          {selectedId === GoogleId && (
             <GoogleCloudStorage {...rest} {...commonProps} />
           )}
 
-          {selectedId === RackspaceId && !isLoading && (
+          {selectedId === RackspaceId && (
             <RackspaceStorage {...rest} {...commonProps} />
           )}
 
-          {selectedId === SelectelId && !isLoading && (
+          {selectedId === SelectelId && (
             <SelectelStorage {...rest} {...commonProps} />
           )}
 
-          {selectedId === AmazonId && !isLoading && (
+          {selectedId === AmazonId && (
             <AmazonStorage {...rest} {...commonProps} />
           )}
         </div>