alova 3

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

@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'react';
-import type { FC } from 'react';
 import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
 
 import { Tab } from '@mui/material';
@@ -12,7 +11,7 @@ import NetworkSettings from './NetworkSettings';
 import { WiFiConnectionContext } from './WiFiConnectionContext';
 import WiFiNetworkScanner from './WiFiNetworkScanner';
 
-const Network: FC = () => {
+const Network = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.SETTINGS_OF(LL.NETWORK(0)));
 

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

@@ -1,5 +1,4 @@
 import { useContext, useEffect, useState } from 'react';
-import type { FC } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -48,7 +47,7 @@ import RestartMonitor from '../../status/RestartMonitor';
 import { WiFiConnectionContext } from './WiFiConnectionContext';
 import { isNetworkOpen, networkSecurityMode } from './WiFiNetworkSelector';
 
-const NetworkSettings: FC = () => {
+const NetworkSettings = () => {
   const { LL } = useI18nContext();
 
   const { selectedNetwork, deselectNetwork } = useContext(WiFiConnectionContext);
@@ -80,19 +79,22 @@ const NetworkSettings: FC = () => {
   useEffect(() => {
     if (!initialized && data) {
       if (selectedNetwork) {
-        updateState('networkSettings', (current_data: NetworkSettingsType) => ({
-          ssid: selectedNetwork.ssid,
-          bssid: selectedNetwork.bssid,
-          password: current_data ? current_data.password : '',
-          hostname: current_data?.hostname,
-          static_ip_config: false,
-          bandwidth20: false,
-          tx_power: 0,
-          nosleep: false,
-          enableMDNS: true,
-          enableCORS: false,
-          CORSOrigin: '*'
-        }));
+        void updateState(
+          NetworkApi.readNetworkSettings(),
+          (current_data: NetworkSettingsType) => ({
+            ssid: selectedNetwork.ssid,
+            bssid: selectedNetwork.bssid,
+            password: current_data ? current_data.password : '',
+            hostname: current_data?.hostname,
+            static_ip_config: false,
+            bandwidth20: false,
+            tx_power: 0,
+            nosleep: false,
+            enableMDNS: true,
+            enableCORS: false,
+            CORSOrigin: '*'
+          })
+        );
       }
       setInitialized(true);
     }

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

@@ -1,5 +1,4 @@
 import { useRef, useState } from 'react';
-import type { FC } from 'react';
 
 import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
 import { Button } from '@mui/material';
@@ -15,23 +14,28 @@ import WiFiNetworkSelector from './WiFiNetworkSelector';
 const NUM_POLLS = 10;
 const POLLING_FREQUENCY = 1000;
 
-const WiFiNetworkScanner: FC = () => {
+const WiFiNetworkScanner = () => {
   const pollCount = useRef(0);
   const { LL } = useI18nContext();
   const [errorMessage, setErrorMessage] = useState<string>();
 
-  const { send: scanNetworks, onComplete: onCompleteScanNetworks } = useRequest(
-    NetworkApi.scanNetworks
-  ); // is called on page load to start network scan
-  const {
-    data: networkList,
-    send: getNetworkList,
-    onSuccess: onSuccessNetworkList
-  } = useRequest(NetworkApi.listNetworks, {
-    immediate: false
-  });
+  // 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();
+    }
+  );
 
-  onSuccessNetworkList((event) => {
+  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) {
@@ -44,14 +48,6 @@ const WiFiNetworkScanner: FC = () => {
     }
   });
 
-  onCompleteScanNetworks(() => {
-    pollCount.current = 0;
-    setErrorMessage(undefined);
-    // TODO fix
-    updateState('listNetworks', () => undefined);
-    void getNetworkList();
-  });
-
   const renderNetworkScanner = () => {
     if (!networkList) {
       return (

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

@@ -1,5 +1,4 @@
 import { useContext } from 'react';
-import type { FC } from 'react';
 
 import LockIcon from '@mui/icons-material/Lock';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
@@ -18,15 +17,11 @@ import type { Theme } from '@mui/material';
 
 import { MessageBox } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
-import type { WiFiNetwork, WiFiNetworkList } from 'types';
+import type { WiFiNetwork } from 'types';
 import { WiFiEncryptionType } from 'types';
 
 import { WiFiConnectionContext } from './WiFiConnectionContext';
 
-interface WiFiNetworkSelectorProps {
-  networkList: WiFiNetworkList;
-}
-
 export const isNetworkOpen = ({ encryption_type }: WiFiNetwork) =>
   encryption_type === WiFiEncryptionType.WIFI_AUTH_OPEN;
 
@@ -62,7 +57,7 @@ const networkQualityHighlight = ({ rssi }: WiFiNetwork, theme: Theme) => {
   return theme.palette.success.main;
 };
 
-const WiFiNetworkSelector: FC<WiFiNetworkSelectorProps> = ({ networkList }) => {
+function WiFiNetworkSelector({ networkList }) {
   const { LL } = useI18nContext();
   const theme = useTheme();
 
@@ -100,6 +95,6 @@ const WiFiNetworkSelector: FC<WiFiNetworkSelectorProps> = ({ networkList }) => {
   }
 
   return <List>{networkList.networks.map(renderNetwork)}</List>;
-};
+}
 
 export default WiFiNetworkSelector;