Handle Connect btn for different connection status in ConnectToRecordDialog (#392)

- If not connected, connect button starts connection flow.
- If needs reconnection, connect button reconnects.
- If it is reconnecting, connect button waits to reconnect and then closes dialog if successful.
- If already connected, connect button closes dialog.
- If a connection dialog opens, ConnectToRecord dialog closes.

Author: microbit-grace

src/components/ConnectToRecordDialog.tsx

@@ -9,28 +9,83 @@ import {
   ModalOverlay,
   Text,
 } from "@chakra-ui/react";
-import { ComponentProps, useCallback } from "react";
+import { ComponentProps, useCallback, useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
-import { useConnectionStage } from "../connection-stage-hooks";
+import {
+  ConnectionFlowStep,
+  useConnectionStage,
+} from "../connection-stage-hooks";
+import { ConnectionStatus } from "../connect-status-hooks";
 
 const ConnectToRecordDialog = ({
   onClose,
   ...rest
 }: Omit<ComponentProps<typeof Modal>, "children">) => {
-  const { actions } = useConnectionStage();
+  const {
+    actions,
+    status: connStatus,
+    stage: connStage,
+  } = useConnectionStage();
+  const [isWaiting, setIsWaiting] = useState<boolean>(false);
 
-  const handleConnect = useCallback(() => {
+  const handleOnClose = useCallback(() => {
+    setIsWaiting(false);
     onClose();
-    actions.startConnect();
-  }, [actions, onClose]);
+  }, [onClose]);
+
+  const handleConnect = useCallback(async () => {
+    switch (connStatus) {
+      case ConnectionStatus.FailedToConnect:
+      case ConnectionStatus.FailedToReconnectTwice:
+      case ConnectionStatus.FailedToSelectBluetoothDevice:
+      case ConnectionStatus.NotConnected: {
+        // Start connection flow.
+        actions.startConnect();
+        return handleOnClose();
+      }
+      case ConnectionStatus.ConnectionLost:
+      case ConnectionStatus.FailedToReconnect:
+      case ConnectionStatus.Disconnected: {
+        // Reconnect.
+        await actions.reconnect();
+        return handleOnClose();
+      }
+      case ConnectionStatus.ReconnectingAutomatically: {
+        // Wait for reconnection to happen.
+        setIsWaiting(true);
+        return;
+      }
+      case ConnectionStatus.Connected: {
+        // Connected whilst dialog is up.
+        return handleOnClose();
+      }
+      case ConnectionStatus.ReconnectingExplicitly:
+      case ConnectionStatus.Connecting: {
+        // Impossible cases.
+        return handleOnClose();
+      }
+    }
+  }, [connStatus, actions, handleOnClose]);
+
+  useEffect(() => {
+    if (
+      connStage.flowStep !== ConnectionFlowStep.None ||
+      (isWaiting && connStatus === ConnectionStatus.Connected)
+    ) {
+      // Close dialog if connection dialog is opened, or
+      // once connected after waiting.
+      handleOnClose();
+      return;
+    }
+  }, [connStage.flowStep, connStatus, handleOnClose, isWaiting, onClose]);
 
   return (
     <Modal
       closeOnOverlayClick={false}
       motionPreset="none"
       size="md"
       isCentered
-      onClose={onClose}
+      onClose={handleOnClose}
       {...rest}
     >
       <ModalOverlay>
@@ -45,7 +100,11 @@ const ConnectToRecordDialog = ({
             </Text>
           </ModalBody>
           <ModalFooter justifyContent="flex-end">
-            <Button variant="primary" onClick={handleConnect}>
+            <Button
+              variant="primary"
+              onClick={handleConnect}
+              isLoading={isWaiting}
+            >
               <FormattedMessage id="connect-action" />
             </Button>
           </ModalFooter>