@@ -31,53 +31,74 @@ let socket;
3131const { API_BASE_URL } = config ;
3232const RoomsContainer = ( ) => {
3333 const dispatch = useDispatch ( ) ;
34- const { state , roomCode, userName, userList, userJoined } = useSelector (
34+ const { roomCode, userName, userList, userJoined } = useSelector (
3535 ( store : RootState ) => ( {
36- state : store . appState ,
3736 roomCode : store . roomSlice . roomCode ,
3837 userName : store . roomSlice . userName ,
3938 userList : store . roomSlice . userList ,
4039 userJoined : store . roomSlice . userJoined
4140 } )
4241 ) ;
43- React . useEffect ( ( ) => {
44- console . log ( 'You Joined Room---front end:' , roomCode ) ;
45- } , [ roomCode ] ) ;
4642
47- function initSocketConnection ( roomCode ) {
43+ function initSocketConnection ( roomCode : string ) {
4844 if ( socket ) socket . disconnect ( ) ; //edge case check if socket connection existed
4945
5046 socket = io ( API_BASE_URL , {
47+ //establishing client and server connection
5148 transports : [ 'websocket' ]
5249 } ) ;
5350
51+ //connecting user to server
5452 socket . on ( 'connect' , ( ) => {
55- console . log ( `You Connected With Id: ${ socket . id } ) ;
56- socket . emit ( 'join-room' , roomCode ) ; // Join the room when connected
57- console . log ( `Your Nickname Is: ${ userName } ) ;
58- //passing current client nickname to server
59- socket . emit ( 'userJoined' , userName , roomCode ) ;
60- //listening to back end for updating user list
61- socket . on ( 'updateUserList' , ( newUserList ) => {
62- dispatch ( setUserList ( Object . values ( newUserList ) ) ) ;
63- } ) ;
53+ socket . emit ( 'joining' , userName , roomCode ) ;
54+ console . log ( `${ userName } ${ roomCode } ) ;
55+ } ) ;
56+
57+ //send state from host to room when new user joins
58+ socket . on ( 'requesting state from host' , ( callback ) => {
59+ //getting state request from user from back end
60+ const newState = store . getState ( ) ;
61+ callback ( newState ) ; //pull new state from host and send it to back end
62+ } ) ;
63+
64+ socket . on ( 'server emitting state from host' , ( state , callback ) => {
65+ //getting state from host once joined a room
66+ //dispatching new state to change user current state
67+ store . dispatch ( allCooperativeState ( state . appState ) ) ;
68+ store . dispatch ( codePreviewCooperative ( state . codePreviewCooperative ) ) ;
69+ store . dispatch ( cooperativeStyle ( state . styleSlice ) ) ;
70+ callback ( { status : 'confirmed' } ) ;
71+ } ) ;
72+
73+ //listening to back end for updating user list
74+ socket . on ( 'updateUserList' , ( newUserList : object ) => {
75+ dispatch ( setUserList ( Object . values ( newUserList ) ) ) ;
6476 } ) ;
6577
6678 // receiving the message from the back end
67- socket . on ( 'receive message' , ( event ) => {
68- let currentStore : any = JSON . stringify ( store . getState ( ) ) ;
69- // console.log('event ', event);
70- if ( currentStore !== event ) {
71- currentStore = JSON . parse ( currentStore ) ;
72- event = JSON . parse ( event ) ;
73- if ( currentStore . appState !== event . appState ) {
74- store . dispatch ( allCooperativeState ( event . appState ) ) ;
79+ socket . on ( 'new state from back' , ( event ) => {
80+ const currentStore = JSON . parse ( JSON . stringify ( store . getState ( ) ) ) ;
81+ const parsedEvent = JSON . parse ( event ) ;
82+
83+ const areStatesEqual = ( stateA , stateB ) =>
84+ JSON . stringify ( stateA ) === JSON . stringify ( stateB ) ;
85+
86+ if ( ! areStatesEqual ( currentStore , parsedEvent ) ) {
87+ if ( ! areStatesEqual ( currentStore . appState , parsedEvent . appState ) ) {
88+ store . dispatch ( allCooperativeState ( parsedEvent . appState ) ) ;
89+ } else if (
90+ ! areStatesEqual (
91+ currentStore . codePreviewSlice ,
92+ parsedEvent . codePreviewCooperative
93+ )
94+ ) {
95+ store . dispatch (
96+ codePreviewCooperative ( parsedEvent . codePreviewCooperative )
97+ ) ;
7598 } else if (
76- currentStore . codePreviewSlice !== event . codePreviewCooperative
99+ ! areStatesEqual ( currentStore . styleSlice , parsedEvent . styleSlice )
77100 ) {
78- store . dispatch ( codePreviewCooperative ( event . codePreviewCooperative ) ) ;
79- } else if ( currentStore . styleSlice !== event . styleSlice ) {
80- store . dispatch ( cooperativeStyle ( event . styleSlice ) ) ;
101+ store . dispatch ( cooperativeStyle ( parsedEvent . styleSlice ) ) ;
81102 }
82103 }
83104 } ) ;
@@ -89,24 +110,26 @@ const RoomsContainer = () => {
89110
90111 let previousState = store . getState ( ) ;
91112 // sending info to backend whenever the redux store changes
113+ //handling state changes and send to server
92114 const handleStoreChange = debounce ( ( ) => {
93115 const newState = store . getState ( ) ;
94116 const roomCode = newState . roomSlice . roomCode ;
95117
96118 if ( JSON . stringify ( newState ) !== JSON . stringify ( previousState ) ) {
97119 // Send the current state to the server
98- console . log ( 'emit state unequal' ) ;
99- socket . emit ( 'custom-event' , JSON . stringify ( newState ) , roomCode ) ;
120+ socket . emit ( 'new state from front' , JSON . stringify ( newState ) , roomCode ) ;
100121 previousState = newState ;
101122 }
102123 } , 100 ) ;
103124
125+ //listening to changes from store from user, invoke handle store change.
104126 store . subscribe ( ( ) => {
105127 if ( socket ) {
106128 handleStoreChange ( ) ;
107129 }
108130 } ) ;
109131
132+ //joining room function
110133 function joinRoom ( ) {
111134 if ( userList . length !== 0 ) dispatch ( setUserList ( [ ] ) ) ; //edge case check if userList not empty.
112135 handleUserEnteredRoom ( roomCode ) ; // Call handleUserEnteredRoom when joining a room
@@ -116,24 +139,20 @@ const RoomsContainer = () => {
116139
117140 function leaveRoom ( ) {
118141 if ( socket ) {
119- socket . emit ( 'updateUserDisconnect' , roomCode ) ;
120- socket . disconnect ( ) ;
121- } //disconnecting socket functionality
142+ socket . disconnect ( ) ; //disconnecting socket from server
143+ }
144+ //reset all state values
122145 dispatch ( setRoomCode ( '' ) ) ;
123146 dispatch ( setUserName ( '' ) ) ;
124147 dispatch ( setUserList ( [ ] ) ) ;
125148 dispatch ( setUserJoined ( false ) ) ; //setting joined to false so join button appear
126149 }
127150
128- //checking if both text field have any input (not including spaces)
129- function checkInputField ( ...inputs : any ) {
130- let userName : String = inputs [ 0 ] . trim ( ) ;
131- let roomCode : String = inputs [ 1 ] . trim ( ) ;
132- if ( userName . length !== 0 && roomCode . length !== 0 ) {
133- return false ;
134- } else {
135- return true ;
136- }
151+ //checking empty input field (not including spaces)
152+ function checkInputField ( ...inputs ) {
153+ let userName : string = inputs [ 0 ] . trim ( ) ;
154+ let roomCode : string = inputs [ 1 ] . trim ( ) ;
155+ return userName . length === 0 || roomCode . length === 0 ;
137156 }
138157
139158 return (
@@ -173,8 +192,7 @@ const RoomsContainer = () => {
173192 < Typography
174193 variant = "body1"
175194 sx = { {
176- color : 'white' , // Text color for the count
177- borderRadius : 4 // Optional: Add rounded corners
195+ color : 'white' // Text color for the count
178196 } }
179197 >
180198 Users: { userList . length }
@@ -208,14 +226,13 @@ const RoomsContainer = () => {
208226 ) : (
209227 //after joinning room
210228 < >
211- < > </ >
212229 < TextField
213230 hiddenLabel = { true }
214231 id = "filled-hidden-label-small"
215232 variant = "filled"
216233 size = "small"
217234 value = { userName }
218- placeholder = "Input nickname "
235+ placeholder = "Input Nickname "
219236 onChange = { ( e ) => dispatch ( setUserName ( e . target . value ) ) }
220237 />
221238 < TextField
0 commit comments