COnnection modal fix & notification basics

src/components/Connection.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
+import { BLE } from '@components/connection/BLE';
+import { HTTP } from '@components/connection/HTTP';
 import { Serial } from '@components/connection/Serial';
 import { Button } from '@components/generic/Button';
 import { Card } from '@components/generic/Card';
 import { Select } from '@components/generic/form/Select';
 import { Modal } from '@components/generic/Modal';
-import { DeviceStatus } from '@components/menu/buttons/DeviceStatus';
 import { connection, connectionUrl, setConnection } from '@core/connection';
 import {
   closeConnectionModal,
@@ -16,9 +17,6 @@ import {
 } from '@core/slices/appSlice';
 import { Types } from '@meshtastic/meshtasticjs';
 
-import { BLE } from './connection/BLE';
-import { HTTP } from './connection/HTTP';
-
 export const Connection = (): JSX.Element => {
   const dispatch = useAppDispatch();
 
@@ -58,23 +56,25 @@ export const Connection = (): JSX.Element => {
     >
       <Card>
         <div className="w-full max-w-3xl p-10">
-          <div className="flex justify-between w-full border rounded-md">
-            <div className="p-2">
-              <DeviceStatus />
+          {state.deviceStatus === Types.DeviceStatusEnum.DEVICE_DISCONNECTED ? (
+            <div className="space-y-2">
+              <Select
+                label="Connection Method"
+                optionsEnum={connType}
+                value={appState.connType}
+                onChange={(e): void => {
+                  dispatch(setConnType(parseInt(e.target.value)));
+                }}
+              />
+              {appState.connType === connType.HTTP && <HTTP />}
+              {appState.connType === connType.BLE && <BLE />}
+              {appState.connType === connType.SERIAL && <Serial />}
             </div>
-            <div className="p-2 my-auto">
+          ) : (
+            <div>
+              <span>Connecting...</span>
               {state.deviceStatus ===
-              Types.DeviceStatusEnum.DEVICE_DISCONNECTED ? (
-                <Button
-                  padding={2}
-                  border
-                  onClick={async (): Promise<void> => {
-                    await setConnection(appState.connType);
-                  }}
-                >
-                  Connect
-                </Button>
-              ) : (
+                Types.DeviceStatusEnum.DEVICE_CONNECTED && (
                 <Button
                   padding={2}
                   border
@@ -86,22 +86,6 @@ export const Connection = (): JSX.Element => {
                 </Button>
               )}
             </div>
-          </div>
-          {state.deviceStatus ===
-            Types.DeviceStatusEnum.DEVICE_DISCONNECTED && (
-            <form className="space-y-2">
-              <Select
-                label="Method"
-                optionsEnum={connType}
-                value={appState.connType}
-                onChange={(e): void => {
-                  dispatch(setConnType(parseInt(e.target.value)));
-                }}
-              />
-              {appState.connType === connType.HTTP && <HTTP />}
-              {appState.connType === connType.BLE && <BLE />}
-              {appState.connType === connType.SERIAL && <Serial />}
-            </form>
           )}
         </div>
       </Card>

src/components/connection/BLE.tsx

@@ -1,14 +1,20 @@
 import React from 'react';
 
+import { useForm } from 'react-hook-form';
 import { FiCheck } from 'react-icons/fi';
 
 import { connType } from '@app/core/slices/appSlice';
+import { Button } from '@components/generic/Button';
 import { IconButton } from '@components/generic/IconButton';
 import { ble, setConnection } from '@core/connection';
 
 export const BLE = (): JSX.Element => {
   const [bleDevices, setBleDevices] = React.useState<BluetoothDevice[]>([]);
 
+  const { register, handleSubmit, control } = useForm<{
+    device?: BluetoothDevice;
+  }>();
+
   const updateBleDeviceList = React.useCallback(async (): Promise<void> => {
     const devices = await ble.getDevices();
     setBleDevices(devices);
@@ -18,8 +24,12 @@ export const BLE = (): JSX.Element => {
     void updateBleDeviceList();
   }, [updateBleDeviceList]);
 
+  const onSubmit = handleSubmit(async (data) => {
+    await setConnection(connType.BLE);
+  });
+
   return (
-    <div className="space-y-2">
+    <form onSubmit={onSubmit} className="space-y-2">
       {bleDevices.map((device, index) => (
         <div
           onClick={async (): Promise<void> => {
@@ -37,6 +47,9 @@ export const BLE = (): JSX.Element => {
           />
         </div>
       ))}
-    </div>
+      <Button type="submit" className="mt-2 ml-auto" border>
+        Connect
+      </Button>
+    </form>
   );
 };

src/components/connection/HTTP.tsx

@@ -1,17 +1,52 @@
-import React from 'react';
+import type React from 'react';
 
+import { useForm, useWatch } from 'react-hook-form';
+
+import { useAppDispatch } from '@app/hooks/redux.js';
+import { Button } from '@components/generic/Button';
 import { Checkbox } from '@components/generic/form/Checkbox';
 import { Input } from '@components/generic/form/Input';
 import { Select } from '@components/generic/form/Select';
-import { connectionUrl } from '@core/connection';
+import { connectionUrl, setConnection } from '@core/connection';
+import { connType, setConnectionParams } from '@core/slices/appSlice';
 
 export const HTTP = (): JSX.Element => {
-  const [httpIpSource, setHttpIpSource] = React.useState<'local' | 'remote'>(
-    'local',
-  );
+  const dispatch = useAppDispatch();
+
+  const { register, handleSubmit, control } = useForm<{
+    ipSource: 'local' | 'remote';
+    ip?: string;
+    tls: boolean;
+  }>({
+    defaultValues: {
+      ipSource: 'local',
+      ip: connectionUrl,
+      tls: false,
+    },
+  });
+
+  const watchIpSource = useWatch({
+    control,
+    name: 'ipSource',
+    defaultValue: 'local',
+  });
+
+  const onSubmit = handleSubmit(async (data) => {
+    dispatch(
+      setConnectionParams({
+        type: connType.HTTP,
+        params: {
+          address: data.ip ?? connectionUrl,
+          tls: data.tls,
+          fetchInterval: 2000,
+        },
+      }),
+    );
+    await setConnection(connType.HTTP);
+  });
 
   return (
-    <div>
+    <form onSubmit={onSubmit}>
       <Select
         label="Host Source"
         options={[
@@ -24,17 +59,17 @@ export const HTTP = (): JSX.Element => {
             value: 'remote',
           },
         ]}
-        value={httpIpSource}
-        onChange={(e): void => {
-          setHttpIpSource(e.target.value as 'local' | 'remote');
-        }}
+        {...register('ipSource')}
       />
-      {httpIpSource === 'local' ? (
+      {watchIpSource === 'local' ? (
         <Input label="Host" value={connectionUrl} disabled />
       ) : (
-        <Input label="Host" />
+        <Input label="Host" {...register('ip')} />
       )}
-      <Checkbox label="Use TLS?" />
-    </div>
+      <Checkbox label="Use TLS?" {...register('tls')} />
+      <Button type="submit" className="mt-2 ml-auto" border>
+        Connect
+      </Button>
+    </form>
   );
 };

src/components/connection/Serial.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 
+import { useForm } from 'react-hook-form';
 import { FiCheck } from 'react-icons/fi';
 
+import { Button } from '@components/generic/Button';
 import { IconButton } from '@components/generic/IconButton';
 import { serial, setConnection } from '@core/connection';
 import { connType } from '@core/slices/appSlice';
@@ -9,6 +11,10 @@ import { connType } from '@core/slices/appSlice';
 export const Serial = (): JSX.Element => {
   const [serialDevices, setSerialDevices] = React.useState<SerialPort[]>([]);
 
+  const { register, handleSubmit, control } = useForm<{
+    device?: SerialPort;
+  }>();
+
   const updateSerialDeviceList = React.useCallback(async (): Promise<void> => {
     const devices = await serial.getPorts();
     setSerialDevices(devices);
@@ -18,8 +24,12 @@ export const Serial = (): JSX.Element => {
     void updateSerialDeviceList();
   }, [updateSerialDeviceList]);
 
+  const onSubmit = handleSubmit(async (data) => {
+    await setConnection(connType.SERIAL);
+  });
+
   return (
-    <div className="space-y-2">
+    <form onSubmit={onSubmit} className="space-y-2">
       {serialDevices.map((device, index) => (
         <div
           className="flex justify-between p-2 bg-gray-700 rounded-md"
@@ -41,6 +51,9 @@ export const Serial = (): JSX.Element => {
           />
         </div>
       ))}
-    </div>
+      <Button type="submit" className="mt-2 ml-auto" border>
+        Connect
+      </Button>
+    </form>
   );
 };