Refactored useChatRoom hook

src/components/ScoreBoardAndToggle.tsx

@@ -108,7 +108,7 @@ export default function ScoreBoardAndToggle(props: {
             </thead>
             <tbody>
             {
-              Array.from(props.scoreBoard.entries()).sort(([p1, s1], [p2, s2]) => s2 - s1).map(([player, score], i) =>
+              Array.from(props.scoreBoard.entries()).sort(([, s1], [, s2]) => s2 - s1).map(([player, score], i) =>
                 <tr key={i}>
                   <td><PlayerAvatar playerId={player}/></td>
                   <td>{props.names.get(player) ?? '-'}</td>

src/lib/useChatRoom.ts

@@ -1,7 +1,8 @@
-import {useEffect, useState} from "react";
 import {Chat} from "./setup";
 import {ChatRoomEvents} from "./ChatRoom";
 import {EventListener} from "./types";
+import useNames from "./useNames";
+import useMessages from "./useMessages";
 
 export interface Message {
   type: 'message';
@@ -21,41 +22,8 @@ export interface ChatRoomLike {
 export default function useChatRoom(
   chatRoom: ChatRoomLike = Chat,
 ) {
-  const [messages, setMessages] = useState<Messages>([]);
-
-  useEffect(() => {
-    const textListener = (text: string, whose: string) => {
-      setMessages(prev => [
-        ...prev,
-        {
-          type: 'message',
-          text,
-          whose,
-          timestamp: Date.now(),
-        },
-      ]);
-    };
-    chatRoom.listener.on('text', textListener);
-    return () => {
-      chatRoom.listener.off('text', textListener);
-    }
-  }, [chatRoom.listener]);
-
-  const [names, setNames] = useState(new Map<string, string>());
-
-  useEffect(() => {
-    const nameListener = (name: string, whose: string) => {
-      setNames(prev => {
-        const next = new Map(prev);
-        next.set(whose, name);
-        return next;
-      });
-    };
-    chatRoom.listener.on('name', nameListener);
-    return () => {
-      chatRoom.listener.off('name', nameListener);
-    }
-  }, [chatRoom.listener]);
+  const messages = useMessages(chatRoom);
+  const names = useNames(chatRoom);
 
   const setMyName = (name: string) => {
     chatRoom.setMyName(name);

src/lib/useMessages.test.ts

@@ -0,0 +1,28 @@
+import {renderHook, waitFor} from "@testing-library/react";
+import useMessages, {ChatRoomLike} from "./useMessages";
+import EventEmitter from "eventemitter3";
+import {ChatRoomEvents} from "./ChatRoom";
+
+describe('useMessages', () => {
+  test('messages are returned', async () => {
+    const listener = new EventEmitter<ChatRoomEvents>();
+    const mockChatRoom: ChatRoomLike = {
+      listener,
+    };
+    const { result } = renderHook(() => useMessages(mockChatRoom));
+
+    listener.emit('text', 'ABC', 'player1');
+    listener.emit('text', 'XYZ', 'player2');
+
+    await waitFor(() => {
+      expect(result.current.length).toBe(2);
+    });
+    const messages = result.current;
+    expect(messages[0].text).toBe('ABC');
+    expect(messages[0].whose).toBe('player1');
+    expect(messages[0].timestamp).toBeDefined();
+    expect(messages[1].text).toBe('XYZ');
+    expect(messages[1].whose).toBe('player2');
+    expect(messages[1].timestamp).toBeDefined();
+  });
+});

src/lib/useMessages.ts

@@ -0,0 +1,43 @@
+import {useEffect, useState} from "react";
+import {Chat} from "./setup";
+import {EventListener} from "./types";
+import {ChatRoomEvents} from "./ChatRoom";
+
+export interface Message {
+  type: 'message';
+  text: string;
+  whose: string;
+  timestamp: number;
+}
+
+export type Messages = Message[];
+
+export interface ChatRoomLike {
+  listener: EventListener<ChatRoomEvents>;
+}
+
+export default function useMessages(
+  chatRoom: ChatRoomLike = Chat,
+) {
+  const [messages, setMessages] = useState<Messages>([]);
+
+  useEffect(() => {
+    const textListener = (text: string, whose: string) => {
+      setMessages(prev => [
+        ...prev,
+        {
+          type: 'message',
+          text,
+          whose,
+          timestamp: Date.now(),
+        },
+      ]);
+    };
+    chatRoom.listener.on('text', textListener);
+    return () => {
+      chatRoom.listener.off('text', textListener);
+    }
+  }, [chatRoom.listener]);
+
+  return messages;
+}

src/lib/useNames.test.ts

@@ -0,0 +1,25 @@
+import {renderHook, waitFor} from "@testing-library/react";
+import EventEmitter from "eventemitter3";
+import {ChatRoomEvents} from "./ChatRoom";
+import useNames, {ChatRoomLike} from "./useNames";
+
+describe('useNames', () => {
+  test('names are updated', async () => {
+    const listener = new EventEmitter<ChatRoomEvents>();
+    const mockChatRoom: ChatRoomLike = {
+      listener,
+    };
+    const { result } = renderHook(() => useNames(mockChatRoom));
+
+    listener.emit('name', 'Alice', 'player1')
+    listener.emit('name', 'Bob', 'player2');
+
+    await waitFor(() => {
+      expect(result.current.size).toBe(2);
+    });
+
+    const names = result.current;
+    expect(names.get('player1')).toBe('Alice');
+    expect(names.get('player2')).toBe('Bob');
+  });
+});

src/lib/useNames.ts

@@ -0,0 +1,30 @@
+import {useEffect, useState} from "react";
+import {Chat} from "./setup";
+import {ChatRoomEvents} from "./ChatRoom";
+import {EventListener} from "./types";
+
+export interface ChatRoomLike {
+  listener: EventListener<ChatRoomEvents>;
+}
+
+export default function useNames(
+  chatRoom: ChatRoomLike = Chat,
+) {
+  const [names, setNames] = useState(new Map<string, string>());
+
+  useEffect(() => {
+    const nameListener = (name: string, whose: string) => {
+      setNames(prev => {
+        const next = new Map(prev);
+        next.set(whose, name);
+        return next;
+      });
+    };
+    chatRoom.listener.on('name', nameListener);
+    return () => {
+      chatRoom.listener.off('name', nameListener);
+    }
+  }, [chatRoom.listener]);
+
+  return names;
+}