[Feat] BluetoothConnectionOptions

Created a button which opens a dialog for bluetooth device choice.
References #24, #27.

client/src/components/BluetoothConnectDialog/BluetoothConnectDialog.lazy.tsx

@@ -0,0 +1,15 @@
+import React, { lazy, Suspense } from 'react';
+
+const LazyBluetoothConnectDialog = lazy(
+  () => import('./BluetoothConnectDialog'),
+);
+
+const BluetoothConnectDialog = (
+  props: JSX.IntrinsicAttributes & { children?: React.ReactNode },
+) => (
+  <Suspense fallback={null}>
+    <LazyBluetoothConnectDialog {...props} />
+  </Suspense>
+);
+
+export default BluetoothConnectDialog;

client/src/components/BluetoothConnectDialog/BluetoothConnectDialog.module.scss

@@ -0,0 +1 @@
+.BluetoothConnectDialog {}

client/src/components/BluetoothConnectDialog/BluetoothConnectDialog.stories.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import BluetoothConnectDialog from './BluetoothConnectDialog';
+
+export default {
+  title: "BluetoothConnectDialog",
+};
+
+export const Default = () => <BluetoothConnectDialog />;
+
+Default.story = {
+  name: 'default',
+};

client/src/components/BluetoothConnectDialog/BluetoothConnectDialog.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import BluetoothConnectDialog from './BluetoothConnectDialog';
+
+describe('<BluetoothConnectDialog />', () => {
+  test('it should mount', () => {
+    render(<BluetoothConnectDialog />);
+
+    const bluetoothConnectDialog = screen.getByTestId('BluetoothConnectDialog');
+
+    expect(bluetoothConnectDialog).toBeInTheDocument();
+  });
+});

client/src/components/BluetoothConnectDialog/BluetoothConnectDialog.tsx

@@ -0,0 +1,48 @@
+import { Container, Dialog, DialogTitle } from '@mui/material';
+import React, { FC, useEffect, useState } from 'react';
+import styles from './BluetoothConnectDialog.module.scss';
+import BluetoothDeviceSelection from '../BluetoothDeviceSelection/BluetoothDeviceSelection';
+import UnsupportedPlatform from '../UnsupportedPlatform/UnsupportedPlatform';
+
+interface BluetoothConnectDialogProps {
+  open: boolean;
+  onClose: (device: BluetoothDevice) => void;
+}
+
+const BluetoothConnectDialog: FC<BluetoothConnectDialogProps> = (
+  props: BluetoothConnectDialogProps,
+) => {
+  const { onClose, open } = props;
+  const [supportsBluetooth, setSupportsBluetooth] = useState(false);
+
+  useEffect(() => {
+    if (navigator.bluetooth) {
+      navigator.bluetooth
+        .getAvailability()
+        .then((isAvailable) => setSupportsBluetooth(isAvailable))
+        .catch(() => setSupportsBluetooth(false));
+    }
+  }, []);
+
+  const handleClose = (device: BluetoothDevice) => {
+    onClose(device);
+  };
+
+  return (
+    <Container
+      className={styles.BluetoothConnectDialog}
+      data-testid="BluetoothConnectDialog"
+    >
+      <Dialog fullWidth={true} onClose={handleClose} open={open}>
+        <DialogTitle>Connect to headset</DialogTitle>
+        {supportsBluetooth ? (
+          <BluetoothDeviceSelection handleDeviceClick={handleClose} />
+        ) : (
+          <UnsupportedPlatform />
+        )}
+      </Dialog>
+    </Container>
+  );
+};
+
+export default BluetoothConnectDialog;

client/src/components/BluetoothConnectionOptions/BluetoothConnectionOptions.lazy.tsx

@@ -0,0 +1,11 @@
+import React, { lazy, Suspense } from 'react';
+
+const LazyBluetoothConnectionOptions = lazy(() => import('./BluetoothConnectionOptions'));
+
+const BluetoothConnectionOptions = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode; }) => (
+  <Suspense fallback={null}>
+    <LazyBluetoothConnectionOptions {...props} />
+  </Suspense>
+);
+
+export default BluetoothConnectionOptions;

client/src/components/BluetoothConnectionOptions/BluetoothConnectionOptions.module.scss

@@ -0,0 +1 @@
+.BluetoothConnectionOptions {}

