Skip to content

Commit 583b700

Browse files
committed
add roomscontainer
1 parent 5e9e9e8 commit 583b700

File tree

1 file changed

+105
-1
lines changed

1 file changed

+105
-1
lines changed
Lines changed: 105 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,111 @@
1+
import { useDispatch, useSelector } from 'react-redux';
2+
13
import React from 'react';
4+
import { RootState } from '../../redux/store';
5+
import { allCooperativeState } from '../../redux/reducers/slice/appStateSlice';
6+
import { changeRoom } from '../../redux/reducers/slice/roomCodeSlice';
7+
import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSlice';
8+
import config from '../../../../config';
9+
import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice';
10+
// websocket front end starts here
11+
import { io } from 'socket.io-client';
12+
import store from '../../redux/store';
13+
import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice';
214

15+
// for websockets
16+
// Part - join room and room code functionality
17+
let socket;
18+
const { API_BASE_URL } = config;
319
const RoomsContainer = () => {
4-
return <div>RoomsContainer</div>;
20+
const [roomCode, setRoomCode] = React.useState('');
21+
const [confirmRoom, setConfirmRoom] = React.useState('');
22+
const dispatch = useDispatch();
23+
const { isDarkMode, state, joinedRoom } = useSelector((store: RootState) => ({
24+
isDarkMode: store.darkMode.isDarkMode,
25+
state: store.appState,
26+
joinedRoom: store.roomCodeSlice.roomCode
27+
}));
28+
React.useEffect(() => {
29+
console.log('joinedRoom: ', joinedRoom);
30+
}, [joinedRoom]);
31+
32+
function initSocketConnection(roomCode) {
33+
if (socket) {
34+
socket.disconnect();
35+
}
36+
37+
socket = io(API_BASE_URL, {
38+
transports: ['websocket']
39+
});
40+
41+
socket.on('connect', () => {
42+
console.log(`You connected with id: ${socket.id}`);
43+
socket.emit('join-room', roomCode); // Join the room when connected
44+
});
45+
46+
// Receiving the room state from the backend
47+
socket.on('room-state-update', (stateFromServer) => {
48+
const newState = JSON.parse(stateFromServer);
49+
// Dispatch actions to update your Redux store with the received state
50+
store.dispatch(allCooperativeState(newState.appState));
51+
store.dispatch(codePreviewCooperative(newState.codePreviewCooperative));
52+
store.dispatch(cooperativeStyle(newState.styleSlice));
53+
});
54+
55+
// receiving the message from the back end
56+
socket.on('receive message', (event) => {
57+
// console.log('message from server: ', event);
58+
let currentStore: any = JSON.stringify(store.getState());
59+
if (currentStore !== event) {
60+
currentStore = JSON.parse(currentStore);
61+
event = JSON.parse(event);
62+
console.log('stores do not match');
63+
if (currentStore.darkMode.isDarkMode !== event.darkMode.isDarkMode) {
64+
store.dispatch(toggleDarkMode());
65+
} else if (currentStore.appState !== event.appState) {
66+
store.dispatch(allCooperativeState(event.appState));
67+
} else if (
68+
currentStore.codePreviewSlice !== event.codePreviewCooperative
69+
) {
70+
store.dispatch(codePreviewCooperative(event.codePreviewCooperative));
71+
} else if (currentStore.styleSlice !== event.styleSlice) {
72+
store.dispatch(cooperativeStyle(event.styleSlice));
73+
}
74+
}
75+
console.log('updated user Store from another user: ', store.getState());
76+
});
77+
}
78+
79+
function handleUserEnteredRoom(roomCode) {
80+
initSocketConnection(roomCode);
81+
}
82+
83+
function joinRoom() {
84+
console.log(roomCode);
85+
dispatch(changeRoom(roomCode));
86+
setConfirmRoom((confirmRoom) => roomCode);
87+
88+
// Call handleUserEnteredRoom when joining a room
89+
handleUserEnteredRoom(roomCode);
90+
}
91+
return (
92+
<div>
93+
{' '}
94+
<input
95+
type="text"
96+
style={{
97+
margin: '3px 5%',
98+
borderRadius: '5px',
99+
padding: '3px',
100+
width: '90%'
101+
}}
102+
placeholder="Room Code"
103+
onChange={(e) => setRoomCode(e.target.value)}
104+
></input>
105+
<button onClick={() => joinRoom()}>Join Room</button>
106+
<p>In Room: {joinedRoom}</p>
107+
</div>
108+
);
5109
};
6110

7111
export default RoomsContainer;

0 commit comments

Comments
 (0)