refactor: create usePeerRoom hook

src/components/Room/Room.tsx

@@ -1,28 +1,14 @@
-import { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 
-import { PeerRoom } from '../../services/PeerRoom'
+import { usePeerRoom } from '../../hooks/usePeerRoom'
 
-interface RoomProps {
+export function Room() {
-  peerRoom?: PeerRoom
+  const { roomId = '' } = useParams()
-}
 
-export function Room({ peerRoom = new PeerRoom() }: RoomProps) {
+  usePeerRoom({
-  const params = useParams()
+    appId: process.env.REACT_APP_NAME || '',
-
+    roomId,
-  const { roomId } = params
+  })
-
-  useEffect(() => {
-    if (roomId) {
-      peerRoom.joinRoom(roomId)
-    } else {
-      console.error('roomId not specified')
-    }
-
-    return () => {
-      peerRoom.leaveRoom()
-    }
-  }, [peerRoom, roomId])
 
   return <>Room ID: {roomId}</>
 }

src/hooks/usePeerRoom/index.ts

@@ -0,0 +1 @@
+export * from './usePeerRoom'

src/hooks/usePeerRoom/usePeerRoom.ts

@@ -0,0 +1,26 @@
+import { useEffect, useMemo } from 'react'
+
+import { PeerRoom } from '../../services/PeerRoom'
+
+interface PeerRoomProps {
+  appId: string
+  roomId: string
+}
+
+export function usePeerRoom({ appId, roomId }: PeerRoomProps) {
+  const peerRoom = useMemo(() => {
+    return new PeerRoom()
+  }, [])
+
+  useEffect(() => {
+    peerRoom.joinRoom(appId, roomId)
+
+    return () => {
+      peerRoom.leaveRoom()
+    }
+  }, [appId, peerRoom, roomId])
+
+  return {
+    peerRoom,
+  }
+}

src/services/PeerRoom/PeerRoom.ts

@@ -3,8 +3,8 @@ import { joinRoom } from 'trystero'
 export class PeerRoom {
   room: any
 
-  joinRoom(roomId: string) {
+  joinRoom(appId: string, roomId: string) {
-    this.room = joinRoom({ appId: process.env.REACT_APP_NAME }, roomId)
+    this.room = joinRoom({ appId }, roomId)
   }
 
   leaveRoom() {