client/src/components/BluetoothConnectionOptions/BluetoothConnectionOptions.stories.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import BluetoothConnectionOptions from './BluetoothConnectionOptions';
+
+export default {
+  title: "BluetoothConnectionOptions",
+};
+
+export const Default = () => <BluetoothConnectionOptions />;
+
+Default.story = {
+  name: 'default',
+};

client/src/components/BluetoothConnectionOptions/BluetoothConnectionOptions.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import BluetoothConnectionOptions from './BluetoothConnectionOptions';
+
+describe('<BluetoothConnectionOptions />', () => {
+  test('it should mount', () => {
+    render(<BluetoothConnectionOptions />);
+
+    const bluetoothConnectionOptions = screen.getByTestId('BluetoothConnectionOptions');
+
+    expect(bluetoothConnectionOptions).toBeInTheDocument();
+  });
+});

client/src/components/BluetoothConnectionOptions/BluetoothConnectionOptions.tsx

@@ -0,0 +1,48 @@
+import React, { FC, useContext } from 'react';
+import { Button, Container } from '@mui/material';
+import styles from './BluetoothConnectionOptions.module.scss';
+import { BluetoothSearching, BluetoothDisabled } from '@mui/icons-material';
+import BluetoothConnectDialog from '../BluetoothConnectDialog/BluetoothConnectDialog';
+import { HeadsetContext } from '../../contexts/HeadsetContext';
+
+const BluetoothConnectionOptions: FC<{}> = () => {
+  const { headset, setHeadset } = useContext(HeadsetContext);
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (device: BluetoothDevice) => {
+    setOpen(false);
+    connectDevice(device);
+  };
+
+  const connectDevice = (device: BluetoothDevice) => {
+    setHeadset(device);
+  };
+
+  const disconnectDevice = () => {
+    setHeadset(undefined);
+  };
+
+  return (
+    <Container
+      className={styles.BluetoothConnectionOptions}
+      data-testid="BluetoothConnectionOptions"
+    >
+      {!headset ? (
+        <Button variant="outlined" onClick={handleOpen}>
+          <BluetoothSearching /> Connect
+        </Button>
+      ) : (
+        <Button variant="outlined" onClick={() => disconnectDevice()}>
+          <BluetoothDisabled /> Disconnect
+        </Button>
+      )}
+      <BluetoothConnectDialog open={open} onClose={handleClose} />
+    </Container>
+  );
+};
+
+export default BluetoothConnectionOptions;

client/src/components/BluetoothDeviceSelection/BluetoothDeviceSelection.tsx

@@ -8,16 +8,24 @@ import {
   ListItemText,
   Typography,
 } from '@mui/material';
-import React, { FC, useState } from 'react';
+import React, { FC, useContext, useState } from 'react';
 import styles from './BluetoothDeviceSelection.module.scss';
 import { Bluetooth, Refresh } from '@mui/icons-material';
+import { HeadsetContext } from '../../contexts/HeadsetContext';
 
 interface DevicesTable {
   [key: string]: BluetoothDevice;
 }
 
