Handle bluetooth connection error scenarios (#279)

Only handles bluetooth connection error cases, not radio bridge

Author: microbit-grace

package-lock.json

@@ -61,7 +61,7 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@microbit/microbit-connection": "^0.0.0-alpha.13",
+    "@microbit/microbit-connection": "^0.0.0-alpha.14",
     "@tensorflow/tfjs": "^4.4.0",
     "@types/w3c-web-serial": "^1.0.6",
     "@types/w3c-web-usb": "^1.0.6",

package.json

@@ -25,6 +25,7 @@ import { GesturesProvider } from "./gestures-hooks";
 import { MlStatusProvider } from "./ml-status-hooks";
 import { ConnectionStageProvider } from "./connection-stage-hooks";
 import { ConnectProvider } from "./connect-actions-hooks";
+import { ConnectStatusProvider } from "./connect-status-hooks";
 
 export interface ProviderLayoutProps {
   children: ReactNode;
@@ -43,13 +44,15 @@ const Providers = ({ children }: ProviderLayoutProps) => {
             <SettingsProvider>
               <GesturesProvider>
                 <MlStatusProvider>
-                  <ConnectProvider>
-                    <ConnectionStageProvider>
-                      <TranslationProvider>
-                        <ErrorBoundary>{children}</ErrorBoundary>
-                      </TranslationProvider>
-                    </ConnectionStageProvider>
-                  </ConnectProvider>
+                  <ConnectStatusProvider>
+                    <ConnectProvider>
+                      <ConnectionStageProvider>
+                        <TranslationProvider>
+                          <ErrorBoundary>{children}</ErrorBoundary>
+                        </TranslationProvider>
+                      </ConnectionStageProvider>
+                    </ConnectProvider>
+                  </ConnectStatusProvider>
                 </MlStatusProvider>
               </GesturesProvider>
             </SettingsProvider>

src/App.tsx

@@ -1,4 +1,4 @@
-import { Image, Text, VStack } from "@chakra-ui/react";
+import { Button, Image, Text, VStack } from "@chakra-ui/react";
 import { FormattedMessage } from "react-intl";
 import connectCableImage from "../images/connect-cable.gif";
 import ConnectContainerDialog, {
@@ -51,17 +51,23 @@ const ConnectCableDialog = ({
   onSwitch,
   ...props
 }: ConnectCableDialogProps) => {
-  const { subtitleId, onLink, ...typeProps } = configs[type];
+  const { subtitleId, onLink, linkTextId, headingId } = configs[type];
   const linkConfig = {
     [LinkType.None]: undefined,
     [LinkType.Skip]: onSkip,
     [LinkType.Switch]: onSwitch,
   };
   return (
     <ConnectContainerDialog
-      {...typeProps}
+      headingId={headingId}
       {...props}
-      onLinkClick={linkConfig[onLink]}
+      footerLeft={
+        linkTextId && (
+          <Button onClick={linkConfig[onLink]} variant="link" size="lg">
+            <FormattedMessage id={linkTextId} />
+          </Button>
+        )
+      }
     >
       <VStack gap={5}>
         <Text width="100%">

src/components/ConnectCableDialog.tsx

@@ -19,8 +19,7 @@ export interface ConnectContainerDialogProps {
   isOpen: boolean;
   onClose: () => void;
   headingId: string;
-  onLinkClick?: () => void;
-  linkTextId?: string;
+  footerLeft?: ReactNode;
   onNextClick?: () => void;
   children: ReactNode;
   onBackClick?: () => void;
@@ -30,8 +29,7 @@ const ConnectContainerDialog = ({
   isOpen,
   onClose,
   headingId,
-  onLinkClick,
-  linkTextId,
+  footerLeft,
   onNextClick,
   onBackClick,
   children,
@@ -57,14 +55,10 @@ const ConnectContainerDialog = ({
             </VStack>
           </ModalBody>
           <ModalFooter
-            justifyContent={onLinkClick && linkTextId ? "space-between" : "end"}
+            justifyContent={footerLeft ? "space-between" : "end"}
             p={0}
           >
-            {onLinkClick && linkTextId && (
-              <Button onClick={onLinkClick} variant="link" size="lg">
-                <FormattedMessage id={linkTextId} />
-              </Button>
-            )}
+            {footerLeft && footerLeft}
             <HStack gap={5}>
               {onBackClick && (
                 <Button onClick={onBackClick} variant="secondary" size="lg">

src/components/ConnectContainerDialog.tsx

@@ -235,9 +235,8 @@ const ConnectionDialogs = () => {
     case ConnectionFlowStep.WebUsbBluetoothUnsupported: {
       return <WebUsbBluetoothUnsupportedDialog {...dialogCommonProps} />;
     }
-    // TODO: Reconnect dialogs
-    case ConnectionFlowStep.ReconnectManualFail:
-    case ConnectionFlowStep.ReconnectAutoFail: {
+    case ConnectionFlowStep.ReconnectFailed:
+    case ConnectionFlowStep.ConnectionLost: {
       return (
         <ReconnectErrorDialog
           {...dialogCommonProps}

src/components/ConnectionFlowDialogs.tsx

@@ -2,32 +2,30 @@ import { Button, HStack, Portal, Text } from "@chakra-ui/react";
 import { useMemo, useRef } from "react";
 import { MdBolt } from "react-icons/md";
 import { FormattedMessage } from "react-intl";
-import {
-  ConnectionStatus,
-  useConnectionStage,
-} from "../connection-stage-hooks";
+import { useConnectionStage } from "../connection-stage-hooks";
 import InfoToolTip from "./InfoToolTip";
 import LiveGraph from "./LiveGraph";
+import { ConnectionStatus, useConnectStatus } from "../connect-status-hooks";
 
 const LiveGraphPanel = () => {
   const { actions } = useConnectionStage();
-  const { stage } = useConnectionStage();
+  const status = useConnectStatus();
   const parentPortalRef = useRef(null);
 
-  const connectBtnConfig = useMemo(
-    () =>
-      stage.status === ConnectionStatus.None ||
-      stage.status === ConnectionStatus.Connecting
-        ? {
-            textId: "footer.connectButton",
-            onClick: actions.start,
-          }
-        : {
-            textId: "actions.reconnect",
-            onClick: actions.reconnect,
-          },
-    [actions.reconnect, actions.start, stage]
-  );
+  const connectBtnConfig = useMemo(() => {
+    return status === ConnectionStatus.NotConnected ||
+      status === ConnectionStatus.Connecting ||
+      status === ConnectionStatus.FailedToConnect ||
+      status === ConnectionStatus.FailedToReconnectTwice
+      ? {
+          textId: "footer.connectButton",
+          onClick: actions.start,
+        }
+      : {
+          textId: "actions.reconnect",
+          onClick: actions.reconnect,
+        };
+  }, [actions.reconnect, actions.start, status]);
 
   return (
     <HStack
@@ -49,7 +47,7 @@ const LiveGraphPanel = () => {
         >
           <HStack gap={4}>
             <LiveIndicator />
-            {stage.status === ConnectionStatus.Connected ? (
+            {status === ConnectionStatus.Connected ? (
               <Button variant="primary" size="sm" onClick={actions.disconnect}>
                 <FormattedMessage id="footer.disconnectButton" />
               </Button>
@@ -58,15 +56,15 @@ const LiveGraphPanel = () => {
                 variant="primary"
                 size="sm"
                 isDisabled={
-                  stage.status === ConnectionStatus.Reconnecting ||
-                  stage.status === ConnectionStatus.Connecting
+                  status === ConnectionStatus.Reconnecting ||
+                  status === ConnectionStatus.Connecting
                 }
                 onClick={connectBtnConfig.onClick}
               >
                 <FormattedMessage id={connectBtnConfig.textId} />
               </Button>
             )}
-            {stage.status === ConnectionStatus.Reconnecting && (
+            {status === ConnectionStatus.Reconnecting && (
               <Text rounded="4xl" bg="white" py="1px" fontWeight="bold">
                 <FormattedMessage id="connectMB.reconnecting" />
               </Text>

src/components/LiveGraphPanel.tsx

@@ -26,8 +26,8 @@ interface ReconnectErrorDialogProps {
   onReconnect: () => void;
   flowType: ConnectionFlowType;
   errorStep:
-    | ConnectionFlowStep.ReconnectManualFail
-    | ConnectionFlowStep.ReconnectAutoFail;
+    | ConnectionFlowStep.ReconnectFailed
+    | ConnectionFlowStep.ConnectionLost;
 }
 
 const contentConfig = {
@@ -55,8 +55,8 @@ const contentConfig = {
 };
 
 const errorTextIdPrefixConfig = {
-  [ConnectionFlowStep.ReconnectAutoFail]: "disconnectedWarning",
-  [ConnectionFlowStep.ReconnectManualFail]: "reconnectFailed",
+  [ConnectionFlowStep.ConnectionLost]: "disconnectedWarning",
+  [ConnectionFlowStep.ReconnectFailed]: "reconnectFailed",
 };
 
 const ReconnectErrorDialog = ({

src/components/ReconnectErrorDialog.tsx

@@ -1,4 +1,4 @@
-import { Grid, GridItem, Image, Text, VStack } from "@chakra-ui/react";
+import { Button, Grid, GridItem, Image, Text, VStack } from "@chakra-ui/react";
 import { FormattedMessage } from "react-intl";
 import batteryPackImage from "../images/stylised-battery-pack.svg";
 import microbitImage from "../images/stylised-microbit-black.svg";
@@ -9,6 +9,7 @@ import computerBluetoothImage from "../images/stylised_computer_w_bluetooth.svg"
 import ConnectContainerDialog, {
   ConnectContainerDialogProps,
 } from "./ConnectContainerDialog";
+import ExternalLink from "./ExternalLink";
 
 const itemsConfig = {
   radio: [
@@ -60,24 +61,42 @@ export interface WhatYouWillNeedDialogProps
   > {
   reconnect: boolean;
   type: "radio" | "bluetooth";
+  onLinkClick: (() => void) | undefined;
 }
 
 const WhatYouWillNeedDialog = ({
   reconnect,
   type,
+  onLinkClick,
   ...props
 }: WhatYouWillNeedDialogProps) => {
   return (
     <ConnectContainerDialog
       {...props}
-      linkTextId={`connectMB.${type}Start.switch${
-        type === "bluetooth" ? "Radio" : "Bluetooth"
-      }`}
       headingId={
         reconnect
-          ? `connectMB.${type}Start.heading`
+          ? `reconnectFailed.${type}Heading`
           : `connectMB.${type}Start.heading`
       }
+      footerLeft={
+        <VStack alignItems="start">
+          {onLinkClick && (
+            <Button onClick={onLinkClick} variant="link" size="lg">
+              <FormattedMessage
+                id={`connectMB.${type}Start.switch${
+                  type === "bluetooth" ? "Radio" : "Bluetooth"
+                }`}
+              />
+            </Button>
+          )}
+          {reconnect && (
+            <ExternalLink
+              href="https://support.microbit.org/a/solutions/articles/19000157495"
+              textId="connectMB.troubleshoot"
+            />
+          )}
+        </VStack>
+      }
     >
       {reconnect && (
         <Text>

src/components/WhatYouWillNeedDialog.tsx

@@ -1,5 +1,6 @@
 import {
   AccelerometerDataEvent,
+  ConnectionStatusEvent,
   ButtonEvent,
   ConnectionStatus as DeviceConnectionStatus,
   DeviceError,
@@ -78,7 +79,7 @@ export class ConnectActions {
     try {
       await this.usb.flash(data, {
         partial: true,
-        progress: (v) => progress(v ?? 100),
+        progress: (v: number | undefined) => progress(v ?? 100),
       });
       return ConnectAndFlashResult.Success;
     } catch (e) {
@@ -118,16 +119,16 @@ export class ConnectActions {
   };
 
   connectBluetooth = async (
-    name: string | undefined
-  ): Promise<ConnectResult> => {
+    name: string | undefined,
+    clearDevice: boolean
+  ): Promise<void> => {
+    if (clearDevice) {
+      await this.bluetooth.clearDevice();
+    }
     if (name) {
       this.bluetooth.setNameFilter(name);
     }
     await this.bluetooth.connect();
-    if (this.bluetooth.status === DeviceConnectionStatus.CONNECTED) {
-      return ConnectResult.Success;
-    }
-    return ConnectResult.ManualConnectFailed;
   };
 
   addAccelerometerListener = (
@@ -166,4 +167,12 @@ export class ConnectActions {
     await this.bluetooth.disconnect();
     await this.radioBridge.disconnect();
   };
+
+  addStatusListener = (listener: (e: ConnectionStatusEvent) => void) => {
+    this.bluetooth.addEventListener("status", listener);
+  };
+
+  removeStatusListener = (listener: (e: ConnectionStatusEvent) => void) => {
+    this.bluetooth.removeEventListener("status", listener);
+  };
 }