Connection method work

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.2",
-    "@meshtastic/meshtasticjs": "^0.6.29",
+    "@meshtastic/meshtasticjs": "^0.6.30",
     "@reduxjs/toolkit": "^1.6.2",
     "boring-avatars": "^1.5.8",
     "i18next": "^21.5.2",

pnpm-lock.yaml

@@ -2,7 +2,7 @@ lockfileVersion: 5.3
 
 specifiers:
   '@headlessui/react': ^1.4.2
-  '@meshtastic/meshtasticjs': ^0.6.29
+  '@meshtastic/meshtasticjs': ^0.6.30
   '@reduxjs/toolkit': ^1.6.2
   '@types/react': ^17.0.35
   '@types/react-dom': ^17.0.11
@@ -52,7 +52,7 @@ specifiers:
 
 dependencies:
   '@headlessui/react': 1.4[email protected][email protected]
-  '@meshtastic/meshtasticjs': 0.6.29
+  '@meshtastic/meshtasticjs': 0.6.30
   '@reduxjs/toolkit': 1.6[email protected][email protected]
   boring-avatars: 1.5.8
   i18next: 21.5.2
@@ -1359,8 +1359,8 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
-  /@meshtastic/meshtasticjs/0.6.29:
-    resolution: {integrity: sha512-XcfHTGlWBLgdfXCK81U/ilDpepyId/OEvXRNiEerg40m9pD7FaNlqPnAKRhvoeOl56VQdKtCpsiWJdeknSI4tw==}
+  /@meshtastic/meshtasticjs/0.6.30:
+    resolution: {integrity: sha512-gxlu4ifju60Dwruz6UbREiZ73uCibtJOQdml28lzvsmTHY2vsEXfRiAoo2AvQFmTpoySJMJWrFzBQvK7RCqbtA==}
     dependencies:
       '@protobuf-ts/runtime': 2.0.7
       sub-events: 1.8.9

src/components/Connection.tsx