-const BluetoothDeviceSelection: FC<{}> = () => {
+interface BluetoothDeviceSelectionProps {
+  handleDeviceClick: (device: BluetoothDevice) => void;
+}
+
+const BluetoothDeviceSelection: FC<BluetoothDeviceSelectionProps> = (
+  props: BluetoothDeviceSelectionProps,
+) => {
   const [devices, setDevices] = useState<DevicesTable>({});
+  const { setHeadset } = useContext(HeadsetContext);
 
   const refreshDevices = async () => {
     const requestDeviceOptions = {
@@ -44,23 +52,18 @@ const BluetoothDeviceSelection: FC<{}> = () => {
     setDevices(result);
   };
 
-  const connectDevice = (device: BluetoothDevice) => {
-    console.log(device);
-  };
-
   return (
     <Container
       className={styles.BluetoothDeviceSelection}
       data-testid="BluetoothDeviceSelection"
     >
-      <Typography variant="h5">Select a bluetooth device</Typography>
       <Button onClick={() => refreshDevices()}>
         <Refresh />
       </Button>
       <List>
         {Object.values(devices).map((device) => (
           <ListItem key={device.id}>
-            <ListItemButton onClick={() => connectDevice(device)}>
+            <ListItemButton onClick={() => props.handleDeviceClick(device)}>
               <ListItemIcon>
                 <Bluetooth />
               </ListItemIcon>

client/src/components/HeadsetMonitor/HeadsetMonitor.lazy.tsx

@@ -0,0 +1,11 @@
+import React, { lazy, Suspense } from 'react';
+
+const LazyHeadsetMonitor = lazy(() => import('./HeadsetMonitor'));
+
+const HeadsetMonitor = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode; }) => (
+  <Suspense fallback={null}>
+    <LazyHeadsetMonitor {...props} />
+  </Suspense>
+);
+
+export default HeadsetMonitor;

client/src/components/HeadsetMonitor/HeadsetMonitor.module.scss

@@ -0,0 +1 @@
+.HeadsetMonitor {}

client/src/components/HeadsetMonitor/HeadsetMonitor.stories.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import HeadsetMonitor from './HeadsetMonitor';
+
+export default {
+  title: "HeadsetMonitor",
+};
+
+export const Default = () => <HeadsetMonitor />;
+
+Default.story = {
+  name: 'default',
+};

client/src/components/HeadsetMonitor/HeadsetMonitor.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import HeadsetMonitor from './HeadsetMonitor';
+
+describe('<HeadsetMonitor />', () => {
+  test('it should mount', () => {
+    render(<HeadsetMonitor />);
+
+    const headsetMonitor = screen.getByTestId('HeadsetMonitor');
+
+    expect(headsetMonitor).toBeInTheDocument();
+  });
+});

client/src/components/HeadsetMonitor/HeadsetMonitor.tsx

@@ -0,0 +1,14 @@
+import { Container } from '@mui/material';
+import React, { FC } from 'react';
+import BluetoothConnectionOptions from '../BluetoothConnectionOptions/BluetoothConnectionOptions';
+import styles from './HeadsetMonitor.module.scss';
+
+const HeadsetMonitor: FC<{}> = () => {
+  return (
+    <Container className={styles.HeadsetMonitor} data-testid="HeadsetMonitor">
+      <BluetoothConnectionOptions />
+    </Container>
+  );
+};
+
+export default HeadsetMonitor;

client/src/components/UnsupportedPlatform/UnsupportedPlatform.lazy.tsx

@@ -0,0 +1,11 @@
+import React, { lazy, Suspense } from 'react';
+
+const LazyUnsupportedPlatform = lazy(() => import('./UnsupportedPlatform'));
+
+const UnsupportedPlatform = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode; }) => (
+  <Suspense fallback={null}>
+    <LazyUnsupportedPlatform {...props} />
+  </Suspense>
+);
+
+export default UnsupportedPlatform;

client/src/components/UnsupportedPlatform/UnsupportedPlatform.module.scss

@@ -0,0 +1 @@
+.UnsupportedPlatform {}

client/src/components/UnsupportedPlatform/UnsupportedPlatform.stories.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import UnsupportedPlatform from './UnsupportedPlatform';
+
+export default {
+  title: "UnsupportedPlatform",
+};
+
+export const Default = () => <UnsupportedPlatform />;
+
+Default.story = {
+  name: 'default',
+};

client/src/components/UnsupportedPlatform/UnsupportedPlatform.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import UnsupportedPlatform from './UnsupportedPlatform';
+
+describe('<UnsupportedPlatform />', () => {
+  test('it should mount', () => {
+    render(<UnsupportedPlatform />);
+
+    const unsupportedPlatform = screen.getByTestId('UnsupportedPlatform');
+
+    expect(unsupportedPlatform).toBeInTheDocument();
+  });
+});

client/src/components/UnsupportedPlatform/UnsupportedPlatform.tsx

@@ -0,0 +1,19 @@
+import { Container, Typography } from '@mui/material';
+import React, { FC } from 'react';
+import styles from './UnsupportedPlatform.module.scss';
+
+const UnsupportedPlatform: FC<{}> = () => {
+  return (
+    <Container
+      className={styles.UnsupportedPlatform}
+      data-testid="UnsupportedPlatform"
+    >
+      <Typography textAlign="center">
+        Sadly, the platform you are running this application on is currently
+        unsupported.
+      </Typography>
+    </Container>
+  );
+};
+
+export default UnsupportedPlatform;