refactored restart and format services to be non-blocking

interface/src/app/settings/ApplicationSettings.tsx

@@ -16,7 +16,7 @@ import {
 } from '@mui/material';
 import Grid from '@mui/material/Grid2';
 
-import { readHardwareStatus, restart } from 'api/system';
+import { readHardwareStatus } from 'api/system';
 
 import { useRequest } from 'alova/client';
 import RestartMonitor from 'app/status/RestartMonitor';
@@ -35,9 +35,9 @@ import { useI18nContext } from 'i18n/i18n-react';
 import { numberValue, updateValueDirty, useRest } from 'utils';
 import { validate } from 'validators';
 
-import { getBoardProfile, readSettings, writeSettings } from '../../api/app';
+import { API, getBoardProfile, readSettings, writeSettings } from '../../api/app';
 import { BOARD_PROFILES } from '../main/types';
-import type { Settings } from '../main/types';
+import type { APIcall, Settings } from '../main/types';
 import { createSettingsValidator } from '../main/validators';
 
 export function boardProfileSelectItems() {
@@ -80,6 +80,10 @@ const ApplicationSettings = () => {
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
+  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
+    immediate: false
+  });
+
   const { loading: processingBoard, send: readBoardProfile } = useRequest(
     (boardProfile: string) => getBoardProfile(boardProfile),
     {
@@ -102,9 +106,14 @@ const ApplicationSettings = () => {
     });
   });
 
