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, {
+  } = useAutoRequest(readCustomEntities, {
-    initialData: []
+    initialData: [],
+    pollingTime: 2000
   });
 
   const { send: writeEntities } = useRequest(
@@ -324,15 +324,6 @@ 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"
@@ -341,7 +332,6 @@ const CustomEntities = () => {
           >
             {LL.ADD(0)}
           </Button>
-          </ButtonRow>
         </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 { useAutoRequest, useRequest } from 'alova/client';
-import { ButtonRow, MessageBox, SectionContent, useLayoutTitle } from 'components';
+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(), {
+  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/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 { useAutoRequest, useRequest } from 'alova/client';
-import { ButtonRow, SectionContent, useLayoutTitle } from 'components';
+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,18 +500,7 @@ 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"
@@ -523,7 +512,6 @@ const Sensors = () => {
           </Button>
         )}
       </Box>
-      </ButtonRow>
     </SectionContent>
   );
 };

interface/src/app/status/APStatus.tsx

@@ -1,10 +1,8 @@
 import ComputerIcon from '@mui/icons-material/Computer';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
-import RefreshIcon from '@mui/icons-material/Refresh';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
 import {
   Avatar,
-  Button,
   Divider,
   List,
   ListItem,
@@ -16,8 +14,8 @@ import type { Theme } from '@mui/material';
 
 import * as APApi from 'api/ap';
 
-import { useRequest } from 'alova/client';
+import { useAutoRequest } from 'alova/client';
-import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { APStatusType } from 'types';
 import { APNetworkStatus } from 'types';
@@ -36,7 +34,11 @@ export const apStatusHighlight = ({ status }: APStatusType, theme: Theme) => {
 };
 
 const APStatus = () => {
-  const { data: data, send: loadData, error } = useRequest(APApi.readAPStatus);
+  const {
+    data: data,
+    send: loadData,
+    error
+  } = useAutoRequest(APApi.readAPStatus, { pollingTime: 5000 });
 
   const { LL } = useI18nContext();
   useLayoutTitle(LL.STATUS_OF(LL.ACCESS_POINT(0)));
@@ -62,7 +64,6 @@ const APStatus = () => {
     }
 
     return (
-      <>
       <List>
         <ListItem>
           <ListItemAvatar>
@@ -77,10 +78,7 @@ const APStatus = () => {
           <ListItemAvatar>
             <Avatar>IP</Avatar>
           </ListItemAvatar>
-            <ListItemText
+          <ListItemText primary={LL.ADDRESS_OF('IP')} secondary={data.ip_address} />
-              primary={LL.ADDRESS_OF('IP')}
-              secondary={data.ip_address}
-            />
         </ListItem>
         <Divider variant="inset" component="li" />
         <ListItem>
@@ -105,17 +103,6 @@ const APStatus = () => {
         </ListItem>
         <Divider variant="inset" component="li" />
       </List>
-        <ButtonRow>
-          <Button
-            startIcon={<RefreshIcon />}
-            variant="outlined"
-            color="secondary"
-            onClick={loadData}
-          >
-            {LL.REFRESH()}
-          </Button>
-        </ButtonRow>
-      </>
     );
   };
 

interface/src/app/status/Activity.tsx

@@ -1,8 +1,5 @@
 import { useEffect } from 'react';
 
-import RefreshIcon from '@mui/icons-material/Refresh';
-import { Button } from '@mui/material';
-
 import {
   Body,
   Cell,
@@ -13,16 +10,20 @@ import {
   Table
 } from '@table-library/react-table-library/table';
 import { useTheme as tableTheme } from '@table-library/react-table-library/theme';
-import { useRequest } from 'alova/client';
+import { useAutoRequest } from 'alova/client';
-import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { Translation } from 'i18n/i18n-types';
 
-import * as EMSESP from '../../api/app';
+import { readActivity } from '../../api/app';
 import type { Stat } from '../main/types';
 
 const SystemActivity = () => {
-  const { data: data, send: loadData, error } = useRequest(EMSESP.readActivity);
+  const {
+    data: data,
+    send: loadData,
+    error
+  } = useAutoRequest(readActivity, { pollingTime: 2000 });
 
   const { LL } = useI18nContext();
 
@@ -98,7 +99,6 @@ const SystemActivity = () => {
     }
 
     return (
-      <>
       <Table
         data={{ nodes: data.stats }}
         theme={stats_theme}
@@ -127,17 +127,6 @@ const SystemActivity = () => {
           </>
         )}
       </Table>
-        <ButtonRow mt={1}>
-          <Button
-            startIcon={<RefreshIcon />}
-            variant="outlined"
-            color="secondary"
-            onClick={loadData}
-          >
-            {LL.REFRESH()}
-          </Button>
-        </ButtonRow>
-      </>
     );
   };
 

interface/src/app/status/HardwareStatus.tsx

@@ -3,14 +3,11 @@ import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
 import DevicesIcon from '@mui/icons-material/Devices';
 import FolderIcon from '@mui/icons-material/Folder';
 import MemoryIcon from '@mui/icons-material/Memory';
-import RefreshIcon from '@mui/icons-material/Refresh';
 import SdCardAlertIcon from '@mui/icons-material/SdCardAlert';
 import SdStorageIcon from '@mui/icons-material/SdStorage';
 import TapAndPlayIcon from '@mui/icons-material/TapAndPlay';
 import {
   Avatar,
-  Box,
-  Button,
   Divider,
   List,
   ListItem,
@@ -20,8 +17,8 @@ import {
 
 import * as SystemApi from 'api/system';
 
-import { useRequest } from 'alova/client';
+import { useAutoRequest } from 'alova/client';
-import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
 import BBQKeesIcon from './bbqkees.svg';
@@ -39,7 +36,7 @@ const HardwareStatus = () => {
     data: data,
     send: loadData,
     error
-  } = useRequest(SystemApi.readHardwareStatus);
+  } = useAutoRequest(SystemApi.readHardwareStatus, { pollingTime: 2000 });
 
   const content = () => {
     if (!data) {
@@ -47,7 +44,6 @@ const HardwareStatus = () => {
     }
 
     return (
-      <>
       <List>
         <ListItem>
           <ListItemAvatar>
@@ -197,21 +193,6 @@ const HardwareStatus = () => {
         </ListItem>
         <Divider variant="inset" component="li" />
       </List>
-        <Box display="flex" flexWrap="wrap">
-          <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
-            <ButtonRow>
-              <Button
-                startIcon={<RefreshIcon />}
-                variant="outlined"
-                color="secondary"
-                onClick={loadData}
-              >
-                {LL.REFRESH()}
-              </Button>
-            </ButtonRow>
-          </Box>
-        </Box>
-      </>
     );
   };
 

interface/src/app/status/MqttStatus.tsx

@@ -1,11 +1,9 @@
 import AutoAwesomeMotionIcon from '@mui/icons-material/AutoAwesomeMotion';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
-import RefreshIcon from '@mui/icons-material/Refresh';
 import ReportIcon from '@mui/icons-material/Report';
 import SpeakerNotesOffIcon from '@mui/icons-material/SpeakerNotesOff';
 import {
   Avatar,
-  Button,
   Divider,
   List,
   ListItem,
@@ -17,8 +15,8 @@ import type { Theme } from '@mui/material';
 
 import * as MqttApi from 'api/mqtt';
 
-import { useRequest } from 'alova/client';
+import { useAutoRequest } from 'alova/client';
-import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { MqttStatusType } from 'types';
 import { MqttDisconnectReason } from 'types';
@@ -56,7 +54,11 @@ export const mqttQueueHighlight = (
 };
 
 const MqttStatus = () => {
-  const { data: data, send: loadData, error } = useRequest(MqttApi.readMqttStatus);
+  const {
+    data: data,
+    send: loadData,
+    error
+  } = useAutoRequest(MqttApi.readMqttStatus, { pollingTime: 5000 });
 
   const { LL } = useI18nContext();
   useLayoutTitle(LL.STATUS_OF('MQTT'));
@@ -146,7 +148,6 @@ const MqttStatus = () => {
     );
 
     return (
-      <>
       <List>
         <ListItem>
           <ListItemAvatar>
@@ -159,17 +160,6 @@ const MqttStatus = () => {
         <Divider variant="inset" component="li" />
         {data.enabled && renderConnectionStatus()}
       </List>
-        <ButtonRow>
-          <Button
-            startIcon={<RefreshIcon />}
-            variant="outlined"
-            color="secondary"
-            onClick={loadData}
-          >
-            {LL.REFRESH()}
-          </Button>
-        </ButtonRow>
-      </>
     );
   };
 

interface/src/app/status/NTPStatus.tsx

@@ -4,7 +4,6 @@ import { toast } from 'react-toastify';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import CancelIcon from '@mui/icons-material/Cancel';
 import DnsIcon from '@mui/icons-material/Dns';
-import RefreshIcon from '@mui/icons-material/Refresh';
 import SwapVerticalCircleIcon from '@mui/icons-material/SwapVerticalCircle';
 import UpdateIcon from '@mui/icons-material/Update';
 import {
@@ -29,7 +28,7 @@ import type { Theme } from '@mui/material';
 import * as NTPApi from 'api/ntp';
 
 import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
+import { useAutoRequest, useRequest } from 'alova/client';
 import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { NTPStatusType, Time } from 'types';
@@ -37,7 +36,11 @@ import { NTPSyncStatus } from 'types';
 import { formatDateTime, formatLocalDateTime } from 'utils';
 
 const NTPStatus = () => {
-  const { data: data, send: loadData, error } = useRequest(NTPApi.readNTPStatus);
+  const {
+    data: data,
+    send: loadData,
+    error
+  } = useAutoRequest(NTPApi.readNTPStatus, { pollingTime: 5000 });
 
   const [localTime, setLocalTime] = useState<string>('');
   const [settingTime, setSettingTime] = useState<boolean>(false);
@@ -214,18 +217,6 @@ const NTPStatus = () => {
           <Divider variant="inset" component="li" />
         </List>
         <Box display="flex" flexWrap="wrap">
-          <Box flexGrow={1}>
-            <ButtonRow>
-              <Button
-                startIcon={<RefreshIcon />}
-                variant="outlined"
-                color="secondary"
-                onClick={loadData}
-              >
-                {LL.REFRESH()}
-              </Button>
-            </ButtonRow>
-          </Box>
           {data && !isNtpActive(data) && (
             <Box flexWrap="nowrap" whiteSpace="nowrap">
               <ButtonRow>

interface/src/app/status/NetworkStatus.tsx

@@ -1,14 +1,12 @@
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import DnsIcon from '@mui/icons-material/Dns';
 import GiteIcon from '@mui/icons-material/Gite';
-import RefreshIcon from '@mui/icons-material/Refresh';
 import RouterIcon from '@mui/icons-material/Router';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
 import SettingsInputComponentIcon from '@mui/icons-material/SettingsInputComponent';
 import WifiIcon from '@mui/icons-material/Wifi';
 import {
   Avatar,
-  Button,
   Divider,
   List,
   ListItem,
@@ -20,8 +18,8 @@ import type { Theme } from '@mui/material';
 
 import * as NetworkApi from 'api/network';
 
-import { useRequest } from 'alova/client';
+import { useAutoRequest } from 'alova/client';
-import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { NetworkStatusType } from 'types';
 import { NetworkConnectionStatus } from 'types';
@@ -87,7 +85,7 @@ const NetworkStatus = () => {
     data: data,
     send: loadData,
     error
-  } = useRequest(NetworkApi.readNetworkStatus);
+  } = useAutoRequest(NetworkApi.readNetworkStatus, { pollingTime: 5000 });
 
   const { LL } = useI18nContext();
   useLayoutTitle(LL.STATUS_OF(LL.NETWORK(1)));
@@ -123,7 +121,6 @@ const NetworkStatus = () => {
     }
 
     return (
-      <>
       <List>
         <ListItem>
           <ListItemAvatar>
@@ -214,21 +211,9 @@ const NetworkStatus = () => {
                 secondary={dnsServers(data)}
               />
             </ListItem>
-              <Divider variant="inset" component="li" />
           </>
         )}
       </List>
-        <ButtonRow>
-          <Button
-            startIcon={<RefreshIcon />}
-            variant="outlined"
-            color="secondary"
-            onClick={loadData}
-          >
-            {LL.REFRESH()}
-          </Button>
-        </ButtonRow>
-      </>
     );
   };
 

interface/src/app/status/Status.tsx

@@ -10,7 +10,6 @@ import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
 import LogoDevIcon from '@mui/icons-material/LogoDev';
 import MemoryIcon from '@mui/icons-material/Memory';
 import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
-import RefreshIcon from '@mui/icons-material/Refresh';
 import RouterIcon from '@mui/icons-material/Router';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
 import TimerIcon from '@mui/icons-material/Timer';
@@ -18,7 +17,6 @@ import UpgradeIcon from '@mui/icons-material/Upgrade';
 import WifiIcon from '@mui/icons-material/Wifi';
 import {
   Avatar,
-  Box,
   Button,
   Dialog,
   DialogActions,
@@ -34,7 +32,7 @@ import {
 import * as SystemApi from 'api/system';
 
 import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
+import { useAutoRequest, useRequest } from 'alova/client';
 import { busConnectionStatus } from 'app/main/types';
 import { FormLoader, SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
@@ -69,8 +67,9 @@ const SystemStatus = () => {
     data: data,
     send: loadData,
     error
-  } = useRequest(SystemApi.readSystemStatus, {
+  } = useAutoRequest(SystemApi.readSystemStatus, {
-    initialData: []
+    initialData: [],
+    pollingTime: 5000
   });
 
   const theme = useTheme();
@@ -392,17 +391,6 @@ const SystemStatus = () => {
         </List>
 
         {renderRestartDialog()}
-
-        <Box mt={2} display="flex" flexWrap="wrap">
-          <Button
-            startIcon={<RefreshIcon />}
-            variant="outlined"
-            color="secondary"
-            onClick={loadData}
-          >
-            {LL.REFRESH()}
-          </Button>
-        </Box>
       </>
     );
   };