Retry properly when device not found or out of range.

src/hooks/useWebBluetooth.ts

@@ -73,20 +73,23 @@ const useWebBluetooth = (incomingDataEventListener: (data: string) => void) => {
   };
 
   useEffect(() => {
-    let reconnect: number;
+    let reconnect: number | undefined = undefined;
     if (previouslyPairedDevices.length > 0) {
       reconnect = setInterval(() => {
+        console.log(isDisconnected);
         if (!isDisconnected) {
           clearInterval(reconnect);
           return;
         }
         const device = previouslyPairedDevices[0];
         connectToExistingDevice(device);
       }, 5000);
+    } else {
+      if (reconnect !== undefined) clearInterval(reconnect);
     }
 
     return () => {
-      clearInterval(reconnect);
+      if (reconnect !== undefined) clearInterval(reconnect);
     };
   }, [previouslyPairedDevices, isDisconnected]);
 
@@ -165,7 +168,6 @@ const useWebBluetooth = (incomingDataEventListener: (data: string) => void) => {
   const connectToExistingDevice = async (device: BluetoothDevice) => {
     try {
       console.log("trying to connect to existing device", device);
-      setIsDisconnected(false);
       currentDevice.current = device;
 
       // Add an event listener to detect when a device disconnects
@@ -187,7 +189,8 @@ const useWebBluetooth = (incomingDataEventListener: (data: string) => void) => {
         "characteristicvaluechanged",
         handleCharacteristicValueChanged
       );
-    } catch (error) {
+      setIsDisconnected(false);
+    } catch (error: unknown) {
       console.log(`There was an error: ${error}`);
     }
   };