c12: feat: show room name (#63)

client/src/modules/pad/PadCursorsRenderer.tsx

@@ -24,7 +24,7 @@ export default function PadCursorsRenderer({
 }) {
   const now = useCurrentTime()
 
-  const participants = useAppSelector((root) => root.socket.participants)
+  const participants = useAppSelector((root) => root.room.participants)
   const nameMap = useMemo(
     () => mapValues(participants, (value) => value.name),
     [participants]

client/src/modules/participants/participants.hook.ts

@@ -8,21 +8,21 @@ import {
   ServerSocketCode,
 } from '@/modules/socket/server-socket.types'
 import { useAppDispatch, useAppSelector } from '@/store/hooks'
-import { SocketActions } from '@/modules/socket/socket.slice'
+import { RoomActions } from '@/modules/room/room.slice'
 import { Participant } from './participants.types'
 
 export function useParticipantWatcher() {
   const dispatch = useAppDispatch()
   const setParticipants = useCallback(
     (participants: Participant[]) => {
-      dispatch(SocketActions.setParticipants(participants))
+      dispatch(RoomActions.setParticipants(participants))
     },
     [dispatch]
   )
 
   const setParticipant = useCallback(
     (participant: Participant) => {
-      dispatch(SocketActions.setParticipant(participant))
+      dispatch(RoomActions.setParticipant(participant))
     },
     [dispatch]
   )
@@ -76,5 +76,5 @@ export function useParticipantWatcher() {
 }
 
 export function useParticipants() {
-  return useAppSelector((state) => state.socket.participants)
+  return useAppSelector((state) => state.room.participants)
 }

client/src/modules/socket/socket.slice.ts → client/src/modules/room/room.slice.ts

@@ -1,20 +1,22 @@
 import { Participant } from '@/modules/participants/participants.types'
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
-interface SocketSlice {
+interface RoomSlice {
   participants: Record<string, Participant>
+  name: string
 }
 
-const INITIAL_STATE: SocketSlice = {
+const INITIAL_STATE: RoomSlice = {
   participants: {},
+  name: '',
 }
 
-// TODO rename to room slice
-export const socketSlice = createSlice({
-  name: 'socket',
+const roomSlice = createSlice({
+  name: 'room',
   initialState: INITIAL_STATE,
   reducers: {
     resetSlice: () => INITIAL_STATE,
+
     setParticipant: (state, { payload }: PayloadAction<Participant>) => {
       state.participants[payload.id] = payload
     },
@@ -24,8 +26,12 @@ export const socketSlice = createSlice({
         state.participants[participant.id] = participant
       }
     },
+
+    setName: (state, { payload }: PayloadAction<string>) => {
+      state.name = payload
+    },
   },
 })
 
-export const SocketActions = socketSlice.actions
-export default socketSlice.reducer
+export const RoomActions = roomSlice.actions
+export default roomSlice.reducer

client/src/pages/Room/RoomToolbar.tsx

@@ -7,6 +7,7 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { useCopyToClipboard } from 'react-use'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
+import { useAppSelector } from '@/store/hooks'
 
 function LeaveButton() {
   const navigate = useNavigate()
@@ -97,11 +98,23 @@ function ShareButton() {
 }
 
 export function RoomToolbar() {
+  const title = useAppSelector((app) => app.room.name)
+
   return (
     <Row className="justify-content-between align-items-center">
       <Col xs="auto">
         <LeaveButton />
       </Col>
+      <Col>
+        <Row className="align-items-center gx-2">
+          <Col xs="auto">
+            <div className="col-auto">Room name:</div>
+          </Col>
+          <Col xs="auto">
+            <h1 className="h5 my-0 col-auto">{title}</h1>
+          </Col>
+        </Row>
+      </Col>
       <Col xs="auto">
         <ShareButton />
       </Col>

client/src/pages/Room/index.tsx

@@ -27,7 +27,7 @@ import { PadEventsProvider } from '@/modules/pad-socket/pad-events-v2.context'
 import { useEffect } from 'react'
 import { useAppDispatch } from '@/store/hooks'
 import { PadActions } from '@/modules/pad-common/pad.slice'
-import { SocketActions } from '@/modules/socket/socket.slice'
+import { RoomActions } from '@/modules/room/room.slice'
 
 enum RoomErrorType {
   NO_USERNAME,
@@ -111,21 +111,23 @@ export const loader: LoaderFunction = async ({ params }) => {
 }
 
 export function Component() {
-  const { socket } = useLoaderData() as {
+  const { socket, room } = useLoaderData() as {
     socket: Socket
+    room: Room
   }
   const { roomId } = useParams()
   const dispatch = useAppDispatch()
 
   useEffect(() => {
     socket.connect()
+    dispatch(RoomActions.setName(room.name))
 
     return () => {
       socket.disconnect()
       dispatch(PadActions.resetSlice())
-      dispatch(SocketActions.resetSlice())
+      dispatch(RoomActions.resetSlice())
     }
-  }, [socket, dispatch])
+  }, [socket, dispatch, room])
 
   return (
     <PadEventsProvider socket={socket} roomId={roomId!}>

client/src/store/index.ts

@@ -1,13 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit'
 import padReducer from '@/modules/pad-common/pad.slice'
 import uiReducer from '@/modules/ui/ui.slice'
-import socketReducer from '@/modules/socket/socket.slice'
+import roomReducer from '@/modules/room/room.slice'
 
 const store = configureStore({
   reducer: {
     pad: padReducer,
     ui: uiReducer,
-    socket: socketReducer,
+    room: roomReducer,
   },
 })