diff --git a/interface/src/app/main/CustomEntities.tsx b/interface/src/app/main/CustomEntities.tsx index bbaaa0903..b922d84d8 100644 --- 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,24 +324,14 @@ const CustomEntities = () => { )} - - - - + diff --git a/interface/src/app/main/Devices.tsx b/interface/src/app/main/Devices.tsx index 4d13c09ed..a3fb2c42d 100644 --- 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(), { - 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 = () => { )} - - - - - @@ -780,16 +778,6 @@ const Devices = () => { progress={submitting} /> )} - - - ); }; diff --git a/interface/src/app/main/Help.tsx b/interface/src/app/main/Help.tsx index d60e6ac47..9bee05284 100644 --- a/interface/src/app/main/Help.tsx +++ b/interface/src/app/main/Help.tsx @@ -53,18 +53,18 @@ const Help = () => { return ( <> - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/interface/src/app/main/Sensors.tsx b/interface/src/app/main/Sensors.tsx index 58cdd02c6..07f53abcc 100644 --- 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(false); const [creating, setCreating] = useState(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 = () => { )} )} - - - - - - {sensorData?.analog_enabled === true && me.admin && ( - - )} - - + + {sensorData?.analog_enabled === true && me.admin && ( + + )} + ); }; diff --git a/interface/src/app/status/APStatus.tsx b/interface/src/app/status/APStatus.tsx index 44aa25e2e..5f548472f 100644 --- 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,60 +64,45 @@ const APStatus = () => { } return ( - <> - - - - - - - - - - - - - IP - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + IP + + + + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/interface/src/app/status/Activity.tsx b/interface/src/app/status/Activity.tsx index ae43f3d51..93f07a44f 100644 --- 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,46 +99,34 @@ const SystemActivity = () => { } return ( - <> - - {(tableList: Stat[]) => ( - <> -
- - - {LL.SUCCESS()} - {LL.FAIL()} - {LL.QUALITY()} - -
- - {tableList.map((stat: Stat) => ( - - {showName(stat.id)} - {Intl.NumberFormat().format(stat.s)} - {Intl.NumberFormat().format(stat.f)} - {showQuality(stat)} - - ))} - - - )} -
- - - - + + {(tableList: Stat[]) => ( + <> +
+ + + {LL.SUCCESS()} + {LL.FAIL()} + {LL.QUALITY()} + +
+ + {tableList.map((stat: Stat) => ( + + {showName(stat.id)} + {Intl.NumberFormat().format(stat.s)} + {Intl.NumberFormat().format(stat.f)} + {showQuality(stat)} + + ))} + + + )} +
); }; diff --git a/interface/src/app/status/HardwareStatus.tsx b/interface/src/app/status/HardwareStatus.tsx index 32c440d5f..5cf96e1a2 100644 --- 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,171 +44,155 @@ const HardwareStatus = () => { } return ( - <> - - - - - {data.model ? ( - - ) : ( - - )} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {data.psram_size !== undefined && data.free_psram !== undefined && ( - <> - - - - - - - - + + + + {data.model ? ( + - - - )} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + ) : ( + + )} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {data.psram_size !== undefined && data.free_psram !== undefined && ( + <> + + + + + + + + + + + )} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/interface/src/app/status/MqttStatus.tsx b/interface/src/app/status/MqttStatus.tsx index 462d17130..cf2943707 100644 --- 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,30 +148,18 @@ const MqttStatus = () => { ); return ( - <> - - - - - - - - - - - {data.enabled && renderConnectionStatus()} - - - - - + + + + + + + + + + + {data.enabled && renderConnectionStatus()} + ); }; diff --git a/interface/src/app/status/NTPStatus.tsx b/interface/src/app/status/NTPStatus.tsx index 13b7841fe..0943e0aa0 100644 --- 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(''); const [settingTime, setSettingTime] = useState(false); @@ -214,18 +217,6 @@ const NTPStatus = () => { - - - - - {data && !isNtpActive(data) && ( diff --git a/interface/src/app/status/NetworkStatus.tsx b/interface/src/app/status/NetworkStatus.tsx index 201193cb2..812f8f537 100644 --- 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,112 +121,99 @@ const NetworkStatus = () => { } return ( - <> - - - - - {isWiFi(data) && } - {isEthernet(data) && } - - - - - - - - - - - - - - - {isWiFi(data) && ( - <> - - - - - - - - - - - )} - {isConnected(data) && ( - <> - - - IP - - - - - - - - - - - - - - - - # - - - - - - - - - - - - - - - - - - - - - - - - )} - - - - - + + + + + {isWiFi(data) && } + {isEthernet(data) && } + + + + + + + + + + + + + + + {isWiFi(data) && ( + <> + + + + + + + + + + + )} + {isConnected(data) && ( + <> + + + IP + + + + + + + + + + + + + + + + # + + + + + + + + + + + + + + + + + + + + + + + )} + ); }; diff --git a/interface/src/app/status/Status.tsx b/interface/src/app/status/Status.tsx index a639ebbc1..c1af25414 100644 --- 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 = () => { {renderRestartDialog()} - - - - ); };