reafactor(#141): reuse room ref

jeremyckahn · Dec 2, 2024 · 7f72663 · 7f72663
1 parent e43b465
commit 7f72663
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/src/components/Room/useRoom.ts b/src/components/Room/useRoom.ts
@@ -65,10 +65,6 @@ export function useRoom(
 ) {
   const isPrivate = password !== undefined
 
-  const [peerRoom] = useState(
-    () => new PeerRoom({ password: password ?? roomId, ...roomConfig }, roomId)
-  )
-
   const {
     peerList,
     setPeerList,
@@ -79,8 +75,17 @@ export function useRoom(
     setPassword,
     customUsername,
     updatePeer,
+    peerRoomRef,
   } = useContext(ShellContext)
 
+  const [peerRoom] = useState(
+    () =>
+      peerRoomRef.current ??
+      new PeerRoom({ password: password ?? roomId, ...roomConfig }, roomId)
+  )
+
+  peerRoomRef.current = peerRoom
+
   const settingsContext = useContext(SettingsContext)
   const { showActiveTypingStatus } = settingsContext.getUserSettings()
   const [isMessageSending, setIsMessageSending] = useState(false)
@@ -188,9 +193,10 @@ export function useRoom(
     return () => {
       sendTypingStatusChange({ isTyping: false })
       peerRoom.leaveRoom()
+      peerRoomRef.current = null
       setPeerList([])
     }
-  }, [peerRoom, setPeerList, sendTypingStatusChange])
+  }, [peerRoom, setPeerList, sendTypingStatusChange, peerRoomRef])
 
   useEffect(() => {
     setPassword(password)

diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx
@@ -5,6 +5,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react'
 import CssBaseline from '@mui/material/CssBaseline'
@@ -29,7 +30,7 @@ import {
   AudioChannelName,
 } from 'models/chat'
 import { ErrorBoundary } from 'components/ErrorBoundary'
-import { PeerConnectionType } from 'lib/PeerRoom'
+import { PeerConnectionType, PeerRoom } from 'lib/PeerRoom'
 
 import { Drawer } from './Drawer'
 import { UpgradeDialog } from './UpgradeDialog'
@@ -63,6 +64,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
   const [windowWidth] = useWindowSize()
   const defaultSidebarsOpen = windowWidth >= theme.breakpoints.values.lg
 
+  const peerRoomRef = useRef<PeerRoom>(null)
   const [isAlertShowing, setIsAlertShowing] = useState(false)
   const [isDrawerOpen, setIsDrawerOpen] = useState(defaultSidebarsOpen)
   const [isQRCodeDialogOpen, setIsQRCodeDialogOpen] = useState(false)
@@ -159,6 +161,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
       setCustomUsername,
       connectionTestResults,
       updatePeer,
+      peerRoomRef,
     }),
     [
       isEmbedded,
@@ -189,6 +192,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
       setCustomUsername,
       connectionTestResults,
       updatePeer,
+      peerRoomRef,
     ]
   )
 

diff --git a/src/contexts/ShellContext.ts b/src/contexts/ShellContext.ts
@@ -1,18 +1,23 @@
-import { createContext, Dispatch, SetStateAction } from 'react'
+import {
+  createContext,
+  Dispatch,
+  MutableRefObject,
+  SetStateAction,
+} from 'react'
 
-import { AlertOptions } from 'models/shell'
+import { ConnectionTestResults } from 'components/Shell/useConnectionTest'
+import { TrackerConnection } from 'lib/ConnectionTest'
+import { PeerConnectionType, PeerRoom } from 'lib/PeerRoom'
 import {
+  AudioChannel,
+  AudioChannelName,
   AudioState,
-  ScreenShareState,
-  VideoState,
   Peer,
-  AudioChannel,
   PeerAudioChannelState,
-  AudioChannelName,
+  ScreenShareState,
+  VideoState,
 } from 'models/chat'
-import { PeerConnectionType } from 'lib/PeerRoom'
-import { ConnectionTestResults } from 'components/Shell/useConnectionTest'
-import { TrackerConnection } from 'lib/ConnectionTest'
+import { AlertOptions } from 'models/shell'
 
 interface ShellContextProps {
   isEmbedded: boolean
@@ -47,6 +52,7 @@ interface ShellContextProps {
   setCustomUsername: Dispatch<SetStateAction<string>>
   connectionTestResults: ConnectionTestResults
   updatePeer: (peerId: string, updatedProperties: Partial<Peer>) => void
+  peerRoomRef: MutableRefObject<PeerRoom | null>
 }
 
 export const ShellContext = createContext<ShellContextProps>({
@@ -87,4 +93,5 @@ export const ShellContext = createContext<ShellContextProps>({
     trackerConnection: TrackerConnection.SEARCHING,
   },
   updatePeer: () => {},
+  peerRoomRef: { current: null },
 })