replace Refresh with Alova useAutoRequest()

interface/src/app/main/CustomEntities.tsx

@@ -5,7 +5,6 @@ import { toast } from 'react-toastify';
 import AddIcon from '@mui/icons-material/Add';
 import CancelIcon from '@mui/icons-material/Cancel';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
-import RefreshIcon from '@mui/icons-material/Refresh';
 import WarningIcon from '@mui/icons-material/Warning';
 import { Box, Button, Typography } from '@mui/material';
 
@@ -19,7 +18,7 @@ import {
   Table
 } from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
-import { updateState, useRequest } from 'alova/client';
+import { updateState, useAutoRequest, useRequest } from 'alova/client';
 import {
   BlockNavigation,
   ButtonRow,
@@ -49,8 +48,9 @@ const CustomEntities = () => {
     data: entities,
     send: fetchEntities,
     error
-  } = useRequest(readCustomEntities, {
-    initialData: []
+  } = useAutoRequest(readCustomEntities, {
+    initialData: [],
+    pollingTime: 2000
   });
 
   const { send: writeEntities } = useRequest(
@@ -324,24 +324,14 @@ const CustomEntities = () => {
           )}
         </Box>
         <Box flexWrap="nowrap" whiteSpace="nowrap">
-          <ButtonRow>
-            <Button
-              startIcon={<RefreshIcon />}
-              variant="outlined"
-              color="secondary"
-              onClick={fetchEntities}
-            >
-              {LL.REFRESH()}
-            </Button>
-            <Button
-              startIcon={<AddIcon />}
-              variant="outlined"
-              color="primary"
-              onClick={addEntityItem}
-            >
-              {LL.ADD(0)}
-            </Button>
-          </ButtonRow>
+          <Button
+            startIcon={<AddIcon />}
+            variant="outlined"
+            color="primary"
+            onClick={addEntityItem}
+          >
+            {LL.ADD(0)}
+          </Button>
         </Box>
       </Box>
     </SectionContent>

interface/src/app/main/Devices.tsx

@@ -19,7 +19,6 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
 import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import RefreshIcon from '@mui/icons-material/Refresh';
 import StarIcon from '@mui/icons-material/Star';
 import StarBorderOutlinedIcon from '@mui/icons-material/StarBorderOutlined';
 import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
@@ -56,8 +55,8 @@ import {
 import { useTheme } from '@table-library/react-table-library/theme';
 import type { Action, State } from '@table-library/react-table-library/types/common';
 import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
-import { ButtonRow, MessageBox, SectionContent, useLayoutTitle } from 'components';
+import { useAutoRequest, useRequest } from 'alova/client';
+import { MessageBox, SectionContent, useLayoutTitle } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 
@@ -84,12 +83,16 @@ const Devices = () => {
 
   useLayoutTitle(LL.DEVICES());
 
-  const { data: coreData, send: sendCoreData } = useRequest(() => readCoreData(), {
-    initialData: {
-      connected: true,
-      devices: []
+  const { data: coreData, send: sendCoreData } = useAutoRequest(
+    () => readCoreData(),
+    {
+      initialData: {
+        connected: true,
+        devices: []
+      },
+      pollingTime: 2000
     }
-  });
+  );
 
   const { data: deviceData, send: sendDeviceData } = useRequest(
     (id: number) => readDeviceData(id),
@@ -681,11 +684,6 @@ const Devices = () => {
                   )}
                 </IconButton>
               </ButtonTooltip>
-              <ButtonTooltip title={LL.REFRESH()}>
-                <IconButton onClick={refreshData}>
-                  <RefreshIcon color="primary" sx={{ fontSize: 18 }} />
-                </IconButton>
-              </ButtonTooltip>
             </Typography>
             <Grid item zeroMinWidth justifyContent="flex-end">
               <ButtonTooltip title={LL.CANCEL()}>
@@ -780,16 +778,6 @@ const Devices = () => {
           progress={submitting}
         />
       )}
-      <ButtonRow mt={1}>
-        <Button
-          startIcon={<RefreshIcon />}
-          variant="outlined"
-          color="secondary"
-          onClick={refreshData}
-        >
-          {LL.REFRESH()}
-        </Button>
-      </ButtonRow>
     </SectionContent>
   );
 };

interface/src/app/main/Help.tsx

@@ -53,18 +53,18 @@ const Help = () => {
 
   return (
     <>
-    <SectionContent>
-      <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
-        <ListItem>
-          <ListItemButton component="a" href="https://emsesp.org">
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: '#72caf9' }}>
-                <MenuBookIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={LL.HELP_INFORMATION_1()} />
-          </ListItemButton>
-        </ListItem>
+      <SectionContent>
+        <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
+          <ListItem>
+            <ListItemButton component="a" href="https://emsesp.org">
+              <ListItemAvatar>
+                <Avatar sx={{ bgcolor: '#72caf9' }}>
+                  <MenuBookIcon />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={LL.HELP_INFORMATION_1()} />
+            </ListItemButton>
+          </ListItem>
 
           <ListItem>
             <ListItemButton component="a" href="https://discord.gg/3J3GgnzpyT">

interface/src/app/main/Sensors.tsx

@@ -4,7 +4,6 @@ import { toast } from 'react-toastify';
 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
 import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
-import RefreshIcon from '@mui/icons-material/Refresh';
 import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
 import { Box, Button, Typography } from '@mui/material';
 
@@ -20,8 +19,8 @@ import {
 } from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
 import type { State } from '@table-library/react-table-library/types/common';
-import { useRequest } from 'alova/client';
-import { ButtonRow, SectionContent, useLayoutTitle } from 'components';
+import { useAutoRequest, useRequest } from 'alova/client';
+import { SectionContent, useLayoutTitle } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 
@@ -60,7 +59,7 @@ const Sensors = () => {
   const [analogDialogOpen, setAnalogDialogOpen] = useState<boolean>(false);
   const [creating, setCreating] = useState<boolean>(false);
 
-  const { data: sensorData, send: sendSensorData } = useRequest(
+  const { data: sensorData, send: sendSensorData } = useAutoRequest(
     () => readSensorData(),
     {
       initialData: {
@@ -68,7 +67,8 @@ const Sensors = () => {
         as: [],
         analog_enabled: false,
         platform: 'ESP32'
-      }
+      },
+      pollingTime: 2000
     }
   );
 
@@ -500,30 +500,18 @@ const Sensors = () => {
           )}
         </>
       )}
-      <ButtonRow>
-        <Box mt={1} display="flex" flexWrap="wrap">
-          <Box flexGrow={1}>
-            <Button
-              startIcon={<RefreshIcon />}
-              variant="outlined"
-              color="secondary"
-              onClick={sendSensorData}
-            >
-              {LL.REFRESH()}
-            </Button>
-          </Box>
-          {sensorData?.analog_enabled === true && me.admin && (
-            <Button
-              variant="outlined"
-              color="primary"
-              startIcon={<AddCircleOutlineOutlinedIcon />}
-              onClick={addAnalogSensor}
-            >
-              {LL.ADD(0) + ' ' + LL.ANALOG_SENSOR(1)}
-            </Button>
-          )}
-        </Box>
-      </ButtonRow>
+      <Box mt={1} display="flex" flexWrap="wrap">
+        {sensorData?.analog_enabled === true && me.admin && (
+          <Button
+            variant="outlined"
+            color="primary"
+            startIcon={<AddCircleOutlineOutlinedIcon />}
+            onClick={addAnalogSensor}
+          >
+            {LL.ADD(0) + ' ' + LL.ANALOG_SENSOR(1)}
+          </Button>
+        )}
+      </Box>
     </SectionContent>
   );
 };