fix: connect new node no longer crashes. (#610)

src/components/PageComponents/Connect/BLE.tsx

@@ -10,8 +10,9 @@ import { useCallback, useEffect, useState } from "react";
 import { useMessageStore } from "../../../core/stores/messageStore/index.ts";
 
 export const BLE = (
-  { setConnectionInProgress, closeDialog }: TabElementProps,
+  { closeDialog }: TabElementProps,
 ) => {
+  const [connectionInProgress, setConnectionInProgress] = useState(false);
   const [bleDevices, setBleDevices] = useState<BluetoothDevice[]>([]);
   const { addDevice } = useDeviceStore();
   const messageStore = useMessageStore();
@@ -40,7 +41,10 @@ export const BLE = (
   };
 
   return (
-    <div className="flex w-full flex-col gap-2 p-4">
+    <fieldset
+      className="flex w-full flex-col gap-2 p-4"
+      disabled={connectionInProgress}
+    >
       <div className="flex h-48 flex-col gap-2 overflow-y-auto">
         {bleDevices.map((device) => (
           <Button
@@ -80,6 +84,6 @@ export const BLE = (
       >
         <span>New device</span>
       </Button>
-    </div>
+    </fieldset>
   );
 };

src/components/PageComponents/Connect/HTTP.tsx

@@ -21,9 +21,9 @@ interface FormData {
 }
 
 export const HTTP = (
-  { closeDialog, setConnectionInProgress, connectionInProgress }:
-    TabElementProps,
+  { closeDialog }: TabElementProps,
 ) => {
+  const [connectionInProgress, setConnectionInProgress] = useState(false);
   const isURLHTTPS = location.protocol === "https:";
 
   const { addDevice } = useDeviceStore();
@@ -73,7 +73,11 @@ export const HTTP = (
 
   return (
     <form className="flex w-full flex-col gap-2 p-4" onSubmit={onSubmit}>
-      <div className="flex flex-col gap-2" style={{ minHeight: "12rem" }}>
+      <fieldset
+        className="flex flex-col gap-2"
+        style={{ minHeight: "12rem" }}
+        disabled={connectionInProgress}
+      >
         <div>
           <Label>IP Address/Hostname</Label>
           <Input
@@ -132,7 +136,7 @@ export const HTTP = (
             </div>
           </div>
         )}
-      </div>
+      </fieldset>
       <Button
         type="submit"
         variant="default"

src/components/PageComponents/Connect/Serial.tsx

@@ -11,8 +11,9 @@ import { useCallback, useEffect, useState } from "react";
 import { useMessageStore } from "../../../core/stores/messageStore/index.ts";
 
 export const Serial = (
-  { setConnectionInProgress, closeDialog }: TabElementProps,
+  { closeDialog }: TabElementProps,
 ) => {
+  const [connectionInProgress, setConnectionInProgress] = useState(false);
   const [serialPorts, setSerialPorts] = useState<SerialPort[]>([]);
   const { addDevice } = useDeviceStore();
   const messageStore = useMessageStore();
@@ -46,7 +47,10 @@ export const Serial = (
   };
 
   return (
-    <div className="flex w-full flex-col gap-2 p-4">
+    <fieldset
+      className="flex w-full flex-col gap-2 p-4"
+      disabled={connectionInProgress}
+    >
       <div className="flex h-48 flex-col gap-2 overflow-y-auto">
         {serialPorts.map((port, index) => {
           const { usbProductId, usbVendorId } = port.getInfo();
@@ -85,6 +89,6 @@ export const Serial = (
       >
         <span>New device</span>
       </Button>
-    </div>
+    </fieldset>
   );
 };