Merge pull request #566 from danditomaso/issue-564-multiple-connect-clicks-on-connect-dialog

Multiple clicks on "Connect" button, creates multiple nodes.

src/components/Dialog/NewDeviceDialog.tsx

@@ -22,9 +22,12 @@ import { Subtle } from "@components/UI/Typography/Subtle.tsx";
 import { AlertCircle } from "lucide-react";
 import { Link } from "../UI/Typography/Link.tsx";
 import { Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 
 export interface TabElementProps {
   closeDialog: () => void;
+  connectionInProgress: boolean;
+  setConnectionInProgress: (inProgress: boolean) => void;
 }
 
 export interface TabManifest {
@@ -111,25 +114,28 @@ export const NewDeviceDialog = ({
   open,
   onOpenChange,
 }: NewDeviceProps) => {
+  const [connectionInProgress, setConnectionInProgress] =
+    useState(false);
   const { unsupported } = useBrowserFeatureDetection();
 
+
   const tabs: TabManifest[] = [
     {
       label: "HTTP",
       element: HTTP,
-      isDisabled: false,
+      isDisabled: connectionInProgress,
     },
     {
       label: "Bluetooth",
       element: BLE,
       isDisabled: unsupported.includes("Web Bluetooth") ||
-        unsupported.includes("Secure Context"),
+        unsupported.includes("Secure Context") || connectionInProgress,
     },
     {
       label: "Serial",
       element: Serial,
       isDisabled: unsupported.includes("Web Serial") ||
-        unsupported.includes("Secure Context"),
+        unsupported.includes("Secure Context") || connectionInProgress,
     },
   ];
 
@@ -154,7 +160,7 @@ export const NewDeviceDialog = ({
                 {tab.isDisabled
                   ? <ErrorMessage missingFeatures={unsupported} />
                   : null}
-                <tab.element closeDialog={() => onOpenChange(false)} />
+                <tab.element closeDialog={() => onOpenChange(false)} setConnectionInProgress={setConnectionInProgress} connectionInProgress={connectionInProgress} />
               </fieldset>
             </TabsContent>
           ))}

src/components/PageComponents/Connect/BLE.tsx

@@ -9,7 +9,7 @@ import { BleConnection, ServiceUuid } from "@meshtastic/js";
 import { useCallback, useEffect, useState } from "react";
 import { useMessageStore } from "@core/stores/messageStore.ts";
 
-export const BLE = ({ closeDialog }: TabElementProps) => {
+export const BLE = ({ setConnectionInProgress, closeDialog }: TabElementProps) => {
   const [bleDevices, setBleDevices] = useState<BluetoothDevice[]>([]);
   const { addDevice } = useDeviceStore();
   const messageStore = useMessageStore()
@@ -45,6 +45,7 @@ export const BLE = ({ closeDialog }: TabElementProps) => {
             key={device.id}
             className="dark:bg-slate-900 dark:text-white"
             onClick={() => {
+              setConnectionInProgress(true);
               onConnect(device);
             }}
           >
@@ -67,6 +68,11 @@ export const BLE = ({ closeDialog }: TabElementProps) => {
               if (exists === -1) {
                 setBleDevices(bleDevices.concat(device));
               }
+            }).catch((error) => {
+              console.error("Error requesting device:", error);
+              setConnectionInProgress(false);
+            }).finally(() => {
+              setConnectionInProgress(false);
             });
         }}
       >
@@ -74,4 +80,4 @@ export const BLE = ({ closeDialog }: TabElementProps) => {
       </Button>
     </div>
   );
-};
+};

src/components/PageComponents/Connect/HTTP.tsx

@@ -20,7 +20,7 @@ interface FormData {
   tls: boolean;
 }
 
-export const HTTP = ({ closeDialog }: TabElementProps) => {
+export const HTTP = ({ closeDialog, setConnectionInProgress, connectionInProgress }: TabElementProps) => {
   const isURLHTTPS = location.protocol === "https:";
 
   const { addDevice } = useDeviceStore();
@@ -30,10 +30,10 @@ export const HTTP = ({ closeDialog }: TabElementProps) => {
   const { control, handleSubmit, register } = useForm<FormData>({
     defaultValues: {
       ip: ["client.meshtastic.org", "localhost"].includes(
-        window.location.hostname,
+        globalThis.location.hostname,
       )
         ? "meshtastic.local"
-        : window.location.host,
+        : globalThis.location.host,
       tls: isURLHTTPS ? true : false,
     },
   });
@@ -42,7 +42,6 @@ export const HTTP = ({ closeDialog }: TabElementProps) => {
     field: { value: tlsValue, onChange: setTLS },
   } = useController({ name: "tls", control });
 
-  const [connectionInProgress, setConnectionInProgress] = useState(false);
   const [connectionError, setConnectionError] = useState<{ host: string; secure: boolean } | null>(null);
 
   const onSubmit = handleSubmit(async (data) => {
@@ -76,14 +75,13 @@ export const HTTP = ({ closeDialog }: TabElementProps) => {
             prefix={tlsValue ? "https://" : "http://"}
             placeholder="000.000.000.000 / meshtastic.local"
             className="text-slate-900 dark:text-slate-900"
-            disabled={connectionInProgress}
             {...register("ip")}
           />
         </div>
         <div className="flex items-center gap-2 mt-2">
           <Switch
             onCheckedChange={setTLS}
-            disabled={isURLHTTPS || connectionInProgress}
+            disabled={isURLHTTPS}
             checked={isURLHTTPS || tlsValue}
             {...register("tls")}
           />
@@ -122,7 +120,6 @@ export const HTTP = ({ closeDialog }: TabElementProps) => {
       </div>
       <Button
         type="submit"
-        disabled={connectionInProgress}
         className="dark:bg-slate-900 dark:text-white"
       >
         <span>{connectionInProgress ? "Connecting..." : "Connect"}</span>

src/components/PageComponents/Connect/Serial.tsx

@@ -10,7 +10,7 @@ import { TransportWebSerial } from "@meshtastic/transport-web-serial";
 import { useCallback, useEffect, useState } from "react";
 import { useMessageStore } from "@core/stores/messageStore.ts";
 
-export const Serial = ({ closeDialog }: TabElementProps) => {
+export const Serial = ({ setConnectionInProgress, closeDialog }: TabElementProps) => {
   const [serialPorts, setSerialPorts] = useState<SerialPort[]>([]);
   const { addDevice } = useDeviceStore();
   const messageStore = useMessageStore()
@@ -54,6 +54,7 @@ export const Serial = ({ closeDialog }: TabElementProps) => {
               disabled={port.readable !== null}
               className="dark:bg-slate-900 dark:text-white"
               onClick={async () => {
+                setConnectionInProgress(true);
                 await onConnect(port);
               }}
             >
@@ -71,6 +72,11 @@ export const Serial = ({ closeDialog }: TabElementProps) => {
         onClick={async () => {
           await navigator.serial.requestPort().then((port) => {
             setSerialPorts(serialPorts.concat(port));
+          }).catch((error) => {
+            console.error("Error requesting port:", error);
+            setConnectionInProgress(false);
+          }).finally(() => {
+            setConnectionInProgress(false);
           });
         }}
       >