default Alova v2

interface/src/app/settings/ApplicationSettings.tsx

@@ -18,7 +18,8 @@ import {
 
 import { readHardwareStatus, restart } from 'api/system';
 
-import { useRequest } from 'alova/client';
+// import { useRequest } from 'alova/client'  // TODO replace when Alova 3 is released
+import { useRequest } from 'alova';
 import RestartMonitor from 'app/status/RestartMonitor';
 import type { ValidateFieldsError } from 'async-validator';
 import {
@@ -49,9 +50,7 @@ export function boardProfileSelectItems() {
 }
 
 const ApplicationSettings = () => {
-  const { data: hardwareData } = useRequest(readHardwareStatus, {
-    initialData: { psram: false }
-  });
+  const { data: hardwareData } = useRequest(readHardwareStatus);
 
   const {
     loadData,
@@ -83,12 +82,15 @@ const ApplicationSettings = () => {
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
-  const { loading: processingBoard, send: readBoardProfile } = useRequest(
-    (boardProfile: string) => getBoardProfile(boardProfile),
-    {
-      immediate: false
-    }
-  ).onSuccess((event) => {
+  const {
+    loading: processingBoard,
+    send: readBoardProfile,
+    onSuccess: onSuccessBoardProfile
+  } = useRequest((boardProfile: string) => getBoardProfile(boardProfile), {
+    immediate: false
+  });
+
+  onSuccessBoardProfile((event) => {
     const response = event.data as Settings;
     updateDataValue({
       ...data,
@@ -105,6 +107,29 @@ const ApplicationSettings = () => {
     });
   });
 
+  // TODO replace with Alova 3
+  // const { loading: processingBoard, send: readBoardProfile } = useRequest(
+  //   (boardProfile: string) => getBoardProfile(boardProfile),
+  //   {
+  //     immediate: false
+  //   }
+  // ).onSuccess((event) => {
+  //   const response = event.data as Settings;
+  //   updateDataValue({
+  //     ...data,
+  //     board_profile: response.board_profile,
+  //     led_gpio: response.led_gpio,
+  //     dallas_gpio: response.dallas_gpio,
+  //     rx_gpio: response.rx_gpio,
+  //     tx_gpio: response.tx_gpio,
+  //     pbutton_gpio: response.pbutton_gpio,
+  //     phy_type: response.phy_type,
+  //     eth_power: response.eth_power,
+  //     eth_phy_addr: response.eth_phy_addr,
+  //     eth_clock_mode: response.eth_clock_mode
+  //   });
+  // });
+
   const { send: restartCommand } = useRequest(restart(), {
     immediate: false
   });
@@ -118,7 +143,7 @@ const ApplicationSettings = () => {
   useLayoutTitle(LL.SETTINGS_OF(LL.APPLICATION()));
 
   const content = () => {
-    if (!data) {
+    if (!data || !hardwareData) {
       return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
     }
 

interface/src/app/settings/NTPSettings.tsx

@@ -7,7 +7,8 @@ import { Button, Checkbox, MenuItem } from '@mui/material';
 import * as NTPApi from 'api/ntp';
 import { readNTPSettings } from 'api/ntp';
 
-import { updateState } from 'alova/client';
+// import { updateState } from 'alova/client'; // TODO replace when Alova 3 is released
+import { updateState } from 'alova';
 import type { ValidateFieldsError } from 'async-validator';
 import {
   BlockFormControlLabel,

interface/src/app/settings/Settings.tsx

@@ -24,7 +24,8 @@ import {
 import * as SystemApi from 'api/system';
 
 import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
+// import { useRequest } from 'alova/client'  // TODO replace when Alova 3 is released
+import { useRequest } from 'alova';
 import { SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
 import { useI18nContext } from 'i18n/i18n-react';

interface/src/app/settings/UploadDownload.tsx

@@ -14,7 +14,8 @@ import {
 } from 'api/app';
 import { getDevVersion, getStableVersion } from 'api/system';
 
-import { useRequest } from 'alova/client';
+// import { useRequest } from 'alova/client'  // TODO replace when Alova 3 is released
+import { useRequest } from 'alova';
 import type { APIcall } from 'app/main/types';
 import {
   FormLoader,
@@ -31,6 +32,92 @@ const UploadDownload = () => {
   const [restarting, setRestarting] = useState<boolean>();
   const [md5, setMd5] = useState<string>();
 
+  const { send: sendSettings, onSuccess: onSuccessGetSettings } = useRequest(
+    getSettings(),
+    {
+      immediate: false
+    }
+  );
+  const { send: sendCustomizations, onSuccess: onSuccessGetCustomizations } =
+    useRequest(getCustomizations(), {
+      immediate: false
+    });
+  const { send: sendEntities, onSuccess: onSuccessGetEntities } = useRequest(
+    getEntities(),
+    {
+      immediate: false
+    }
+  );
+  const { send: sendSchedule, onSuccess: onSuccessGetSchedule } = useRequest(
+    getSchedule(),
+    {
+      immediate: false
+    }
+  );
+  const { send: getAPI, onSuccess: onGetAPI } = useRequest(
+    (data: APIcall) => API(data),
+    {
+      immediate: false
+    }
+  );
+
+  // Alova 3 code...
+  // const {
+  //   loading: isUploading,
+  //   uploading: progress,
+  //   send: sendUpload,
+  //   abort: cancelUpload
+  // } = useRequest(SystemApi.uploadFile, {
+  //   immediate: false
+  // }).onSuccess(({ data }) => {
+  //   if (data) {
+  //     setMd5(data.md5);
+  //     toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL());
+  //   } else {
+  //     setRestarting(true);
+  //   }
+  // });
+  const {
+    loading: isUploading,
+    uploading: progress,
+    send: sendUpload,
+    onSuccess: onSuccessUpload,
+    abort: cancelUpload
+  } = useRequest(SystemApi.uploadFile, {
+    immediate: false
+  });
+
+  onSuccessUpload(({ data }) => {
+    if (data) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      setMd5(data.md5);
+      toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL());
+    } else {
+      setRestarting(true);
+    }
+  });
+  onSuccessGetSettings((event) => {
+    saveFile(event.data, 'settings.json');
+  });
+  onSuccessGetCustomizations((event) => {
+    saveFile(event.data, 'customizations.json');
+  });
+  onSuccessGetEntities((event) => {
+    saveFile(event.data, 'entities.json');
+  });
+  onSuccessGetSchedule((event) => {
+    saveFile(event.data, 'schedule.json');
+  });
+  onGetAPI((event) => {
+    saveFile(
+      event.data,
+      event.sendArgs[0].device + '_' + event.sendArgs[0].entity + '.txt'
+    );
+  });
+
+  // TODO Alova 3 code...
+  /*
+  
   const { send: sendSettings } = useRequest(getSettings(), {
     immediate: false
   }).onSuccess((event) => {
@@ -64,6 +151,8 @@ const UploadDownload = () => {
     );
   });
 
+  */
+
   const {
     data: data,
     send: loadData,
@@ -96,22 +185,6 @@ const UploadDownload = () => {
     return data.esp_platform;
   };
 
-  const {
-    loading: isUploading,
-    uploading: progress,
-    send: sendUpload,
-    abort: cancelUpload
-  } = useRequest(SystemApi.uploadFile, {
-    immediate: false
-  }).onSuccess(({ data }) => {
-    if (data) {
-      setMd5(data.md5);
-      toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL());
-    } else {
-      setRestarting(true);
-    }
-  });
-
   const startUpload = async (files: File[]) => {
     await sendUpload(files[0]).catch((error: Error) => {
       if (error.message === 'The user aborted a request') {

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

@@ -25,7 +25,8 @@ import {
 import * as NetworkApi from 'api/network';
 import * as SystemApi from 'api/system';
 
-import { updateState, useRequest } from 'alova/client';
+import { updateState, useRequest } from 'alova';
+// import { updateState, useRequest } from 'alova/client'; // TODO replace when Alova 3 is released
 import type { ValidateFieldsError } from 'async-validator';
 import {
   BlockFormControlLabel,

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

@@ -5,7 +5,8 @@ import { Button } from '@mui/material';
 
 import * as NetworkApi from 'api/network';
 
-import { updateState, useRequest } from 'alova/client';
+// import { updateState, useRequest } from 'alova/client'; // TODO replace when Alova 3 is released
+import { updateState, useRequest } from 'alova';
 import { ButtonRow, FormLoader, SectionContent } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
@@ -20,22 +21,18 @@ const WiFiNetworkScanner = () => {
   const [errorMessage, setErrorMessage] = useState<string>();
 
   // is called on page load to start network scan
-  const { send: scanNetworks } = useRequest(NetworkApi.scanNetworks).onComplete(
-    () => {
-      pollCount.current = 0;
-      setErrorMessage(undefined);
-      void updateState(NetworkApi.listNetworks(), () => undefined);
-      void getNetworkList();
-    }
-  );
 
-  const { data: networkList, send: getNetworkList } = useRequest(
-    NetworkApi.listNetworks,
-    {
-      immediate: false
-    }
-  ).onSuccess((event) => {
-    // is called when network scan is completed
+  const { send: scanNetworks, onComplete: onCompleteScanNetworks } = useRequest(
+    NetworkApi.scanNetworks
+  );
+  const {
+    data: networkList,
+    send: getNetworkList,
+    onSuccess: onSuccessNetworkList
+  } = useRequest(NetworkApi.listNetworks, {
+    immediate: false
+  });
+  onSuccessNetworkList((event) => {
     if (!event.data) {
       const completedPollCount = pollCount.current + 1;
       if (completedPollCount < NUM_POLLS) {
@@ -48,6 +45,42 @@ const WiFiNetworkScanner = () => {
     }
   });
 
+  onCompleteScanNetworks(() => {
+    pollCount.current = 0;
+    setErrorMessage(undefined);
+    updateState('listNetworks', () => undefined);
+    void getNetworkList();
+  });
+
+  // Alova 3 code...
+  // const { send: scanNetworks } = useRequest(NetworkApi.scanNetworks).onComplete(
+  //   () => {
+  //     pollCount.current = 0;
+  //     setErrorMessage(undefined);
+  //     void updateState(NetworkApi.listNetworks(), () => undefined);
+  //     void getNetworkList();
+  //   }
+  // );
+
+  // const { data: networkList, send: getNetworkList } = useRequest(
+  //   NetworkApi.listNetworks,
+  //   {
+  //     immediate: false
+  //   }
+  // ).onSuccess((event) => {
+  //   // is called when network scan is completed
+  //   if (!event.data) {
+  //     const completedPollCount = pollCount.current + 1;
+  //     if (completedPollCount < NUM_POLLS) {
+  //       pollCount.current = completedPollCount;
+  //       setTimeout(getNetworkList, POLLING_FREQUENCY);
+  //     } else {
+  //       setErrorMessage(LL.PROBLEM_LOADING());
+  //       pollCount.current = 0;
+  //     }
+  //   }
+  // });
+
   const renderNetworkScanner = () => {
     if (!networkList) {
       return (

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

@@ -17,7 +17,7 @@ import type { Theme } from '@mui/material';
 
 import { MessageBox } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
-import type { WiFiNetwork } from 'types';
+import type { WiFiNetwork, WiFiNetworkList } from 'types';
 import { WiFiEncryptionType } from 'types';
 
 import { WiFiConnectionContext } from './WiFiConnectionContext';
@@ -57,7 +57,7 @@ const networkQualityHighlight = ({ rssi }: WiFiNetwork, theme: Theme) => {
   return theme.palette.success.main;
 };
 
-function WiFiNetworkSelector({ networkList }) {
+const WiFiNetworkSelector = ({ networkList }: { networkList: WiFiNetworkList }) => {
   const { LL } = useI18nContext();
   const theme = useTheme();
 
@@ -95,6 +95,6 @@ function WiFiNetworkSelector({ networkList }) {
   }
 
   return <List>{networkList.networks.map(renderNetwork)}</List>;
-}
+};
 
 export default WiFiNetworkSelector;

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

@@ -16,11 +16,17 @@ import {
 import * as SecurityApi from 'api/security';
 
 import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
+// import { useRequest } from 'alova/client'  // TODO replace when Alova 3 is released
+import { useRequest } from 'alova';
 import { MessageBox } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
-export default function GenerateToken({ username, onClose }) {
+interface GenerateTokenProps {
+  username?: string;
+  onClose: () => void;
+}
+
+const GenerateToken = ({ username, onClose }: GenerateTokenProps) => {
   const { LL } = useI18nContext();
   const open = !!username;
 
@@ -79,4 +85,6 @@ export default function GenerateToken({ username, onClose }) {
       </DialogActions>
     </Dialog>
   );
-}
+};
+
+export default GenerateToken;