@@ -30,53 +30,74 @@ let socket;
3030const { API_BASE_URL } = config ;
3131const RoomsContainer = ( ) => {
3232 const dispatch = useDispatch ( ) ;
33- const { state , roomCode, userName, userList, userJoined } = useSelector (
33+ const { roomCode, userName, userList, userJoined } = useSelector (
3434 ( store : RootState ) => ( {
35- state : store . appState ,
3635 roomCode : store . roomSlice . roomCode ,
3736 userName : store . roomSlice . userName ,
3837 userList : store . roomSlice . userList ,
3938 userJoined : store . roomSlice . userJoined
4039 } )
4140 ) ;
42- React . useEffect ( ( ) => {
43- console . log ( 'You Joined Room---front end:' , roomCode ) ;
44- } , [ roomCode ] ) ;
4541
46- function initSocketConnection ( roomCode ) {
42+ function initSocketConnection ( roomCode : string ) {
4743 if ( socket ) socket . disconnect ( ) ; //edge case check if socket connection existed
4844
4945 socket = io ( API_BASE_URL , {
46+ //establishing client and server connection
5047 transports : [ 'websocket' ]
5148 } ) ;
5249
50+ //connecting user to server
5351 socket . on ( 'connect' , ( ) => {
54- console . log ( `You Connected With Id: ${ socket . id } ) ;
55- socket . emit ( 'join-room' , roomCode ) ; // Join the room when connected
56- console . log ( `Your Nickname Is: ${ userName } ) ;
57- //passing current client nickname to server
5852 socket . emit ( 'joining' , userName , roomCode ) ;
59- //listening to back end for updating user list
60- socket . on ( 'updateUserList' , ( newUserList ) => {
61- dispatch ( setUserList ( Object . values ( newUserList ) ) ) ;
62- } ) ;
53+ console . log ( `${ userName } ${ roomCode } ) ;
54+ } ) ;
55+
56+ //send state from host to room when new user joins
57+ socket . on ( 'requesting state from host' , ( callback ) => {
58+ //getting state request from user from back end
59+ const newState = store . getState ( ) ;
60+ callback ( newState ) ; //pull new state from host and send it to back end
61+ } ) ;
62+
63+ socket . on ( 'server emitting state from host' , ( state , callback ) => {
64+ //getting state from host once joined a room
65+ //dispatching new state to change user current state
66+ store . dispatch ( allCooperativeState ( state . appState ) ) ;
67+ store . dispatch ( codePreviewCooperative ( state . codePreviewCooperative ) ) ;
68+ store . dispatch ( cooperativeStyle ( state . styleSlice ) ) ;
69+ callback ( { status : 'confirmed' } ) ;
70+ } ) ;
71+
72+ //listening to back end for updating user list
73+ socket . on ( 'updateUserList' , ( newUserList : object ) => {
74+ dispatch ( setUserList ( Object . values ( newUserList ) ) ) ;
6375 } ) ;
6476
6577 // receiving the message from the back end
66- socket . on ( 'receive message' , ( event ) => {
67- let currentStore : any = JSON . stringify ( store . getState ( ) ) ;
68- // console.log('event ', event);
69- if ( currentStore !== event ) {
70- currentStore = JSON . parse ( currentStore ) ;
71- event = JSON . parse ( event ) ;
72- if ( currentStore . appState !== event . appState ) {
73- store . dispatch ( allCooperativeState ( event . appState ) ) ;
78+ socket . on ( 'new state from back' , ( event ) => {
79+ const currentStore = JSON . parse ( JSON . stringify ( store . getState ( ) ) ) ;
80+ const parsedEvent = JSON . parse ( event ) ;
81+
82+ const areStatesEqual = ( stateA , stateB ) =>
83+ JSON . stringify ( stateA ) === JSON . stringify ( stateB ) ;
84+
85+ if ( ! areStatesEqual ( currentStore , parsedEvent ) ) {
86+ if ( ! areStatesEqual ( currentStore . appState , parsedEvent . appState ) ) {
87+ store . dispatch ( allCooperativeState ( parsedEvent . appState ) ) ;
7488 } else if (
75- currentStore . codePreviewSlice !== event . codePreviewCooperative
89+ ! areStatesEqual (
90+ currentStore . codePreviewSlice ,
91+ parsedEvent . codePreviewCooperative
92+ )
7693 ) {
77- store . dispatch ( codePreviewCooperative ( event . codePreviewCooperative ) ) ;
78- } else if ( currentStore . styleSlice !== event . styleSlice ) {
79- store . dispatch ( cooperativeStyle ( event . styleSlice ) ) ;
94+ store . dispatch (
95+ codePreviewCooperative ( parsedEvent . codePreviewCooperative )
96+ ) ;
97+ } else if (
98+ ! areStatesEqual ( currentStore . styleSlice , parsedEvent . styleSlice )
99+ ) {
100+ store . dispatch ( cooperativeStyle ( parsedEvent . styleSlice ) ) ;
80101 }
81102 }
82103 } ) ;
@@ -88,42 +109,46 @@ const RoomsContainer = () => {
88109
89110 let previousState = store . getState ( ) ;
90111 // sending info to backend whenever the redux store changes
112+ //handling state changes and send to server
91113 const handleStoreChange = debounce ( ( ) => {
92114 const newState = store . getState ( ) ;
93115 const roomCode = newState . roomSlice . roomCode ;
94116
95- if ( newState !== previousState ) {
117+ if ( JSON . stringify ( newState ) !== JSON . stringify ( previousState ) ) {
96118 // Send the current state to the server
97- socket . emit ( 'custom-event ' , JSON . stringify ( newState ) , roomCode ) ;
119+ socket . emit ( 'new state from front ' , JSON . stringify ( newState ) , roomCode ) ;
98120 previousState = newState ;
99121 }
100122 } , 100 ) ;
101123
124+ //listening to changes from store from user, invoke handle store change.
102125 store . subscribe ( ( ) => {
103126 if ( socket ) {
104127 handleStoreChange ( ) ;
105128 }
106129 } ) ;
107130
131+ //joining room function
108132 function joinRoom ( ) {
109- if ( userList . length !== 0 ) setUserList ( [ ] ) ; //edge case check if userList not empty.
133+ if ( userList . length !== 0 ) dispatch ( setUserList ( [ ] ) ) ; //edge case check if userList not empty.
110134 handleUserEnteredRoom ( roomCode ) ; // Call handleUserEnteredRoom when joining a room
111135 dispatch ( setRoomCode ( roomCode ) ) ;
112136 dispatch ( setUserJoined ( true ) ) ; //setting joined room to true for rendering leave room button
113137 }
114138
115139 function leaveRoom ( ) {
116140 if ( socket ) {
117- socket . disconnect ( ) ;
118- } //disconnecting socket functionality
141+ socket . disconnect ( ) ; //disconnecting socket from server
142+ }
143+ //reset all state values
119144 dispatch ( setRoomCode ( '' ) ) ;
120145 dispatch ( setUserName ( '' ) ) ;
121146 dispatch ( setUserList ( [ ] ) ) ;
122147 dispatch ( setUserJoined ( false ) ) ; //setting joined to false so join button appear
123148 }
124149
125- //checking if both text field have any input (not including spaces)
126- function checkInputField ( ...inputs : any ) {
150+ //checking empty input field (not including spaces)
151+ function checkInputField ( ...inputs ) {
127152 let userName : string = inputs [ 0 ] . trim ( ) ;
128153 let roomCode : string = inputs [ 1 ] . trim ( ) ;
129154 return userName . length === 0 || roomCode . length === 0 ;
@@ -166,8 +191,7 @@ const RoomsContainer = () => {
166191 < Typography
167192 variant = "body1"
168193 sx = { {
169- color : 'white' , // Text color for the count
170- borderRadius : 4 // Optional: Add rounded corners
194+ color : 'white' // Text color for the count
171195 } }
172196 >
173197 Users: { userList . length }
@@ -201,14 +225,13 @@ const RoomsContainer = () => {
201225 ) : (
202226 //after joinning room
203227 < >
204- < > </ >
205228 < TextField
206229 hiddenLabel = { true }
207230 id = "filled-hidden-label-small"
208231 variant = "filled"
209232 size = "small"
210233 value = { userName }
211- placeholder = "Input nickname "
234+ placeholder = "Input Nickname "
212235 onChange = { ( e ) => dispatch ( setUserName ( e . target . value ) ) }
213236 />
214237 < TextField
0 commit comments