refactor: add usePeerRoomAction hook

src/components/Room/Room.tsx

@@ -1,25 +1,19 @@
-import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
 
-import { usePeerRoom } from 'hooks/usePeerRoom'
+import { usePeerRoom, usePeerRoomAction, PeerActions } from 'hooks/usePeerRoom'
 import { PeerRoom } from 'services/PeerRoom'
 
-enum PeerActions {
-  MESSAGE = 'MESSAGE',
-}
-
 interface RoomProps {
   peerRoom: PeerRoom
   roomId: string
 }
 
 function Room({ peerRoom, roomId }: RoomProps) {
-  const { makeAction } = peerRoom
+  const [sendMessage, receiveMessage] = usePeerRoomAction<string>(
-
+    peerRoom,
-  const [[sendMessage, receiveMessage]] = useState(() =>
+    PeerActions.MESSAGE
-    makeAction<string>(PeerActions.MESSAGE)
   )
 
   receiveMessage(message => {

src/hooks/usePeerRoom/index.ts

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

src/hooks/usePeerRoom/usePeerRoom.ts

@@ -2,12 +2,12 @@ import { useEffect, useState } from 'react'
 
 import { PeerRoom, getPeerRoom } from 'services/PeerRoom'
 
-interface PeerRoomProps {
+interface UsePeerRoomProps {
   appId: string
   roomId: string
 }
 
-export function usePeerRoom({ appId, roomId }: PeerRoomProps) {
+export function usePeerRoom({ appId, roomId }: UsePeerRoomProps) {
   const [peerRoom, setPeerRoom] = useState<PeerRoom | null>(null)
 
   useEffect(() => {

src/hooks/usePeerRoom/usePeerRoomAction.ts

@@ -0,0 +1,13 @@
+import { useState } from 'react'
+
+import { PeerRoom } from 'services/PeerRoom'
+
+export enum PeerActions {
+  MESSAGE = 'MESSAGE',
+}
+
+export function usePeerRoomAction<T>(peerRoom: PeerRoom, action: PeerActions) {
+  const [peerRoomAction] = useState(() => peerRoom.makeAction<T>(action))
+
+  return peerRoomAction
+}