@@ -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
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- } ) ;
52+ socket . emit ( 'joining' , userName , roomCode ) ;
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 ) ) ;
88+ } else if (
89+ ! areStatesEqual (
90+ currentStore . codePreviewSlice ,
91+ parsedEvent . codePreviewCooperative
92+ )
93+ ) {
94+ store . dispatch (
95+ codePreviewCooperative ( parsedEvent . codePreviewCooperative )
96+ ) ;
7497 } else if (
75- currentStore . codePreviewSlice !== event . codePreviewCooperative
98+ ! areStatesEqual ( currentStore . styleSlice , parsedEvent . styleSlice )
7699 ) {
77- store . dispatch ( codePreviewCooperative ( event . codePreviewCooperative ) ) ;
78- } else if ( currentStore . styleSlice !== event . styleSlice ) {
79- store . dispatch ( cooperativeStyle ( event . styleSlice ) ) ;
100+ store . dispatch ( cooperativeStyle ( parsedEvent . styleSlice ) ) ;
80101 }
81102 }
82103 } ) ;
@@ -88,50 +109,49 @@ 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 . emit ( 'updateUserDisconnect' , roomCode ) ;
118- socket . disconnect ( ) ;
119- } //disconnecting socket functionality
141+ socket . disconnect ( ) ; //disconnecting socket from server
142+ }
143+ //reset all state values
120144 dispatch ( setRoomCode ( '' ) ) ;
121145 dispatch ( setUserName ( '' ) ) ;
122146 dispatch ( setUserList ( [ ] ) ) ;
123147 dispatch ( setUserJoined ( false ) ) ; //setting joined to false so join button appear
124148 }
125149
126- //checking if both text field have any input (not including spaces)
127- function checkInputField ( ...inputs : any ) {
128- let userName : String = inputs [ 0 ] . trim ( ) ;
129- let roomCode : String = inputs [ 1 ] . trim ( ) ;
130- if ( userName . length !== 0 && roomCode . length !== 0 ) {
131- return false ;
132- } else {
133- return true ;
134- }
150+ //checking empty input field (not including spaces)
151+ function checkInputField ( ...inputs ) {
152+ let userName : string = inputs [ 0 ] . trim ( ) ;
153+ let roomCode : string = inputs [ 1 ] . trim ( ) ;
154+ return userName . length === 0 || roomCode . length === 0 ;
135155 }
136156
137157 return (
@@ -171,8 +191,7 @@ const RoomsContainer = () => {
171191 < Typography
172192 variant = "body1"
173193 sx = { {
174- color : 'white' , // Text color for the count
175- borderRadius : 4 // Optional: Add rounded corners
194+ color : 'white' // Text color for the count
176195 } }
177196 >
178197 Users: { userList . length }
@@ -206,14 +225,13 @@ const RoomsContainer = () => {
206225 ) : (
207226 //after joinning room
208227 < >
209- < > </ >
210228 < TextField
211229 hiddenLabel = { true }
212230 id = "filled-hidden-label-small"
213231 variant = "filled"
214232 size = "small"
215233 value = { userName }
216- placeholder = "Input nickname "
234+ placeholder = "Input Nickname "
217235 onChange = { ( e ) => dispatch ( setUserName ( e . target . value ) ) }
218236 />
219237 < TextField
0 commit comments