optimizations

interface/src/app/settings/DownloadUpload.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import DownloadIcon from '@mui/icons-material/GetApp';
@@ -19,6 +19,13 @@ import {
 import { useI18nContext } from 'i18n/i18n-react';
 import { saveFile } from 'utils';
 
+interface DownloadButton {
+  key: string;
+  type: string;
+  label: string | number;
+  isGridButton: boolean;
+}
+
 const DownloadUpload = () => {
   const { LL } = useI18nContext();
 
@@ -44,95 +51,127 @@ const DownloadUpload = () => {
 
   const { data, send: loadData, error } = useRequest(SystemApi.readSystemStatus);
 
-  const doRestart = async () => {
+  const doRestart = useCallback(async () => {
     setRestarting(true);
-    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
-      (error: Error) => {
-        toast.error(error.message);
-      }
-    );
-  };
+    try {
+      await sendAPI({ device: 'system', cmd: 'restart', id: 0 });
+    } catch (error) {
+      toast.error((error as Error).message);
+      setRestarting(false);
+    }
+  }, [sendAPI]);
 
   useLayoutTitle(LL.DOWNLOAD_UPLOAD());
 
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
-    }
+  const downloadButtons: DownloadButton[] = useMemo(
+    () => [
+      {
+        key: 'settings',
+        type: 'settings',
+        label: LL.SETTINGS_OF(LL.APPLICATION()),
+        isGridButton: true
+      },
+      {
+        key: 'customizations',
+        type: 'customizations',
+        label: LL.CUSTOMIZATIONS(),
+        isGridButton: true
+      },
+      {
+        key: 'entities',
+        type: 'entities',
+        label: LL.CUSTOM_ENTITIES(0),
+        isGridButton: true
+      },
+      {
+        key: 'schedule',
+        type: 'schedule',
+        label: LL.SCHEDULE(0),
+        isGridButton: true
+      },
+      {
+        key: 'allvalues',
+        type: 'allvalues',
+        label: LL.ALLVALUES(),
+        isGridButton: false
+      }
+    ],
+    [LL]
+  );
 
+  const handleDownload = useCallback(
+    (type: string) => () => {
+      void sendExportData(type);
+    },
+    [sendExportData]
+  );
+
+  if (restarting) {
     return (
-      <>
-        <Typography sx={{ pb: 2 }} variant="h6" color="primary">
-          {LL.DOWNLOAD(0)}
-        </Typography>
+      <SectionContent>
+        <SystemMonitor />
+      </SectionContent>
+    );
+  }
 
-        <Typography mb={1} variant="body1" color="warning">
-          {LL.DOWNLOAD_SETTINGS_TEXT()}.
-        </Typography>
-        <Grid container spacing={1}>
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('settings')}
-          >
-            {LL.SETTINGS_OF(LL.APPLICATION())}
-          </Button>
+  if (!data) {
+    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
+  }
 
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('customizations')}
-          >
-            {LL.CUSTOMIZATIONS()}
-          </Button>
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('entities')}
-          >
-            {LL.CUSTOM_ENTITIES(0)}
-          </Button>
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('schedule')}
-          >
-            {LL.SCHEDULE(0)}
-          </Button>
-        </Grid>
+  const gridButtons = downloadButtons.filter((btn) => btn.isGridButton);
+  const standaloneButton = downloadButtons.find((btn) => !btn.isGridButton);
+
+  return (
+    <SectionContent>
+      <Typography sx={{ pb: 2 }} variant="h6" color="primary">
+        {LL.DOWNLOAD(0)}
+      </Typography>
+
+      <Typography mb={1} variant="body1" color="warning">
+        {LL.DOWNLOAD_SETTINGS_TEXT()}.
+      </Typography>
+
+      <Grid container spacing={2}>
+        {gridButtons.map((button) => (
+          <Grid key={button.key}>
+            <Button
+              startIcon={<DownloadIcon />}
+              variant="outlined"
+              color="primary"
+              onClick={handleDownload(button.type)}
+            >
+              {button.label}
+            </Button>
+          </Grid>
+        ))}
+      </Grid>
+
+      {standaloneButton && (
         <Button
-          sx={{ ml: 2, mt: 2 }}
+          sx={{ mt: 2 }}
           startIcon={<DownloadIcon />}
           variant="outlined"
           color="primary"
-          onClick={() => sendExportData('allvalues')}
+          onClick={handleDownload(standaloneButton.type)}
         >
-          {LL.ALLVALUES()}
+          {standaloneButton.label}
         </Button>
+      )}
 
-        <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
-          {LL.UPLOAD()}
-        </Typography>
+      <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
+        {LL.UPLOAD()}
+      </Typography>
 
-        <Box color="warning.main" sx={{ pb: 2 }}>
-          <Typography variant="body1">{LL.UPLOAD_TEXT()}.</Typography>
-        </Box>
+      <Box color="warning.main" sx={{ pb: 2 }}>
+        <Typography variant="body1">{LL.UPLOAD_TEXT()}.</Typography>
+      </Box>
 
-        <SingleUpload text={LL.UPLOAD_DRAG()} doRestart={doRestart} />
-      </>
-    );
-  };
-
-  return (
-    <SectionContent>{restarting ? <SystemMonitor /> : content()}</SectionContent>
+      <SingleUpload text={LL.UPLOAD_DRAG()} doRestart={doRestart} />
+    </SectionContent>
   );
 };