upgrade alova to v3

interface/package.json

@@ -22,7 +22,7 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@alova/adapter-xhr": "^1.0.6",
+    "@alova/adapter-xhr": "^2.0.4",
     "@alova/scene-react": "^1.6.2",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
@@ -30,18 +30,18 @@
     "@mui/material": "^5.16.6",
     "@table-library/react-table-library": "4.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.0.2",
+    "@types/node": "^22.1.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "alova": "^2.21.4",
+    "alova": "^3.0.5",
     "async-validator": "^4.2.5",
     "history": "^5.3.0",
     "jwt-decode": "^4.0.0",
     "lodash-es": "^4.17.21",
     "mime-types": "^2.1.35",
-    "react": "latest",
+    "react": "^18.3.1",
-    "react-dom": "latest",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.26.0",

interface/src/AuthenticatedRouting.tsx

@@ -4,6 +4,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import CustomEntities from 'app/main/CustomEntities';
 import Customization from 'app/main/Customization';
 import Devices from 'app/main/Devices';
+import Help from 'app/main/Help';
 import Modules from 'app/main/Modules';
 import Scheduler from 'app/main/Scheduler';
 import Sensors from 'app/main/Sensors';
@@ -26,8 +27,6 @@ import SystemLog from 'app/status/SystemLog';
 import { Layout } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 
