From 2b24f2585f6b87f4ec8e552f934f770ccf308037 Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Wed, 21 Jun 2023 23:15:38 +0200
Subject: [PATCH] optimize restart using alova lib

---
 interface/package.json                        |  1 +
 .../src/framework/system/RestartMonitor.tsx   | 39 +++++++------------
 interface/yarn.lock                           |  8 ++++
 3 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/interface/package.json b/interface/package.json
index 00737d839..264071a9e 100644
--- a/interface/package.json
+++ b/interface/package.json
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@alova/adapter-xhr": "^1.0.0",
+    "@alova/scene-react": "^1.1.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
diff --git a/interface/src/framework/system/RestartMonitor.tsx b/interface/src/framework/system/RestartMonitor.tsx
index c7112a244..0ab20debb 100644
--- a/interface/src/framework/system/RestartMonitor.tsx
+++ b/interface/src/framework/system/RestartMonitor.tsx
@@ -1,5 +1,5 @@
-import { useRequest } from 'alova';
-import { useRef, useState, useEffect } from 'react';
+import { useRetriableRequest } from '@alova/scene-react';
+import { useState } from 'react';
 import type { FC } from 'react';
 
 import * as SystemApi from 'api/system';
@@ -7,39 +7,26 @@ import { FormLoader } from 'components';
 
 import { useI18nContext } from 'i18n/i18n-react';
 
-const RESTART_TIMEOUT = 2 * 60 * 1000;
-const POLL_INTERVAL = 5000;
-
 const RestartMonitor: FC = () => {
   const [failed, setFailed] = useState<boolean>(false);
-  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
 
   const { LL } = useI18nContext();
 
-  const { send: readSystemStatus } = useRequest(SystemApi.readSystemStatus(), {
-    force: true,
-    immediate: false
-  });
-
-  const timeoutAt = useRef(new Date().getTime() + RESTART_TIMEOUT);
-  const poll = useRef(async () => {
-    try {
-      await readSystemStatus();
-      document.location.href = '/fileUpdated';
-    } catch (error) {
-      if (new Date().getTime() < timeoutAt.current) {
-        setTimeoutId(setTimeout(poll.current, POLL_INTERVAL));
-      } else {
-        setFailed(true);
-      }
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { onFail, onSuccess } = useRetriableRequest(SystemApi.readSystemStatus(), {
+    retry: 10,
+    backoff: {
+      delay: 1500
     }
   });
 
-  useEffect(() => {
-    void poll.current();
-  }, []);
+  onFail(() => {
+    setFailed(true);
+  });
 
-  useEffect(() => () => timeoutId && clearTimeout(timeoutId), [timeoutId]);
+  onSuccess(() => {
+    document.location.href = '/fileUpdated';
+  });
 
   return <FormLoader message={LL.APPLICATION_RESTARTING() + '...'} errorMessage={failed ? 'Timed out' : undefined} />;
 };
diff --git a/interface/yarn.lock b/interface/yarn.lock
index e6a1587ea..b3437dcf9 100644
--- a/interface/yarn.lock
+++ b/interface/yarn.lock
@@ -12,6 +12,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@alova/scene-react@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@alova/scene-react@npm:1.1.0"
+  checksum: e1b956a5ea1f0b93f7e60896bb43aa124106e7b527dbdcd77cf200975b2b403240a91c050a43d43c083941f91f106d50ceb91dc0ef0a97feabd91a3945568b43
+  languageName: node
+  linkType: hard
+
 "@ampproject/remapping@npm:^2.2.0":
   version: 2.2.0
   resolution: "@ampproject/remapping@npm:2.2.0"
@@ -1530,6 +1537,7 @@ __metadata:
   resolution: "EMS-ESP@workspace:."
   dependencies:
     "@alova/adapter-xhr": ^1.0.0
+    "@alova/scene-react": ^1.1.0
     "@emotion/react": ^11.11.1
     "@emotion/styled": ^11.11.0
     "@mui/icons-material": ^5.11.16