replace Refresh with Alova useAutoRequest()

2025-12-06 07:49:52 +03:00 · 2024-08-10 20:54:57 +02:00
parent cde8ba0e9e
commit 962d007d91
11 changed files with 410 additions and 533 deletions
--- a/interface/src/app/main/CustomEntities.tsx
+++ b/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,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>
--- a/interface/src/app/main/Devices.tsx
+++ b/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(), {
+  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>
  );
 };
--- a/interface/src/app/main/Sensors.tsx
+++ b/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,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>
  );
 };
--- a/interface/src/app/status/APStatus.tsx
+++ b/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 { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { useAutoRequest } from 'alova/client';
+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
-              primary={LL.ADDRESS_OF('IP')}
-              secondary={data.ip_address}
-            />
+          <ListItemText 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>
-      </>
    );
  };

--- a/interface/src/app/status/Activity.tsx
+++ b/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 { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { useAutoRequest } from 'alova/client';
+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>
-      </>
    );
  };

--- a/interface/src/app/status/HardwareStatus.tsx
+++ b/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 { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { useAutoRequest } from 'alova/client';
+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>
-      </>
    );
  };

--- a/interface/src/app/status/MqttStatus.tsx
+++ b/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 { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { useAutoRequest } from 'alova/client';
+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>
-      </>
    );
  };

--- a/interface/src/app/status/NTPStatus.tsx
+++ b/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>
--- a/interface/src/app/status/NetworkStatus.tsx
+++ b/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 { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { useAutoRequest } from 'alova/client';
+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>
-      </>
    );
  };

--- a/interface/src/app/status/Status.tsx
+++ b/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, {
-    initialData: []
+  } = useAutoRequest(SystemApi.readSystemStatus, {
+    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>
      </>
    );
  };