Web: PreparationPortal: Refactoring.

packages/client/src/pages/PreparationPortal/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import ErrorContainer from "@docspace/common/components/ErrorContainer";
 import { withTranslation } from "react-i18next";
 
@@ -14,20 +14,123 @@ const unSizeMultiplicationFactor = 3;
 const baseFirstMultiplicationFactor = 700;
 const baseSecondMultiplicationFactor = 400;
 const baseThirdMultiplicationFactor = 180;
+const firstBound = 10,
+  secondBound = 63;
 
-class PreparationPortal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      percent: 0,
-      errorMessage: "",
-      firstBound: 10,
-      secondBound: 63,
-    };
-    this.timerId = null;
-    this.progressTimerId = null;
-  }
-  async componentDidMount() {
+let timerId = null,
+  progressTimerId = null;
+
+const PreparationPortal = (props) => {
+  const { multiplicationFactor, t, withoutHeader, style } = props;
+
+  const [percent, setPercent] = useState(0);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const clearAllIntervals = () => {
+    clearInterval(timerId);
+    clearInterval(progressTimerId);
+
+    progressTimerId = null;
+    timerId = null;
+  };
+
+  const returnToPortal = () => {
+    setTimeout(() => {
+      window.location.replace("/");
+    }, 5000);
+  };
+
+  const progressInitiationFirstBound = () => {
+    let progress = percent;
+
+    const delay = baseFirstMultiplicationFactor * multiplicationFactor;
+
+    if (progressTimerId) return;
+    progressTimerId = setInterval(() => {
+      progress += 1;
+
+      if (progress !== firstBound) percent < progress && setPercent(progress);
+      else {
+        clearInterval(progressTimerId);
+        progressTimerId = null;
+      }
+    }, delay);
+  };
+
+  const progressInitiationSecondBound = () => {
+    let progress = percent;
+
+    const delay = baseSecondMultiplicationFactor * multiplicationFactor;
+
+    if (progressTimerId) return;
+    progressTimerId = setInterval(() => {
+      progress += 1;
+      if (progress !== secondBound) percent < progress && setPercent(progress);
+      else {
+        clearInterval(progressTimerId);
+        progressTimerId = null;
+      }
+    }, delay);
+  };
+
+  const progressInitiationThirdBound = () => {
+    let progress = percent;
+    const delay = baseThirdMultiplicationFactor * multiplicationFactor;
+
+    if (progressTimerId) return;
+
+    progressTimerId = setInterval(() => {
+      progress += 1;
+
+      if (progress < 98) percent < progress && setPercent(progress);
+      else {
+        clearInterval(progressTimerId);
+        progressTimerId = null;
+      }
+    }, delay);
+  };
+
+  const getIntervalProgress = async () => {
+    try {
+      const response = await getRestoreProgress();
+
+      if (response.error) {
+        clearInterval(timerId);
+        clearInterval(progressTimerId);
+
+        progressTimerId = null;
+        timerId = null;
+        setErrorMessage(response.error);
+
+        return;
+      }
+
+      const percentProgress = response.progress;
+
+      if (percentProgress !== percent && percent < percentProgress) {
+        setPercent(percentProgress);
+
+        clearInterval(progressTimerId);
+        progressTimerId = null;
+
+        if (percentProgress < secondBound) {
+          progressInitiationSecondBound();
+        } else {
+          progressInitiationThirdBound();
+        }
+      }
+
+      if (percentProgress === 100) {
+        clearAllIntervals();
+        returnToPortal();
+      }
+    } catch (error) {
+      clearAllIntervals();
+      setErrorMessage(error);
+    }
+  };
+
+  const getRecoveryProgress = async () => {
     const errorMessage = (error) => {
       if (typeof error !== "object") return error;
 
@@ -43,204 +146,76 @@ class PreparationPortal extends React.Component {
       const response = await getRestoreProgress();
 
       if (!response) {
-        setTimeout(() => {
-          window.location.replace("/");
-        }, 5000);
-
+        setErrorMessage(t("Common:ErrorInternalServer"));
         return;
       }
 
       if (response.error) {
-        this.setState({
-          errorMessage: response.error,
-        });
+        setErrorMessage(response.error);
 
         return;
       }
 
       if (response.progress === 100) {
-        this.setState({
-          percent: 100,
-        });
+        setPercent(100);
+        returnToPortal();
       } else {
-        this.timerId = setInterval(() => this.getProgress(), 1000);
-        this.progressInitiationFirstBound();
+        timerId = setInterval(() => getIntervalProgress(), 1000);
+        progressInitiationFirstBound();
       }
     } catch (err) {
-      this.setState({
-        errorMessage: errorMessage(err),
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.timerId);
-    clearInterval(this.progressTimerId);
-  }
-
-  progressInitiationFirstBound = () => {
-    const { multiplicationFactor } = this.props;
-    const { percent, firstBound } = this.state;
-
-    let progress = percent;
-
-    const common = baseFirstMultiplicationFactor * multiplicationFactor;
-
-    if (!this.progressTimerId)
-      this.progressTimerId = setInterval(() => {
-        progress += 1;
-        if (progress !== firstBound && percent < progress)
-          percent < progress &&
-            this.setState({
-              percent: progress,
-            });
-        else {
-          clearInterval(this.progressTimerId);
-          this.progressTimerId = null;
-        }
-      }, common);
-  };
-  progressInitiationSecondBound = () => {
-    const { multiplicationFactor } = this.props;
-    const { percent, secondBound } = this.state;
-
-    let progress = percent;
-
-    const common = baseSecondMultiplicationFactor * multiplicationFactor;
-
-    if (!this.progressTimerId)
-      this.progressTimerId = setInterval(() => {
-        progress += 1;
-        if (progress !== secondBound)
-          percent < progress &&
-            this.setState({
-              percent: progress,
-            });
-        else {
-          clearInterval(this.progressTimerId);
-          this.progressTimerId = null;
-        }
-      }, common);
-  };
-
-  progressInitiationThirdBound = () => {
-    const { multiplicationFactor } = this.props;
-    const { percent } = this.state;
-    let progress = percent;
-    const common = baseThirdMultiplicationFactor * multiplicationFactor;
-    if (!this.progressTimerId)
-      this.progressTimerId = setInterval(() => {
-        progress += 1;
-
-        if (progress < 98)
-          percent < progress &&
-            this.setState({
-              percent: progress,
-            });
-        else {
-          clearInterval(this.progressTimerId);
-          this.progressTimerId = null;
-        }
-      }, common);
-  };
-  getProgress = async () => {
-    const { secondBound } = this.state;
-    try {
-      const response = await getRestoreProgress();
-
-      if (response.error) {
-        clearInterval(this.timerId);
-        clearInterval(this.progressTimerId);
-
-        this.progressTimerId = null;
-        this.timerId = null;
-
-        this.setState({
-          errorMessage: response.error,
-        });
-
-        return;
-      }
-
-      const percentProgress = response.progress;
-
-      percentProgress !== this.state.percent &&
-        this.state.percent < percentProgress &&
-        this.setState(
-          {
-            percent: percentProgress,
-          },
-          () => {
-            clearInterval(this.progressTimerId);
-            this.progressTimerId = null;
-
-            if (percentProgress < secondBound) {
-              this.progressInitiationSecondBound();
-            } else {
-              this.progressInitiationThirdBound();
-            }
-          }
-        );
-
-      if (percentProgress === 100) {
-        clearInterval(this.timerId);
-        clearInterval(this.progressTimerId);
-
-        this.progressTimerId = null;
-        this.timerId = null;
-      }
-    } catch (e) {
-      clearInterval(this.timerId);
-      clearInterval(this.progressTimerId);
-
-      this.progressTimerId = null;
-      this.timerId = null;
-
-      this.setState({
-        percent: 100,
-      });
+      setErrorMessage(errorMessage(err));
     }
   };
-  render() {
-    const { t, withoutHeader, style } = this.props;
-    const { percent, errorMessage } = this.state;
+  useEffect(async () => {
+    setTimeout(() => {
+      getRecoveryProgress();
+    }, 4000);
 
-    return (
-      <StyledPreparationPortal>
-        <ErrorContainer
-          headerText={withoutHeader ? "" : t("Common:PreparationPortalTitle")}
-          style={style}
+    return () => {
+      clearAllIntervals();
+    };
+  }, []);
+
+  const headerText = errorMessage
+    ? t("Common:Error")
+    : t("Common:PreparationPortalTitle");
+
+  return (
+    <StyledPreparationPortal>
+      <ErrorContainer
+        headerText={withoutHeader ? "" : headerText}
+        style={style}
+      >
+        <ColorTheme
+          themeId={ThemeType.Progress}
+          percent={percent}
+          errorMessage={errorMessage}
+          className="preparation-portal_body-wrapper"
         >
-          <ColorTheme
-            themeId={ThemeType.Progress}
-            percent={percent}
-            errorMessage={errorMessage}
-            className="preparation-portal_body-wrapper"
-          >
-            {errorMessage ? (
-              <Text
-                className="preparation-portal_error"
-                color="#F21C0E"
-              >{`${errorMessage}`}</Text>
-            ) : (
-              <>
-                <div className="preparation-portal_progress">
-                  <div className="preparation-portal_progress-bar">
-                    <div className="preparation-portal_progress-line"></div>
-                  </div>
-                  <Text className="preparation-portal_percent">{`${percent} %`}</Text>
+          {errorMessage ? (
+            <Text
+              className="preparation-portal_error"
+              color="#F21C0E"
+            >{`${errorMessage}`}</Text>
+          ) : (
+            <>
+              <div className="preparation-portal_progress">
+                <div className="preparation-portal_progress-bar">
+                  <div className="preparation-portal_progress-line"></div>
                 </div>
-                <Text className="preparation-portal_text">
-                  {t("PreparationPortalDescription")}
-                </Text>
-              </>
-            )}
-          </ColorTheme>
-        </ErrorContainer>
-      </StyledPreparationPortal>
-    );
-  }
-}
+                <Text className="preparation-portal_percent">{`${percent} %`}</Text>
+              </div>
+              <Text className="preparation-portal_text">
+                {t("PreparationPortalDescription")}
+              </Text>
+            </>
+          )}
+        </ColorTheme>
+      </ErrorContainer>
+    </StyledPreparationPortal>
+  );
+};
 
 const PreparationPortalWrapper = inject(({ backup }) => {
   const { backupSize } = backup;

packages/common/components/StyledBodyPreparationPortal/index.js

@@ -8,6 +8,9 @@ const StyledBodyPreparationPortal = styled.div`
   box-sizing: border-box;
   align-items: center;
 
+  .preparation-portal_error {
+    text-align: center;
+  }
   .preparation-portal_progress {
     display: flex;
     margin-bottom: 16px;