Skip to content

Commit 1f3d37b

Browse files
sonyahu15sonyahu15
authored
Merge pull request #11 from oslabs-beta/nam
User List fully Implemented.
2 parents bbb036b + 0e8f341 commit 1f3d37b

File tree

2 files changed

+113
-69
lines changed

2 files changed

+113
-69
lines changed

‎app/src/components/left/RoomsContainer.tsx‎

Lines changed: 89 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import { Stack, Typography } from '@mui/material';
22
import { useDispatch, useSelector } from 'react-redux';
3-
3+
import Box from '@mui/material/Box';
4+
import List from '@mui/material/List';
5+
import ListItem from '@mui/material/ListItem';
6+
import ListItemText from '@mui/material/ListItemText';
47
import Button from '@mui/material/Button';
58
import React, { useState } from 'react';
69
import { RootState } from '../../redux/store';
710
import TextField from '@mui/material/TextField';
811
import { allCooperativeState } from '../../redux/reducers/slice/appStateSlice';
9-
import { setRoomCode, setUserName, setUserJoined, setUserList } from '../../redux/reducers/slice/roomSlice';
12+
import {
13+
setRoomCode,
14+
setUserName,
15+
setUserJoined,
16+
setUserList
17+
} from '../../redux/reducers/slice/roomSlice';
1018
import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSlice';
1119
import config from '../../../../config';
1220
import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice';
@@ -21,24 +29,22 @@ import debounce from '../../../../node_modules/lodash/debounce.js';
2129
let socket;
2230
const { API_BASE_URL } = config;
2331
const RoomsContainer = () => {
24-
2532
const dispatch = useDispatch();
26-
const { state, roomCode, userName, userList, userJoined } = useSelector((store: RootState) => ({
27-
state: store.appState,
28-
roomCode: store.roomSlice.roomCode,
29-
userName: store.roomSlice.userName,
30-
userList: store.roomSlice.userList,
31-
userJoined: store.roomSlice.userJoined,
32-
}));
33+
const { state, roomCode, userName, userList, userJoined } = useSelector(
34+
(store: RootState) => ({
35+
state: store.appState,
36+
roomCode: store.roomSlice.roomCode,
37+
userName: store.roomSlice.userName,
38+
userList: store.roomSlice.userList,
39+
userJoined: store.roomSlice.userJoined
40+
})
41+
);
3342
React.useEffect(() => {
3443
console.log('You Joined Room---front end:', roomCode);
3544
}, [roomCode]);
3645

3746
function initSocketConnection(roomCode) {
38-
if (socket) {
39-
//edge case check if socket connection existed
40-
socket.disconnect();
41-
}
47+
if (socket) socket.disconnect(); //edge case check if socket connection existed
4248

4349
socket = io(API_BASE_URL, {
4450
transports: ['websocket']
@@ -47,21 +53,22 @@ const RoomsContainer = () => {
4753
socket.on('connect', () => {
4854
console.log(`You Connected With Id: ${socket.id}`);
4955
socket.emit('join-room', roomCode); // Join the room when connected
50-
//passing current client nickname to server
5156
console.log(`Your Nickname Is: ${userName}`);
52-
socket.emit('userJoined', userName);
57+
//passing current client nickname to server
58+
socket.emit('userJoined', userName, roomCode);
59+
//listening to back end for updating user list
60+
socket.on('updateUserList', (newUserList) => {
61+
dispatch(setUserList(Object.values(newUserList)));
62+
});
5363
});
54-
5564

5665
// receiving the message from the back end
5766
socket.on('receive message', (event) => {
5867
let currentStore: any = JSON.stringify(store.getState());
59-
console.log('event ', event);
68+
// console.log('event ', event);
6069
if (currentStore !== event) {
6170
currentStore = JSON.parse(currentStore);
6271
event = JSON.parse(event);
63-
console.log('current store', currentStore);
64-
console.log('event ', event);
6572
if (currentStore.appState !== event.appState) {
6673
store.dispatch(allCooperativeState(event.appState));
6774
} else if (
@@ -85,21 +92,11 @@ const RoomsContainer = () => {
8592
const newState = store.getState();
8693
const roomCode = newState.roomSlice.roomCode;
8794

88-
//why emitting room code every 100 milisecond?
89-
// if (roomCode !== '') {
90-
// // Emit the current room code
91-
// socket.emit('room-code', roomCode);
92-
// }
9395
if (newState !== previousState) {
9496
// Send the current state to the server
95-
socket.emit(
96-
'custom-event',
97-
JSON.stringify(newState),
98-
roomCode
99-
);
97+
socket.emit('custom-event', JSON.stringify(newState), roomCode);
10098
previousState = newState;
10199
}
102-
103100
}, 100);
104101

105102
store.subscribe(() => {
@@ -109,16 +106,20 @@ const RoomsContainer = () => {
109106
});
110107

111108
function joinRoom() {
112-
// Call handleUserEnteredRoom when joining a room
113-
handleUserEnteredRoom(roomCode);
109+
if (userList.length !== 0) setUserList([]); //edge case check if userList not empty.
110+
handleUserEnteredRoom(roomCode); // Call handleUserEnteredRoom when joining a room
114111
dispatch(setRoomCode(roomCode));
115112
dispatch(setUserJoined(true)); //setting joined room to true for rendering leave room button
116113
}
117114

118115
function leaveRoom() {
119-
if (socket) socket.disconnect(); //disconnecting socket
116+
if (socket) {
117+
socket.emit('updateUserDisconnect', roomCode);
118+
socket.disconnect();
119+
} //disconnecting socket functionality
120120
dispatch(setRoomCode(''));
121121
dispatch(setUserName(''));
122+
dispatch(setUserList([]));
122123
dispatch(setUserJoined(false)); //setting joined to false so join button appear
123124
}
124125

@@ -146,28 +147,66 @@ const RoomsContainer = () => {
146147
>
147148
{' '}
148149
{/* live room display */}
149-
<Typography variant="h6" color={'white'}>
150+
<Typography variant="h5" color={'white'}>
150151
Live Room: {roomCode}
151152
</Typography>
152153
{/* Set up condition rendering depends on if user joined a room then render leave button if not render join button */}
153154
{userJoined ? (
154-
<Button
155-
variant="contained"
156-
onClick={() => leaveRoom()}
157-
sx={{
158-
backgroundColor: '#ffffff',
159-
color: '#000000',
160-
'&:hover': {
161-
backgroundColor: '#C6C6C6',
162-
borderColor: '#0062cc'
163-
}
164-
}}
165-
>
166-
{' '}
167-
Leave Room{' '}
168-
</Button>
155+
<>
156+
<Button
157+
variant="contained"
158+
onClick={() => leaveRoom()}
159+
sx={{
160+
backgroundColor: '#ffffff',
161+
color: '#000000',
162+
'&:hover': {
163+
backgroundColor: '#C6C6C6',
164+
borderColor: '#0062cc'
165+
}
166+
}}
167+
>
168+
{' '}
169+
Leave Room{' '}
170+
</Button>
171+
<Typography
172+
variant="body1"
173+
sx={{
174+
color: 'white', // Text color for the count
175+
borderRadius: 4 // Optional: Add rounded corners
176+
}}
177+
>
178+
Users: {userList.length}
179+
</Typography>
180+
<Box
181+
sx={{
182+
width: '100%',
183+
height: 300,
184+
maxWidth: 200,
185+
bgcolor: '#333333',
186+
border: '3px solid white',
187+
borderRadius: '5%',
188+
display: 'flex',
189+
flexDirection: 'column',
190+
justifyContent: 'center', // Center vertically
191+
alignItems: 'center',
192+
overflow: 'auto',
193+
color: 'white'
194+
}}
195+
>
196+
{/* User count inside the box */}
197+
<List sx={{ justifyContent: 'center', alignItems: 'flex-start' }}>
198+
{userList.map((user, index) => (
199+
<ListItem key={index} sx={{ color: 'white' }}>
200+
<ListItemText primary={user} />
201+
</ListItem>
202+
))}
203+
</List>
204+
</Box>
205+
</>
169206
) : (
207+
//after joinning room
170208
<>
209+
<></>
171210
<TextField
172211
hiddenLabel={true}
173212
id="filled-hidden-label-small"
@@ -186,7 +225,6 @@ const RoomsContainer = () => {
186225
placeholder="Input Room Number"
187226
onChange={(e) => dispatch(setRoomCode(e.target.value))}
188227
/>
189-
190228
<Button
191229
variant="contained"
192230
disabled={checkInputField(userName, roomCode)}

‎server/server.ts‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -96,34 +96,40 @@ const io = new Server(httpServer, {
9696
});
9797
//creating map for user list
9898
const userList = {};
99-
io.on('connection', (socket) => {
100-
console.log('Socket ID: -----', socket.id);
101-
socket.on('custom-event', (redux_store, room) => {
99+
io.on('connection', (client) => {
100+
client.on('custom-event', (redux_store, room) => {
102101
if (room) {
103102
//sending to sender client, only if they are in room
104-
console.log('emiting to room receive message event to front end');
105-
socket.to(room).emit('receive message', redux_store);
103+
client.to(room).emit('receive message', redux_store);
106104
} else {
107105
//send to all connected clients except the one that sent the message
108-
console.log('emiting broadcast receive message event to front end');
109-
socket.broadcast.emit('receive message', redux_store);
106+
client.broadcast.emit('receive message', redux_store);
110107
}
111108
});
112-
socket.on('room-code', (roomCode) => {
109+
110+
client.on('join-room', (roomCode) => {
113111
//working
114-
socket.join(roomCode);
112+
client.join(roomCode);
115113
});
116-
socket.on('userJoined', (userName) => {
114+
115+
client.on('userJoined', (userName, roomCode) => {
117116
//working
118-
userList[socket.id] = userName;
119-
io.emit('updateUserList', userList); //work on this
117+
userList[client.id] = userName;
118+
io.in(roomCode).emit('updateUserList', userList); //send the message to all clients in room
119+
console.log('User list when user Joined', userList);
120120
});
121-
socket.on('disconnect', () => {
122-
const userName = userList[socket.id];
123-
console.log('User list before remove user', userList);
124-
delete userList[socket.id]; //remove the user from the obj
125-
console.log('User list after remove user', userList);
126-
io.emit('updateUserList', userList); //check this
121+
122+
client.on('updateUserDisconnect', (roomCode) => { //leave room function
123+
delete userList[client.id]; //remove the user from the obj
124+
console.log('User list after User Left', userList);
125+
io.in(roomCode).emit('updateUserList', userList); //send the message to all client but the sender.
126+
});
127+
128+
client.on('disconnect', () => { //connection drop function
129+
// const userName = userList[client.id];
130+
delete userList[client.id]; //remove the user from the obj
131+
console.log('User list after User Left', userList);
132+
io.emit('updateUserList', userList); //send the message to all client but the sender.
127133
});
128134
});
129135

0 commit comments

Comments
 (0)