feat(connection-test): [closes #127] Explain tracker connection problems (#130)

* feat(connection-test): [closes #127] explain tracker connection problems

src/components/Shell/ConnectionTestResults.tsx

@@ -1,3 +1,4 @@
+import { useContext } from 'react'
 import CircularProgress from '@mui/material/CircularProgress'
 import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
@@ -6,6 +7,7 @@ import { Box } from '@mui/system'
 import ReportIcon from '@mui/icons-material/Report'
 
 import { TrackerConnection } from 'services/ConnectionTest/ConnectionTest'
+import { ShellContext } from 'contexts/ShellContext'
 
 import { ConnectionTestResults as IConnectionTestResults } from './useConnectionTest'
 
@@ -15,9 +17,19 @@ interface ConnectionTestResultsProps {
 export const ConnectionTestResults = ({
   connectionTestResults: { hasHost, hasRelay, trackerConnection },
 }: ConnectionTestResultsProps) => {
+  const { setIsServerConnectionFailureDialogOpen } = useContext(ShellContext)
+
+  const handleServerConnectionFailedMessageClick = () => {
+    setIsServerConnectionFailureDialogOpen(true)
+  }
+
   if (trackerConnection === TrackerConnection.FAILED) {
     return (
-      <Typography variant="subtitle2">
+      <Typography
+        variant="subtitle2"
+        sx={{ cursor: 'pointer' }}
+        onClick={handleServerConnectionFailedMessageClick}
+      >
         <Box
           sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
         >

src/components/Shell/ServerConnectionFailureDialog.tsx

@@ -0,0 +1,65 @@
+import { useContext } from 'react'
+import useTheme from '@mui/material/styles/useTheme'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import DialogTitle from '@mui/material/DialogTitle'
+import ReportIcon from '@mui/icons-material/Report'
+
+import { ShellContext } from 'contexts/ShellContext'
+
+export const ServerConnectionFailureDialog = () => {
+  const theme = useTheme()
+  const {
+    isServerConnectionFailureDialogOpen,
+    setIsServerConnectionFailureDialogOpen,
+  } = useContext(ShellContext)
+
+  const handleDialogClose = () => {
+    setIsServerConnectionFailureDialogOpen(false)
+  }
+
+  return (
+    <Dialog
+      open={isServerConnectionFailureDialogOpen}
+      onClose={handleDialogClose}
+    >
+      <DialogTitle>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <ReportIcon
+            fontSize="medium"
+            sx={theme => ({
+              color: theme.palette.error.main,
+              mr: theme.spacing(1),
+            })}
+          />
+          Server connection failed
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          A pairing server could not be found. Make sure you are connected to
+          the internet. If you still can't connect, try:
+        </DialogContentText>
+        <Typography
+          component="ul"
+          sx={{
+            color: theme.palette.text.secondary,
+            m: 1,
+          }}
+        >
+          <li>Refreshing the page</li>
+          <li>Disabling any adblockers</li>
+          <li>Connecting to a different network</li>
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleDialogClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

src/components/Shell/Shell.tsx

@@ -30,6 +30,7 @@ import { PeerList } from './PeerList'
 import { QRCodeDialog } from './QRCodeDialog'
 import { RoomShareDialog } from './RoomShareDialog'
 import { useConnectionTest } from './useConnectionTest'
+import { ServerConnectionFailureDialog } from './ServerConnectionFailureDialog'
 
 export interface ShellProps extends PropsWithChildren {
   userPeerId: string
@@ -68,6 +69,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
   const [password, setPassword] = useState<string | undefined>(undefined)
   const [isPeerListOpen, setIsPeerListOpen] = useState(defaultSidebarsOpen)
   const [peerList, setPeerList] = useState<Peer[]>([]) // except self
+  const [
+    isServerConnectionFailureDialogOpen,
+    setIsServerConnectionFailureDialogOpen,
+  ] = useState(false)
   const [peerConnectionTypes, setPeerConnectionTypes] = useState<
     Record<string, PeerConnectionType>
   >({})
@@ -109,6 +114,8 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
       setIsPeerListOpen,
       peerList,
       setPeerList,
+      isServerConnectionFailureDialogOpen,
+      setIsServerConnectionFailureDialogOpen,
       peerConnectionTypes,
       setPeerConnectionTypes,
       audioState,
@@ -131,6 +138,8 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
       password,
       setPassword,
       peerList,
+      isServerConnectionFailureDialogOpen,
+      setIsServerConnectionFailureDialogOpen,
       peerConnectionTypes,
       tabHasFocus,
       showRoomControls,
@@ -346,6 +355,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
             showAlert={showAlert}
             copyToClipboard={copyToClipboard}
           />
+          <ServerConnectionFailureDialog />
         </Box>
       </ThemeProvider>
     </ShellContext.Provider>

src/contexts/ShellContext.ts

@@ -20,6 +20,8 @@ interface ShellContextProps {
   setIsPeerListOpen: Dispatch<SetStateAction<boolean>>
   peerList: Peer[]
   setPeerList: Dispatch<SetStateAction<Peer[]>>
+  isServerConnectionFailureDialogOpen: boolean
+  setIsServerConnectionFailureDialogOpen: Dispatch<SetStateAction<boolean>>
   peerConnectionTypes: Record<string, PeerConnectionType>
   setPeerConnectionTypes: Dispatch<
     SetStateAction<Record<string, PeerConnectionType>>
@@ -51,6 +53,8 @@ export const ShellContext = createContext<ShellContextProps>({
   setIsPeerListOpen: () => {},
   peerList: [],
   setPeerList: () => {},
+  isServerConnectionFailureDialogOpen: false,
+  setIsServerConnectionFailureDialogOpen: () => {},
   peerConnectionTypes: {},
   setPeerConnectionTypes: () => {},
   audioState: AudioState.STOPPED,