@@ -6,6 +6,7 @@ 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 {
   cleanupListeners,
   connection,
@@ -18,6 +19,7 @@ import {
   setConnectionParams,
   setConnType,
 } from '@core/slices/appSlice';
+import { resetState } from '@core/slices/meshtasticSlice';
 import { Types } from '@meshtastic/meshtasticjs';
 
 import { BLE } from './connection/BLE';
@@ -61,32 +63,28 @@ export const Connection = (): JSX.Element => {
     >
       <Card>
         <div className="w-full max-w-3xl p-10">
-          <div className="flex justify-between w-full bg-gray-100 rounded-md">
+          <div className="flex justify-between w-full border rounded-md">
             <div className="p-2">
-              <h1>
-                {`Connected to: ${
-                  state.nodes.find(
-                    (node) => node.number === state.radio.hardware.myNodeNum,
-                  )?.user?.longName ?? 'Unknown'
-                }`}
-              </h1>
-              <p>{`Via: ${connType[appState.connType]}`}</p>
+              <DeviceStatus />
             </div>
             <div className="p-2 my-auto">
               {state.deviceStatus ===
               Types.DeviceStatusEnum.DEVICE_DISCONNECTED ? (
                 <Button
+                  padding={2}
                   border
                   onClick={async (): Promise<void> => {
-                    await setConnection();
+                    await setConnection(appState.connType);
                   }}
                 >
                   Connect
                 </Button>
               ) : (
                 <Button
+                  padding={2}
                   border
                   onClick={async (): Promise<void> => {
+                    dispatch(resetState());
                     await connection.disconnect();
                     cleanupListeners();
                   }}
@@ -96,19 +94,24 @@ export const Connection = (): JSX.Element => {
               )}
             </div>
           </div>
-          <form className="space-y-2">
-            <Select
-              label="Method"
-              optionsEnum={connType}
-              value={appState.connType}
-              onChange={(e): void => {
-                dispatch(setConnType(e.target.value as unknown as connType));
-              }}
-            />
-            {appState.connType === connType.HTTP && <HTTP />}
-            {appState.connType === connType.BLE && <BLE />}
-            {appState.connType === connType.SERIAL && <Serial />}
-          </form>
+          {state.deviceStatus ===
+            Types.DeviceStatusEnum.DEVICE_DISCONNECTED && (
+            <form className="space-y-2">
+              <Select
+                label="Method"
+                optionsEnum={connType}
+                value={appState.connType}
+                onChange={(e): void => {
+                  console.log(e.target.value);
+
+                  dispatch(setConnType(parseInt(e.target.value)));
+                }}
+              />
+              {appState.connType === connType.HTTP && <HTTP />}
+              {appState.connType === connType.BLE && <BLE />}
+              {appState.connType === connType.SERIAL && <Serial />}
+            </form>
+          )}
         </div>
       </Card>
     </Modal>

src/components/connection/BLE.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 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';
 
@@ -20,45 +19,24 @@ export const BLE = (): JSX.Element => {
   }, [updateBleDeviceList]);
 
   return (
-    <div>
-      <div className="flex space-x-2">
-        <Button type="button" border onClick={updateBleDeviceList}>
-          Refresh List
-        </Button>
-        <Button
-          type="button"
-          border
+    <div className="space-y-2">
+      {bleDevices.map((device, index) => (
+        <div
           onClick={async (): Promise<void> => {
-            await ble.getDevice();
+            await setConnection(connType.BLE);
           }}
+          className="flex justify-between p-2 bg-gray-700 rounded-md"
+          key={index}
         >
-          New Device
-        </Button>
-      </div>
-      <div className="space-y-2">
-        <div>Previously connected devices</div>
-        {bleDevices.map((device, index) => (
-          <div
+          <div className="my-auto">{device.name}</div>
+          <IconButton
             onClick={async (): Promise<void> => {
-              await setConnection(connType.BLE, {
-                device: device,
-              });
+              await setConnection(connType.BLE);
             }}
-            className="flex justify-between p-2 bg-gray-700 rounded-md"
-            key={index}
-          >
-            <div className="my-auto">{device.name}</div>
-            <IconButton
-              onClick={async (): Promise<void> => {
-                await setConnection(connType.BLE, {
-                  device: device,
-                });
-              }}
-              icon={<FiCheck />}
-            />
-          </div>
-        ))}
-      </div>
+            icon={<FiCheck />}
+          />
+        </div>
+      ))}
     </div>
   );
 };

src/components/connection/Serial.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 
 import { FiCheck } from 'react-icons/fi';
-import JSONPretty from 'react-json-pretty';
 
-import { Button } from '@components/generic/Button';
+import { useAppDispatch } from '@app/hooks/redux';
 import { IconButton } from '@components/generic/IconButton';
 import { serial, setConnection } from '@core/connection';
 import { connType } from '@core/slices/appSlice';
 
 export const Serial = (): JSX.Element => {
+  const dispatch = useAppDispatch();
+
   const [serialDevices, setSerialDevices] = React.useState<SerialPort[]>([]);
 
   const updateSerialDeviceList = React.useCallback(async (): Promise<void> => {
@@ -21,45 +22,29 @@ export const Serial = (): JSX.Element => {
   }, [updateSerialDeviceList]);
 
   return (
-    <div>
-      <div className="flex space-x-2">
-        <Button type="button" border onClick={updateSerialDeviceList}>
-          Refresh List
-        </Button>
-        <Button
-          type="button"
-          border
-          onClick={async (): Promise<void> => {
-            console.log(await serial.getPort());
-          }}
+    <div className="space-y-2">
+      {serialDevices.map((device, index) => (
+        <div
+          className="flex justify-between p-2 bg-gray-700 rounded-md"
+          key={index}
         >
-          New Device
-        </Button>
-      </div>
-      <div className="space-y-2">
-        <div>Previously connected devices</div>
-        {serialDevices.map((device, index) => (
-          <div
-            className="flex justify-between p-2 bg-gray-700 rounded-md"
-            key={index}
-          >
-            <div className="my-auto">
-              {device.getInfo().usbProductId}
-              {device.getInfo().usbVendorId}
-            </div>
-            <IconButton
-              onClick={async (): Promise<void> => {
-                await setConnection(connType.SERIAL, {
-                  // @ts-ignore tmp
-                  device: device,
-                });
-              }}
-              icon={<FiCheck />}
-            />
-            <JSONPretty data={device.getInfo()} />
+          <div className="flex gap-4 my-auto">
+            <p>
+              Vendor: <small>{device.getInfo().usbVendorId}</small>
+            </p>
+            <p>
+              Device: <small>{device.getInfo().usbProductId}</small>
+            </p>
           </div>
-        ))}
-      </div>
+          <IconButton
+            onClick={async (): Promise<void> => {
+              dispatch(setConnType(parseInt(e.target.value)));
+              await setConnection(connType.SERIAL);
+            }}
+            icon={<FiCheck />}
+          />
+        </div>
+      ))}
     </div>
   );
 };

src/components/generic/Modal.tsx

@@ -20,26 +20,24 @@ export const Modal = ({
 }: ModalProps): JSX.Element => {
   const darkMode = useAppSelector((state) => state.app.darkMode);
   return (
-    <>
-      <Dialog
-        as="div"
-        className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}
-        open={open}
-        onClose={onClose}
-      >
-        <Dialog.Overlay className="fixed w-full h-full backdrop-filter backdrop-blur-sm" />
-        <div className="text-center ">
-          <span
-            className="inline-block h-screen align-middle "
-            aria-hidden="true"
-          >
-            &#8203;
-          </span>
-          <div className={`inline-block align-middle ${className}`} {...props}>
-            {children}
-          </div>
+    <Dialog
+      as="div"
+      className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}
+      open={open}
+      onClose={onClose}
+    >
+      <Dialog.Overlay className="fixed w-full h-full backdrop-filter backdrop-blur-sm" />
+      <div className="text-center ">
+        <span
+          className="inline-block h-screen align-middle "
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+        <div className={`inline-block align-middle ${className}`} {...props}>
+          {children}
         </div>
-      </Dialog>
-    </>
+      </div>
+    </Dialog>
   );
 };

