refactor(ts): network components to ts, fix typo (#507)

webserver/web-interface/src/components/profile/PhaseEditor.tsx

@@ -40,7 +40,7 @@ export function PhaseEditor({ phase, onChange }: PhaseEditorProps) {
         </Grid>
         <Grid xs={6}>
           <SettingsNumberInput
-            label={phase.type === PhaseType.FLOW ? 'Pressulre limit' : 'Flow limit'}
+            label={phase.type === PhaseType.FLOW ? 'Pressure limit' : 'Flow limit'}
             value={phase.restriction || 0}
             maxDecimals={1}
             onChange={(v) => handleRestrictionChange(constrain(v, 0, 10))}

webserver/web-interface/src/components/wifi/NetworkTypes.ts

@@ -0,0 +1,11 @@
+export type WifiStatus = {
+  status: 'connected' | 'disconnected';
+  ssid: string,
+  ip: string,
+}
+
+export type Network = {
+  ssid: string;
+  rssi: number;
+  secured: boolean;
+}

webserver/web-interface/src/components/wifi/WifiSettingsCard.jsx → webserver/web-interface/src/components/wifi/WifiSettingsCard.tsx

@@ -5,11 +5,12 @@ import {
 import React, { useEffect, useState } from 'react';
 import { disconnectFromWifi, getWifiStatus } from '../client/WifiClient';
 import Loader from '../loader/Loader';
-import WifiStatus from './WifiStatus';
+import WifiStatusDisplay from './WifiStatus';
 import AvailableNetworksDrawer from './available-networks/AvailableNetworksDrawer';
+import { WifiStatus } from './NetworkTypes';
 
 export default function WifiSettingsCard() {
-  const [wifiStatus, setWifiStatus] = useState({});
+  const [wifiStatus, setWifiStatus] = useState<WifiStatus | undefined>(undefined);
   const [wifiStatusLoading, setWifiStatusLoading] = useState(true);
   const [wifiDrawerOpen, setWiFiDrawerOpen] = useState(false);
   const theme = useTheme();
@@ -24,7 +25,7 @@ export default function WifiSettingsCard() {
       const status = await getWifiStatus();
       setWifiStatus(status);
     } catch (e) {
-      setWifiStatus(null);
+      setWifiStatus(undefined);
     } finally {
       setWifiStatusLoading(false);
     }
@@ -46,7 +47,7 @@ export default function WifiSettingsCard() {
           <Typography variant="h5" sx={{ mb: theme.spacing(2) }}>
             WiFi Status
           </Typography>
-          {wifiStatusLoading ? <Loader /> : <WifiStatus status={wifiStatus} />}
+          {wifiStatusLoading ? <Loader /> : <WifiStatusDisplay status={wifiStatus} />}
         </CardContent>
         <CardActions>
           {isConnected() && <Button variant="outlined" size="small" color="secondary" onClick={() => disconnect()}>Disconnect</Button>}

webserver/web-interface/src/components/wifi/WifiStatus.jsx → webserver/web-interface/src/components/wifi/WifiStatus.tsx

@@ -2,9 +2,13 @@ import React from 'react';
 import SignalWifi3BarIcon from '@mui/icons-material/SignalWifi3Bar';
 import SignalWifiOffIcon from '@mui/icons-material/SignalWifiOff';
 import { Stack, Typography } from '@mui/material';
-import { WifiStatusPropType } from './NetworkPropTypes';
+import { WifiStatus } from './NetworkTypes';
 
-export default function WifiStatus({ status = undefined }) {
+type WifiStatusProps = {
+  status?: WifiStatus
+}
+
+export default function WifiStatusDisplay({ status = undefined }: WifiStatusProps) {
   function isConnected() {
     return status && status.status === 'connected';
   }
@@ -13,7 +17,7 @@ export default function WifiStatus({ status = undefined }) {
     ? (
       <Stack spacing={1} direction="row" alignItems="center">
         <SignalWifi3BarIcon color="success" />
-        <Typography>{`${status.ssid} (${status.ip})`}</Typography>
+        <Typography>{`${status?.ssid} (${status?.ip})`}</Typography>
       </Stack>
     )
     : (
@@ -23,7 +27,3 @@ export default function WifiStatus({ status = undefined }) {
       </Stack>
     );
 }
-
-WifiStatus.propTypes = {
-  status: WifiStatusPropType,
-};

webserver/web-interface/src/components/wifi/available-networks/AvailableNetwork.jsx → webserver/web-interface/src/components/wifi/available-networks/AvailableNetwork.tsx

@@ -3,17 +3,23 @@ import SignalWifi3BarIcon from '@mui/icons-material/SignalWifi3Bar';
 import {
   Accordion, AccordionSummary, Alert, Button, TextField, Typography, AccordionDetails, Stack,
 } from '@mui/material';
-import PropTypes from 'prop-types';
-import { Network } from '../NetworkPropTypes';
+import { Network } from '../NetworkTypes';
 import { connectToWifi } from '../../client/WifiClient';
 import Loader from '../../loader/Loader';
 
+type AvailableNetworkProps = {
+  network: Network;
+  onClick: () => void;
+  onConnected: (network: Network) => void;
+  expanded: boolean;
+}
+
 export default function AvailableNetwork({
   network,
-  onClick = () => false,
+  onClick,
   expanded = false,
-  onConnected = () => false,
-}) {
+  onConnected,
+}: AvailableNetworkProps) {
   const [password, setPassword] = useState('');
   const [connecting, setConnecting] = useState(false);
   const [connectionError, setConnectionError] = useState(false);
@@ -70,10 +76,3 @@ export default function AvailableNetwork({
     </Accordion>
   );
 }
-
-AvailableNetwork.propTypes = {
-  network: Network.isRequired,
-  onClick: PropTypes.func,
-  onConnected: PropTypes.func,
-  expanded: PropTypes.bool,
-};

webserver/web-interface/src/components/wifi/available-networks/AvailableNetworks.jsx → webserver/web-interface/src/components/wifi/available-networks/AvailableNetworks.tsx

@@ -1,15 +1,19 @@
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import { Alert, Box } from '@mui/material';
 import { getAvailableNetworks } from '../../client/WifiClient';
 import Loader from '../../loader/Loader';
 import AvailableNetwork from './AvailableNetwork';
+import { Network } from '../NetworkTypes';
 
-export default function AvailableNetworks({ onConnected = () => false }) {
-  const [networks, setNetworks] = useState([]);
+type AvailableNetworksProps = {
+  onConnected: () => void;
+}
+
+export default function AvailableNetworks({ onConnected }: AvailableNetworksProps) {
+  const [networks, setNetworks] = useState<Network[]>([]);
   const [loading, setLoading] = useState(false);
   const [networksError, setNetworksError] = useState(false);
-  const [expandedNetworkId, setExpandedNetworkId] = useState(null);
+  const [expandedNetworkId, setExpandedNetworkId] = useState<string | null>(null);
 
   useEffect(() => {
     const loadNetworks = async () => {
@@ -26,7 +30,9 @@ export default function AvailableNetworks({ onConnected = () => false }) {
       }
     };
     loadNetworks();
-  }, [loading]);
+  // only load networks once per render of this component
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   if (networksError) {
     return <Alert severity="error">Failed to load available networks</Alert>;
@@ -53,7 +59,3 @@ export default function AvailableNetworks({ onConnected = () => false }) {
       </div>
     );
 }
-
-AvailableNetworks.propTypes = {
-  onConnected: PropTypes.func,
-};

webserver/web-interface/src/components/wifi/available-networks/AvailableNetworksDrawer.jsx → webserver/web-interface/src/components/wifi/available-networks/AvailableNetworksDrawer.tsx

@@ -4,12 +4,17 @@ import {
   Box,
   Button, Drawer, Stack, Typography, useTheme,
 } from '@mui/material';
-import PropTypes from 'prop-types';
 import { refrehNetworks } from '../../client/WifiClient';
 import Loader from '../../loader/Loader';
 import AvailableNetworks from './AvailableNetworks';
 
-export default function AvailableNetworksDrawer({ open, onOpenChanged, onConnected = () => false }) {
+type AvailableNetworksDrawerProps = {
+  open: boolean;
+  onOpenChanged: (isOpen: boolean) => void;
+  onConnected: () => void;
+}
+
+export default function AvailableNetworksDrawer({ open, onOpenChanged, onConnected }: AvailableNetworksDrawerProps) {
   const theme = useTheme();
   const [networksRefreshing, setNetworksRefreshing] = useState(false);
   const [wifiDrawerRefreshKey, setWifiDrawerRefreshKey] = useState(0);
@@ -24,8 +29,8 @@ export default function AvailableNetworksDrawer({ open, onOpenChanged, onConnect
     }
   }
 
-  const toggleDrawer = (isOpen) => (event) => {
-    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
+  const toggleDrawer = (isOpen: boolean) => (event: { type?: string; key?: string; }) => {
+    if (event?.type === 'keydown' && (event?.key === 'Tab' || event.key === 'Shift')) {
       return;
     }
     onOpenChanged(isOpen);
@@ -42,17 +47,11 @@ export default function AvailableNetworksDrawer({ open, onOpenChanged, onConnect
           Available networks
         </Typography>
         <Typography variant="h5" sx={{ m: theme.spacing(2) }}>
-          <Button onClick={refreshNetworksAction}><RefreshIcon /></Button>
+          <Button onClick={() => refreshNetworksAction()}><RefreshIcon /></Button>
         </Typography>
       </Stack>
       {networksRefreshing && <Box display="flex" justifyContent="center"><Loader /></Box>}
       {!networksRefreshing && <AvailableNetworks key={wifiDrawerRefreshKey} onConnected={onConnected} />}
     </Drawer>
   ) : <span />;
 }
-
-AvailableNetworksDrawer.propTypes = {
-  open: PropTypes.bool.isRequired,
-  onOpenChanged: PropTypes.func.isRequired,
-  onConnected: PropTypes.func,
-};

webserver/web-interface/src/pages/home/Home.tsx

@@ -124,7 +124,7 @@ function Home() {
               {/* Target temp input line */}
               <Grid container xs={12} alignItems="center">
                 <Grid xs={4}>
-                  <Typography fontSize={10}>TARGET TEMP</Typography>
+                  <Typography fontSize={12}>TARGET TEMP</Typography>
                 </Grid>
                 <Grid xs={4}>
                   <TextField
@@ -166,7 +166,7 @@ function Home() {
               {/* Scale input line */}
               <Grid container xs={12} alignItems="center">
                 <Grid xs={4}>
-                  <Typography fontSize={10}>SCALE</Typography>
+                  <Typography fontSize={12}>SCALE</Typography>
                 </Grid>
                 <Grid xs={4}>
                   <TextField