move restarting to parent component - #1920

interface/src/app/settings/DownloadUpload.tsx

@@ -1,6 +1,8 @@
+import { useState } from 'react';
 import { toast } from 'react-toastify';
 
 import DownloadIcon from '@mui/icons-material/GetApp';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import { Box, Button, Divider, Link, Typography } from '@mui/material';
 
 import * as SystemApi from 'api/system';
@@ -15,8 +17,10 @@ import { getDevVersion, getStableVersion } from 'api/system';
 
 import { useRequest } from 'alova/client';
 import type { APIcall } from 'app/main/types';
+import RestartMonitor from 'app/status/RestartMonitor';
 import {
   FormLoader,
+  MessageBox,
   SectionContent,
   SingleUpload,
   useLayoutTitle
@@ -26,6 +30,9 @@ import { useI18nContext } from 'i18n/i18n-react';
 const DownloadUpload = () => {
   const { LL } = useI18nContext();
 
+  const [restarting, setRestarting] = useState<boolean>(false);
+  const [restartNeeded, setRestartNeeded] = useState<boolean>(false);
+
   const { send: sendSettings } = useRequest(getSettings(), {
     immediate: false
   }).onSuccess((event) => {
@@ -41,7 +48,7 @@ const DownloadUpload = () => {
   const { send: sendEntities } = useRequest(getEntities(), {
     immediate: false
   }).onSuccess((event) => {
-    saveFile(event.data, 'entities.json');
+    saveFile(event.data, 'custom_entities.json');
   });
 
   const { send: sendSchedule } = useRequest(getSchedule(), {
@@ -65,6 +72,20 @@ const DownloadUpload = () => {
     error
   } = useRequest(SystemApi.readHardwareStatus);
 
+  const { send: restartCommand } = useRequest(SystemApi.restart(), {
+    immediate: false
+  });
+
+  const restart = async () => {
+    await restartCommand()
+      .then(() => {
+        setRestarting(true);
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      });
+  };
+
   // called immediately to get the latest version, on page load
   // set immediate to false to avoid calling the API on page load and GH blocking while testing!
   const { data: latestVersion } = useRequest(getStableVersion, {
@@ -100,14 +121,14 @@ const DownloadUpload = () => {
     return data.esp_platform;
   };
 
-  const saveFile = (json: unknown, endpoint: string) => {
+  const saveFile = (json: unknown, filename: string) => {
     const anchor = document.createElement('a');
     anchor.href = URL.createObjectURL(
       new Blob([JSON.stringify(json, null, 2)], {
         type: 'text/plain'
       })
     );
-    anchor.download = 'emsesp_' + endpoint;
+    anchor.download = 'emsesp_' + filename;
     anchor.click();
     URL.revokeObjectURL(anchor.href);
     toast.info(LL.DOWNLOAD_SUCCESSFUL());
@@ -284,12 +305,27 @@ const DownloadUpload = () => {
           )}
         </Box>
 
-        <SingleUpload />
+        <SingleUpload setRestartNeeded={setRestartNeeded} />
+
+        {restartNeeded && (
+          <MessageBox mt={2} level="warning" message={LL.RESTART_TEXT(0)}>
+            <Button
+              startIcon={<PowerSettingsNewIcon />}
+              variant="contained"
+              color="error"
+              onClick={restart}
+            >
+              {LL.RESTART()}
+            </Button>
+          </MessageBox>
+        )}
       </>
     );
   };
 
-  return <SectionContent>{content()}</SectionContent>;
+  return (
+    <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
+  );
 };
 
 export default DownloadUpload;

interface/src/components/upload/DragNdrop.tsx

@@ -1,5 +1,4 @@
-// Code inspired by https://medium.com/@dprincecoder/creating-a-drag-and-drop-file-upload-component-in-react-a-step-by-step-guide-4d93b6cc21e0
+// Code inspired by Prince Azubuike from https://medium.com/@dprincecoder/creating-a-drag-and-drop-file-upload-component-in-react-a-step-by-step-guide-4d93b6cc21e0
-// (c) Prince Azubuike
 import { type ChangeEvent, useRef, useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';

interface/src/components/upload/SingleUpload.tsx

@@ -2,23 +2,17 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
-import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import { Box, Button, LinearProgress, Typography } from '@mui/material';
 
 import * as SystemApi from 'api/system';
 
 import { useRequest } from 'alova/client';
-import RestartMonitor from 'app/status/RestartMonitor';
-import MessageBox from 'components/MessageBox';
 import { useI18nContext } from 'i18n/i18n-react';
 
 import DragNdrop from './DragNdrop';
 
-const SingleUpload = () => {
+const SingleUpload = ({ setRestartNeeded }) => {
   const [md5, setMd5] = useState<string>();
-  const [restarting, setRestarting] = useState<boolean>(false);
-  const [restartNeeded, setRestartNeeded] = useState<boolean>(false);
-
   const [file, setFile] = useState<File>();
   const { LL } = useI18nContext();
 
@@ -39,17 +33,6 @@ const SingleUpload = () => {
     }
   });
 
-  const { send: restartCommand } = useRequest(SystemApi.restart(), {
-    immediate: false
-  });
-
-  const restart = async () => {
-    await restartCommand().catch((error: Error) => {
-      toast.error(error.message);
-    });
-    setRestarting(true);
-  };
-
   useEffect(async () => {
     if (file) {
       console.log('going to upload file ', file.name);
@@ -75,7 +58,7 @@ const SingleUpload = () => {
         <Typography variant="body2">{LL.UPLOAD_TEXT()}</Typography>
       </Box>
 
-      {isUploading || restartNeeded ? (
+      {isUploading ? (
         <>
           <Box width="100%" p={2}>
             <LinearProgress
@@ -90,17 +73,15 @@ const SingleUpload = () => {
             />
           </Box>
 
-          {!restartNeeded && (
+          <Button
-            <Button
+            sx={{ ml: 2 }}
-              sx={{ ml: 2 }}
+            startIcon={<CancelIcon />}
-              startIcon={<CancelIcon />}
+            variant="outlined"
-              variant="outlined"
+            color="error"
-              color="error"
+            onClick={cancelUpload}
-              onClick={cancelUpload}
+          >
-            >
+            {LL.CANCEL()}
-              {LL.CANCEL()}
+          </Button>
-            </Button>
-          )}
         </>
       ) : (
         <DragNdrop onFileSelected={setFile} />
@@ -111,21 +92,6 @@ const SingleUpload = () => {
           <Typography variant="body2">{'MD5: ' + md5}</Typography>
         </Box>
       )}
-
-      {restartNeeded && (
-        <MessageBox mt={2} level="warning" message={LL.RESTART_TEXT(0)}>
-          <Button
-            startIcon={<PowerSettingsNewIcon />}
-            variant="contained"
-            color="error"
-            onClick={restart}
-          >
-            {LL.RESTART()}
-          </Button>
-        </MessageBox>
-      )}
-
-      {restarting && <RestartMonitor />}
     </>
   );
 };