src/components/menu/buttons/DeviceStatus.tsx

@@ -1,14 +1,15 @@
 import type React from 'react';
 
-import { FiWifi, FiWifiOff } from 'react-icons/fi';
+import { FiBluetooth, FiCpu, FiWifi } from 'react-icons/fi';
 
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
-import { openConnectionModal } from '@core/slices/appSlice';
+import { connType, openConnectionModal } from '@core/slices/appSlice';
 import { Types } from '@meshtastic/meshtasticjs';
 
 export const DeviceStatus = (): JSX.Element => {
   const dispatch = useAppDispatch();
+  const appState = useAppSelector((state) => state.app);
   const state = useAppSelector((state) => state.meshtastic);
   const ready = useAppSelector((state) => state.meshtastic.ready);
 
@@ -41,13 +42,15 @@ export const DeviceStatus = (): JSX.Element => {
         <div className="my-auto">
           {state.nodes.find(
             (node) => node.number === state.radio.hardware.myNodeNum,
-          )?.user?.longName ?? 'Unknown'}
+          )?.user?.longName ?? 'Disconnected'}
         </div>
         <div className="py-2">
-          {ready ? (
-            <FiWifi className="w-5 h-5" />
+          {appState.connType === connType.BLE ? (
+            <FiBluetooth className="w-5 h-5" />
+          ) : appState.connType === connType.SERIAL ? (
+            <FiCpu className="w-5 h-5" />
           ) : (
-            <FiWifiOff className="w-5 h-5 animate-pulse" />
+            <FiWifi className="w-5 h-5" />
           )}
         </div>
       </div>

src/core/slices/meshtasticSlice.ts

@@ -43,7 +43,6 @@ interface MeshtasticState {
   radio: Radio;
   hostOverrideEnabled: boolean;
   hostOverride: string;
-  connectionType: connType;
 }
 
 const initialState: MeshtasticState = {
@@ -61,7 +60,6 @@ const initialState: MeshtasticState = {
   hostOverrideEnabled:
     localStorage.getItem('hostOverrideEnabled') === 'true' ?? false,
   hostOverride: localStorage.getItem('hostOverride') ?? '',
-  connectionType: parseInt(localStorage.getItem('connectionType') ?? '0'),
 };
 
 export const meshtasticSlice = createSlice({
@@ -184,12 +182,12 @@ export const meshtasticSlice = createSlice({
         // connection.disconnect();
       }
     },
-    setConnectionType: (state, action: PayloadAction<connType>) => {
-      state.connectionType = action.payload;
-      localStorage.setItem('connectionType', String(action.payload));
-      if (state.connectionType !== action.payload) {
-        // connection.disconnect();
-      }
+    resetState: (state) => {
+      state.deviceStatus = Types.DeviceStatusEnum.DEVICE_DISCONNECTED;
+      state.nodes = [];
+      state.radio = initialState.radio;
+      state.ready = false;
+      state.lastMeshInterraction = 0;
     },
   },
 });
@@ -208,6 +206,7 @@ export const {
   ackMessage,
   setHostOverrideEnabled,
   setHostOverride,
+  resetState,
 } = meshtasticSlice.actions;
 
 export default meshtasticSlice.reducer;