-import Help from './app/main/Help';
-
 const AuthenticatedRouting: FC = () => {
   const { me } = useContext(AuthenticatedContext);
   return (

interface/src/SignIn.tsx

@@ -8,7 +8,7 @@ import { Box, Button, Paper, Typography } from '@mui/material';
 import * as AuthenticationApi from 'api/authentication';
 import { PROJECT_NAME } from 'api/env';
 
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import type { ValidateFieldsError } from 'async-validator';
 import {
   LanguageSelector,

interface/src/api/endpoints.ts

@@ -8,8 +8,19 @@ export const ACCESS_TOKEN = 'access_token';
 
 export const alovaInstance = createAlova({
   statesHook: ReactHook,
-  timeout: 3000, // 3 seconds but throwing a timeout error
+  cacheFor: null,
-  localCache: null,
+  // TODO fix cache
+  // cacheFor: {
+  //   // Set the cache mode for POST uniformly
+  //   POST: {
+  //     mode: 'restore',
+  //     expire: 60 * 10 * 1000
+  //   },
+  //   // Set the cache mode for HEAD requests uniformly
+  //   HEAD: 60 * 10 * 1000
+  // },
+  // timeout: 3000, // 3 seconds but throwing a timeout error
+  // localCache: null,
   // localCache: {
   //   GET: {
   //     mode: 'placeholder', // see https://alova.js.org/learning/response-cache/#cache-replaceholder-mode

interface/src/api/system.ts

@@ -1,8 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-
-/* eslint-disable @typescript-eslint/no-unsafe-return */
 import type { HardwareStatus, LogSettings, SystemStatus } from 'types';
 
 import { alovaInstance, alovaInstanceGH } from './endpoints';
@@ -31,13 +26,13 @@ export const fetchLogES = () => alovaInstance.Get('/es/log');
 // Get versions from github
 export const getStableVersion = () =>
   alovaInstanceGH.Get('latest', {
-    transformData(response) {
+    transform(response: { data: { name: string } }) {
       return response.data.name.substring(1);
     }
   });
 export const getDevVersion = () =>
   alovaInstanceGH.Get('tags/latest', {
-    transformData(response) {
+    transform(response: { data: { name: string } }) {
       return response.data.name.split(/\s+/).splice(-1)[0].substring(1);
     }
   });

interface/src/app/main/CustomEntities.tsx

@@ -20,7 +20,7 @@ import {
   Table
 } from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
-import { updateState, useRequest } from 'alova';
+import { updateState, useRequest } from 'alova/client';
 import {
   BlockNavigation,
   ButtonRow,
@@ -182,7 +182,6 @@ const CustomEntities: FC = () => {
 
   const onDialogSave = (updatedItem: EntityItem) => {
     setDialogOpen(false);
-
     updateState('entities', (data: EntityItem[]) => {
       const new_data = creating
         ? [

interface/src/app/main/Customization.tsx

@@ -40,7 +40,7 @@ import {
 } from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
 import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import RestartMonitor from 'app/status/RestartMonitor';
 import {
   BlockNavigation,

interface/src/app/main/Devices.tsx

@@ -57,7 +57,7 @@ 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';
+import { useRequest } from 'alova/client';
 import { ButtonRow, MessageBox, SectionContent, useLayoutTitle } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';

interface/src/app/main/Help.tsx

@@ -18,8 +18,10 @@ import {
   Typography
 } from '@mui/material';
 
+import * as SystemApi from 'api/system';
+
 import * as EMSESP from 'app/main/api';
-import { useRequest } from 'alova';
+import { useAutoRequest, useRequest } from 'alova/client';
 import { SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
@@ -36,6 +38,9 @@ const Help: FC = () => {
     }
   );
 
+  // TODO check useAutoRequest - https://alova.js.org/tutorial/client/strategy/use-auto-request/#basic-usage
+  const { data, loading } = useAutoRequest(SystemApi.readSystemStatus);
+
   onGetAPI((event) => {
     const anchor = document.createElement('a');
     anchor.href = URL.createObjectURL(
@@ -45,7 +50,7 @@ const Help: FC = () => {
     );
 
     anchor.download =
-      'emsesp_' + event.sendArgs[0].device + '_' + event.sendArgs[0].entity + '.txt';
+      'emsesp_' + event.args[0].device + '_' + event.args[0].entity + '.txt';
     anchor.click();
     URL.revokeObjectURL(anchor.href);
     toast.info(LL.DOWNLOAD_SUCCESSFUL());
@@ -57,7 +62,15 @@ const Help: FC = () => {
     });
   };
 
+  console.log('loading: ' + loading + ' data2: ' + data);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
   return (
+    <>
+      <div>version is {data.emsesp_version}</div>
       <SectionContent>
         <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
           <ListItem>
@@ -139,6 +152,7 @@ const Help: FC = () => {
           </Typography>
         </Box>
       </SectionContent>
+    </>
   );
 };
 

interface/src/app/main/Modules.tsx

@@ -8,6 +8,8 @@ import CircleIcon from '@mui/icons-material/Circle';
 import WarningIcon from '@mui/icons-material/Warning';
 import { Box, Button, Typography } from '@mui/material';
 
+import { alovaInstance } from 'api/endpoints';
+
 import {
   Body,
   Cell,
@@ -18,7 +20,7 @@ import {
   Table
 } from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
-import { updateState, useRequest } from 'alova';
+import { updateState, useRequest } from 'alova/client';
 import {
   BlockNavigation,
   ButtonRow,
@@ -122,14 +124,19 @@ const Modules: FC = () => {
     return mi.enabled !== mi.o_enabled || mi.license !== mi.o_license;
   }
 
+  // TODO example of how to use updateState
+  // TODO see https://alova.js.org/api/states/#updatestate
   const updateModuleItem = (updatedItem: ModuleItem) => {
-    updateState('modules', (data: ModuleItem[]) => {
+    updateState<ModuleItem[]>(
+      [alovaInstance.snapshots.match('modules', true)] as any,
+      (data: ModuleItem[]) => {
         const new_data = data.map((mi) =>
           mi.id === updatedItem.id ? { ...mi, ...updatedItem } : mi
         );
         setNumChanges(new_data.filter((mi) => hasModulesChanged(mi)).length);
         return new_data;
-    });
+      }
+    );
   };
 
   const saveModules = async () => {

interface/src/app/main/Scheduler.tsx

@@ -19,7 +19,7 @@ import {
   Table
 } from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
-import { updateState, useRequest } from 'alova';
+import { updateState, useRequest } from 'alova/client';
 import {
   BlockNavigation,
   ButtonRow,
@@ -177,7 +177,6 @@ const Scheduler: FC = () => {
 
   const onDialogSave = (updatedItem: ScheduleItem) => {
     setDialogOpen(false);
-
     updateState('schedule', (data: ScheduleItem[]) => {
       const new_data = creating
         ? [

interface/src/app/main/Sensors.tsx

@@ -21,7 +21,7 @@ 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';
+import { useRequest } from 'alova/client';
 import { ButtonRow, SectionContent, useLayoutTitle } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';

interface/src/app/main/api.ts

@@ -65,7 +65,7 @@ export const readDeviceEntities = (id: number) =>
   alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities`, {
     params: { id },
     responseType: 'arraybuffer',
-    transformData(data) {
+    transform(data) {
       return (data as DeviceEntity[]).map((de: DeviceEntity) => ({
         ...de,
         o_m: de.m,
@@ -89,7 +89,7 @@ export const writeDeviceName = (data: { id: number; name: string }) =>
 export const readSchedule = () =>
   alovaInstance.Get<ScheduleItem[]>('/rest/schedule', {
     name: 'schedule',
-    transformData(data) {
+    transform(data) {
       return (data as Schedule).schedule.map((si: ScheduleItem) => ({
         ...si,
         o_id: si.id,
@@ -110,7 +110,7 @@ export const writeSchedule = (data: Schedule) =>
 export const readModules = () =>
   alovaInstance.Get<ModuleItem[]>('/rest/modules', {
     name: 'modules',
-    transformData(data) {
+    transform(data) {
       return (data as Modules).modules.map((mi: ModuleItem) => ({
         ...mi,
         o_enabled: mi.enabled,
@@ -128,7 +128,7 @@ export const writeModules = (data: {
 export const readCustomEntities = () =>
   alovaInstance.Get<EntityItem[]>('/rest/customEntities', {
     name: 'entities',
-    transformData(data) {
+    transform(data) {
       return (data as Entities).entities.map((ei: EntityItem) => ({
         ...ei,
         o_id: ei.id,

interface/src/app/settings/ApplicationSettings.tsx

@@ -19,7 +19,7 @@ import {
 
 import * as SystemApi from 'api/system';
 
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import RestartMonitor from 'app/status/RestartMonitor';
 import type { ValidateFieldsError } from 'async-validator';
 import {

interface/src/app/settings/NTPSettings.tsx

@@ -7,7 +7,7 @@ import { Button, Checkbox, MenuItem } from '@mui/material';
 
 import * as NTPApi from 'api/ntp';
 
-import { updateState } from 'alova';
+import { updateState } from 'alova/client';
 import type { ValidateFieldsError } from 'async-validator';
 import {
   BlockFormControlLabel,
@@ -73,6 +73,7 @@ const NTPSettings: FC = () => {
     const changeTimeZone = (event: React.ChangeEvent<HTMLInputElement>) => {
       updateFormValue(event);
 
+      // TODO fix
       updateState('ntpSettings', (settings: NTPSettingsType) => ({
         ...settings,
         tz_label: event.target.value,

interface/src/app/settings/Settings.tsx

@@ -24,7 +24,7 @@ import {
 import * as SystemApi from 'api/system';
 
 import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import { SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
 import { useI18nContext } from 'i18n/i18n-react';

interface/src/app/settings/UploadDownload.tsx

@@ -7,7 +7,7 @@ import { Box, Button, Divider, Link, Typography } from '@mui/material';
 import * as SystemApi from 'api/system';
 
 import * as EMSESP from 'app/main/api';
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import type { APIcall } from 'app/main/types';
 import {
   FormLoader,
@@ -150,11 +150,7 @@ const UploadDownload: FC = () => {
     saveFile(event.data, 'schedule.json');
   });
   onGetAPI((event) => {
-    saveFile(
+    saveFile(event.data, event.args[0].device + '_' + event.args[0].entity + '.txt');
-      event.data,
-
-      event.sendArgs[0].device + '_' + event.sendArgs[0].entity + '.txt'
-    );
   });
 
   const downloadSettings = async () => {

interface/src/app/settings/network/NetworkSettings.tsx

@@ -26,7 +26,7 @@ import {
 import * as NetworkApi from 'api/network';
 import * as SystemApi from 'api/system';
 
-import { updateState, useRequest } from 'alova';
+import { updateState, useRequest } from 'alova/client';
 import type { ValidateFieldsError } from 'async-validator';
 import {
   BlockFormControlLabel,

interface/src/app/settings/network/WiFiNetworkScanner.tsx

@@ -6,7 +6,7 @@ import { Button } from '@mui/material';
 
 import * as NetworkApi from 'api/network';
 
-import { updateState, useRequest } from 'alova';
+import { updateState, useRequest } from 'alova/client';
 import { ButtonRow, FormLoader, SectionContent } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
@@ -47,6 +47,7 @@ const WiFiNetworkScanner: FC = () => {
   onCompleteScanNetworks(() => {
     pollCount.current = 0;
     setErrorMessage(undefined);
+    // TODO fix
     updateState('listNetworks', () => undefined);
     void getNetworkList();
   });

interface/src/app/settings/security/GenerateToken.tsx

@@ -17,7 +17,7 @@ import {
 import * as SecurityApi from 'api/security';
 
 import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import { MessageBox } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 

interface/src/app/status/APStatus.tsx

@@ -18,7 +18,7 @@ import type { Theme } from '@mui/material';
 
 import * as APApi from 'api/ap';
 
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { APStatusType } from 'types';

interface/src/app/status/Activity.tsx

@@ -14,7 +14,7 @@ import {
   Table
 } from '@table-library/react-table-library/table';
 import { useTheme as tableTheme } from '@table-library/react-table-library/theme';
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { Translation } from 'i18n/i18n-types';

interface/src/app/status/HardwareStatus.tsx

@@ -22,7 +22,7 @@ import {
 
 import * as SystemApi from 'api/system';
 
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 

interface/src/app/status/MqttStatus.tsx

@@ -19,7 +19,7 @@ import type { Theme } from '@mui/material';
 
 import * as MqttApi from 'api/mqtt';
 
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { MqttStatusType } from 'types';

interface/src/app/status/NTPStatus.tsx

@@ -30,7 +30,7 @@ import type { Theme } from '@mui/material';
 import * as NTPApi from 'api/ntp';
 
 import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { NTPStatusType, Time } from 'types';

interface/src/app/status/NetworkStatus.tsx

@@ -22,7 +22,7 @@ import type { Theme } from '@mui/material';
 
 import * as NetworkApi from 'api/network';
 
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { NetworkStatusType } from 'types';

interface/src/app/status/RestartMonitor.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react';
 
 import * as SystemApi from 'api/system';
 
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import { FormLoader } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 

interface/src/app/status/Status.tsx

@@ -34,7 +34,7 @@ import {
 import * as SystemApi from 'api/system';
 
 import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import { busConnectionStatus } from 'app/main/types';
 import { FormLoader, SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
@@ -67,9 +67,11 @@ const SystemStatus: FC = () => {
 
   const {
     data: data,
-    send: loadData,
+    loading,
-    error
+    send: loadData
-  } = useRequest(SystemApi.readSystemStatus, { force: true });
+  } = useRequest(SystemApi.readSystemStatus, {
+    initialData: []
+  });
 
   const theme = useTheme();
 
@@ -270,8 +272,12 @@ const SystemStatus: FC = () => {
   );
 
   const content = () => {
-    if (!data) {
+    // if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
+    //   return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
+    // }
+
+    if (loading) {
+      return <>fddfdd</>;
     }
 
     return (
@@ -405,9 +411,7 @@ const SystemStatus: FC = () => {
     );
   };
 
-  return (
+  return <SectionContent>{content()}</SectionContent>;
-    <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
-  );
 };
 
 export default SystemStatus;

interface/src/app/status/SystemLog.tsx

@@ -17,8 +17,7 @@ import {
 import * as SystemApi from 'api/system';
 import { fetchLogES } from 'api/system';
 
-import { useSSE } from '@alova/scene-react';
+import { useRequest, useSSE } from 'alova/client';
-import { useRequest } from 'alova';
 import {
   BlockFormControlLabel,
   BlockNavigation,

interface/src/components/upload/SingleUpload.tsx

@@ -8,7 +8,7 @@ import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import { Box, Button, LinearProgress, Typography, useTheme } from '@mui/material';
 import type { Theme } from '@mui/material';
 
-import type { Progress } from 'alova';
+import type { Progress } from 'alova/client';
 import { useI18nContext } from 'i18n/i18n-react';
 
 const getBorderColor = (theme: Theme, props: DropzoneState) => {

interface/src/contexts/authentication/Authentication.tsx

@@ -6,7 +6,7 @@ import { toast } from 'react-toastify';
 import * as AuthenticationApi from 'api/authentication';
 import { ACCESS_TOKEN } from 'api/endpoints';
 
-import { useRequest } from 'alova';
+import { useRequest } from 'alova/client';
 import { LoadingSpinner } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { Me } from 'types';

interface/src/utils/useRest.ts

@@ -2,14 +2,13 @@ import { useState } from 'react';
 import { useBlocker } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
-import { type Method, useRequest } from 'alova';
+import type { AlovaGenerics, Method } from 'alova';
+import { useRequest } from 'alova/client';
 import { useI18nContext } from 'i18n/i18n-react';
 
 export interface RestRequestOptions<D> {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  read: () => Method<AlovaGenerics>;
-  read: () => Method<any, any, any, any, any, any, any>;
+  update: (value: D) => Method<AlovaGenerics>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  update: (value: D) => Method<any, any, any, any, any, any, any>;
 }
 
 export const useRest = <D>({ read, update }: RestRequestOptions<D>) => {
@@ -26,12 +25,14 @@ export const useRest = <D>({ read, update }: RestRequestOptions<D>) => {
     data,
     send: readData,
     update: updateData,
+    // TODO refactor
     onComplete: onReadComplete
   } = useRequest(read());
 
   const {
     loading: saving,
     send: writeData,
+    // TODO refactor
     onSuccess: onWriteSuccess
   } = useRequest((newData: D) => update(newData), { immediate: false });