-  const { send: restartCommand } = useRequest(restart(), {
-    immediate: false
-  });
+  const doRestart = async () => {
+    setRestarting(true);
+    await sendAPI({ device: 'system', cmd: 'restart', id: -1 }).catch(
+      (error: Error) => {
+        toast.error(error.message);
+      }
+    );
+  };
 
   const updateBoardProfile = async (board_profile: string) => {
     await readBoardProfile(board_profile).catch((error: Error) => {
@@ -158,10 +167,7 @@ const ApplicationSettings = () => {
 
     const restart = async () => {
       await validateAndSubmit();
-      await restartCommand().catch((error: Error) => {
-        toast.error(error.message);
-      });
-      setRestarting(true);
+      await doRestart();
     };
 
     return (
@@ -204,7 +210,7 @@ const ApplicationSettings = () => {
           label={LL.ENABLE_MODBUS()}
         />
         {data.modbus_enabled && (
-          <Grid container spacing={1} rowSpacing={0}>
+          <Grid container spacing={2} rowSpacing={0}>
             <Grid>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
@@ -258,7 +264,7 @@ const ApplicationSettings = () => {
           label={LL.ENABLE_SYSLOG()}
         />
         {data.syslog_enabled && (
-          <Grid container spacing={1} rowSpacing={0}>
+          <Grid container spacing={2} rowSpacing={0}>
             <Grid>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
@@ -351,7 +357,7 @@ const ApplicationSettings = () => {
         <Typography sx={{ pb: 1, pt: 2 }} variant="h6" color="primary">
           {LL.FORMATTING_OPTIONS()}
         </Typography>
-        <Grid container spacing={1}>
+        <Grid container spacing={2}>
           <Grid size={3}>
             <TextField
               name="locale"
@@ -469,7 +475,7 @@ const ApplicationSettings = () => {
         </TextField>
         {data.board_profile === 'CUSTOM' && (
           <>
-            <Grid container spacing={1} rowSpacing={0}>
+            <Grid container spacing={2} rowSpacing={0}>
               <Grid>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
@@ -555,7 +561,7 @@ const ApplicationSettings = () => {
               </Grid>
             </Grid>
             {data.phy_type !== 0 && (
-              <Grid container spacing={1} rowSpacing={0}>
+              <Grid container spacing={2} rowSpacing={0}>
                 <Grid>
                   <TextField
                     name="eth_power"
@@ -601,7 +607,7 @@ const ApplicationSettings = () => {
             )}
           </>
         )}
-        <Grid container spacing={1} rowSpacing={0}>
+        <Grid container spacing={2} rowSpacing={0}>
           <Grid>
             <TextField
               name="tx_mode"
@@ -717,7 +723,7 @@ const ApplicationSettings = () => {
             />
           </Box>
         )}
-        <Grid container spacing={1} rowSpacing={0}>
+        <Grid container spacing={2} rowSpacing={0}>
           <BlockFormControlLabel
             control={
               <Checkbox
@@ -740,7 +746,7 @@ const ApplicationSettings = () => {
             disabled={!data.shower_timer}
           />
         </Grid>
-        <Grid container spacing={1} rowSpacing={2} sx={{ pt: 2 }}>
+        <Grid container spacing={2} sx={{ pt: 2 }}>
           {data.shower_timer && (
             <Grid>
               <ValidatedTextField

interface/src/app/settings/DownloadUpload.tsx

@@ -28,7 +28,6 @@ import {
   checkUpgrade,
   getDevVersion,
   getStableVersion,
-  restart,
   uploadURL
 } from 'api/system';
 
@@ -76,7 +75,11 @@ const DownloadUpload = () => {
     saveFile(event.data, 'schedule.json');
   });
 
-  const { send: getAPI } = useRequest((data: APIcall) => API(data), {
+  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
+    immediate: false
+  });
+
+  const { send: sendAPIandSave } = useRequest((data: APIcall) => API(data), {
     immediate: false
   }).onSuccess((event) => {
     saveFile(
@@ -98,15 +101,13 @@ const DownloadUpload = () => {
     }
   );
 
-  const { send: restartCommand } = useRequest(restart(), {
-    immediate: false
-  });
-
-  const callRestart = async () => {
+  const doRestart = async () => {
     setRestarting(true);
-    await restartCommand().catch((error: Error) => {
-      toast.error(error.message);
-    });
+    await sendAPI({ device: 'system', cmd: 'restart', id: -1 }).catch(
+      (error: Error) => {
+        toast.error(error.message);
+      }
+    );
   };
 
   const { send: sendCheckUpgrade } = useRequest(checkUpgrade, {
@@ -200,8 +201,8 @@ const DownloadUpload = () => {
     });
   };
 
-  const callAPI = async (device: string, entity: string) => {
-    await getAPI({ device, entity, id: 0 }).catch((error: Error) => {
+  const callAPIandSave = async (device: string, cmd: string) => {
+    await sendAPIandSave({ device, cmd, id: 0 }).catch((error: Error) => {
       toast.error(error.message);
     });
   };
@@ -291,7 +292,7 @@ const DownloadUpload = () => {
             startIcon={<DownloadIcon />}
             variant="outlined"
             color="primary"
-            onClick={() => callAPI('system', 'info')}
+            onClick={() => callAPIandSave('system', 'info')}
           >
             {LL.SUPPORT_INFORMATION(0)}
           </Button>
@@ -300,7 +301,7 @@ const DownloadUpload = () => {
             startIcon={<DownloadIcon />}
             variant="outlined"
             color="primary"
-            onClick={() => callAPI('system', 'allvalues')}
+            onClick={() => callAPIandSave('system', 'allvalues')}
           >
             {LL.ALLVALUES()}
           </Button>
@@ -420,15 +421,13 @@ const DownloadUpload = () => {
           <Typography variant="body2">{LL.UPLOAD_TEXT()}</Typography>
         </Box>
 
-        <SingleUpload callRestart={callRestart} />
+        <SingleUpload doRestart={doRestart} />
       </>
     );
   };
 
   return (
-    <SectionContent>
-      {restarting ? <RestartMonitor message={LL.WAIT_FIRMWARE()} /> : content()}
-    </SectionContent>
+    <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
   );
 };
 

interface/src/app/settings/Settings.tsx

@@ -21,9 +21,11 @@ import {
 } from '@mui/material';
 
 import * as SystemApi from 'api/system';
+import { API } from 'api/app';
 
 import { dialogStyle } from 'CustomTheme';
 import { useRequest } from 'alova/client';
+import type { APIcall } from 'app/main/types';
 import { SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
 import { useI18nContext } from 'i18n/i18n-react';
@@ -34,13 +36,14 @@ const Settings = () => {
 
   const [confirmFactoryReset, setConfirmFactoryReset] = useState<boolean>(false);
 
-  const { send: factoryResetCommand } = useRequest(SystemApi.factoryReset(), {
+  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
     immediate: false
   });
 
-  const factoryReset = async () => {
-    await factoryResetCommand();
-    setConfirmFactoryReset(false);
+  const doFormat = async () => {
+    await sendAPI({ device: 'system', cmd: 'format', id: 0 }).then(() => {
+      setConfirmFactoryReset(false);
+    });
   };
 
   const renderFactoryResetDialog = () => (
@@ -63,7 +66,7 @@ const Settings = () => {
         <Button
           startIcon={<SettingsBackupRestoreIcon />}
           variant="outlined"
-          onClick={factoryReset}
+          onClick={doFormat}
           color="error"
         >
           {LL.FACTORY_RESET()}

interface/src/app/settings/network/NetworkSettings.tsx

@@ -22,9 +22,10 @@ import {
 } from '@mui/material';
 
 import * as NetworkApi from 'api/network';
-import * as SystemApi from 'api/system';
+import { API } from 'api/app';
 
 import { updateState, useRequest } from 'alova/client';
+import type { APIcall } from 'app/main/types';
 import type { ValidateFieldsError } from 'async-validator';
 import {
   BlockFormControlLabel,
@@ -71,7 +72,7 @@ const NetworkSettings = () => {
     update: NetworkApi.updateNetworkSettings
   });
 
-  const { send: restartCommand } = useRequest(SystemApi.restart(), {
+  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
     immediate: false
   });
 
@@ -131,11 +132,13 @@ const NetworkSettings = () => {
       await loadData();
     };
 
-    const restart = async () => {
-      await restartCommand().catch((error: Error) => {
-        toast.error(error.message);
-      });
+    const doRestart = async () => {
       setRestarting(true);
+      await sendAPI({ device: 'system', cmd: 'restart', id: -1 }).catch(
+        (error: Error) => {
+          toast.error(error.message);
+        }
+      );
     };
 
     return (
@@ -358,7 +361,7 @@ const NetworkSettings = () => {
               startIcon={<PowerSettingsNewIcon />}
               variant="contained"
               color="error"
-              onClick={restart}
+              onClick={doRestart}
             >
               {LL.RESTART()}
             </Button>