Skip to content

Commit af987f1

Browse files
namos2502namos2502
committed
Migrated-code-to-RoomContainer
1 parent 6db4bee commit af987f1

File tree

167 files changed

+2990
-2431
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

167 files changed

+2990
-2431
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import ComponentsContainer from './ComponentsContainer';
33
import ElementsContainer from './ElementsContainer';
44
import React from 'react';
55
import RoomsContainer from './RoomsContainer';
6-
import TreeContainer from './TreeContainer';
6+
// import TreeContainer from './TreeContainer';
77

88
interface ContentAreaProps {
99
activeTab: number | null;

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

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@ import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice';
1414
import { io } from 'socket.io-client';
1515
import store from '../../redux/store';
1616
import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice';
17+
import debounce from '../../../../node_modules/lodash/debounce.js';
1718

18-
// for websockets
19-
// Part - join room and room code functionality
19+
// // for websockets
20+
// // Part - join room and room code functionality
2021
let socket;
2122
const { API_BASE_URL } = config;
2223
const RoomsContainer = () => {
@@ -29,11 +30,12 @@ const RoomsContainer = () => {
2930
joinedRoom: store.roomCodeSlice.roomCode
3031
}));
3132
React.useEffect(() => {
32-
console.log('joinedRoom: ', joinedRoom);
33+
console.log('You Joined Room: ', joinedRoom);
3334
}, [joinedRoom]);
3435

3536
function initSocketConnection(roomCode) {
3637
if (socket) {
38+
//edge case check if socket connection existed
3739
socket.disconnect();
3840
}
3941

@@ -81,10 +83,39 @@ const RoomsContainer = () => {
8183
initSocketConnection(roomCode);
8284
}
8385

86+
let previousState = store.getState();
87+
// console.log('Store States: ', store.getState);
88+
// sending info to backend whenever the redux store changes
89+
const handleStoreChange = debounce(() => {
90+
const newState = store.getState();
91+
const roomCode = newState.roomCodeSlice.roomCode;
92+
93+
if (roomCode !== '') {
94+
// Emit the current room code
95+
socket.emit('room-code', roomCode);
96+
}
97+
98+
if (newState !== previousState) {
99+
// Send the current state to the server
100+
socket.emit(
101+
'custom-event',
102+
'sent from front-end',
103+
JSON.stringify(newState),
104+
roomCode
105+
);
106+
previousState = newState;
107+
}
108+
}, 100);
109+
110+
store.subscribe(() => {
111+
if (socket) {
112+
handleStoreChange();
113+
}
114+
});
115+
84116
function joinRoom() {
85117
dispatch(changeRoom(roomCode));
86118
setConfirmRoom((confirmRoom) => roomCode);
87-
88119
// Call handleUserEnteredRoom when joining a room
89120
handleUserEnteredRoom(roomCode);
90121
}
@@ -100,6 +131,9 @@ const RoomsContainer = () => {
100131
}}
101132
>
102133
{' '}
134+
<Typography variant="h6" color={'white'}>
135+
Live Room: {joinedRoom}
136+
</Typography>
103137
<TextField
104138
hiddenLabel
105139
id="filled-hidden-label-small"
@@ -133,9 +167,6 @@ const RoomsContainer = () => {
133167
>
134168
Join Room
135169
</Button>
136-
<Typography variant="h6" color={'white'}>
137-
In Room: {joinedRoom}
138-
</Typography>
139170
</Stack>
140171
{/* <button onClick={() => joinRoom()}>Join Room</button> */}
141172
</div>

‎app/src/components/top/NavBarButtons.tsx

Lines changed: 103 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -35,88 +35,88 @@ import withStyles from '@mui/styles/withStyles';
3535
const { API_BASE_URL } = config;
3636

3737
// Part - join room and room code functionality
38-
let socket;
39-
40-
function initSocketConnection(roomCode) {
41-
if (socket) {
42-
socket.disconnect();
43-
}
44-
45-
socket = io(API_BASE_URL, {
46-
transports: ['websocket']
47-
});
48-
49-
socket.on('connect', () => {
50-
console.log(`You connected with id: ${socket.id}`);
51-
socket.emit('join-room', roomCode); // Join the room when connected
52-
});
53-
54-
// Receiving the room state from the backend
55-
socket.on('room-state-update', (stateFromServer) => {
56-
const newState = JSON.parse(stateFromServer);
57-
// Dispatch actions to update your Redux store with the received state
58-
store.dispatch(allCooperativeState(newState.appState));
59-
store.dispatch(codePreviewCooperative(newState.codePreviewCooperative));
60-
store.dispatch(cooperativeStyle(newState.styleSlice));
61-
});
62-
63-
// receiving the message from the back end
64-
socket.on('receive message', (event) => {
65-
// console.log('message from server: ', event);
66-
let currentStore: any = JSON.stringify(store.getState());
67-
if (currentStore !== event) {
68-
currentStore = JSON.parse(currentStore);
69-
event = JSON.parse(event);
70-
if (currentStore.darkMode.isDarkMode !== event.darkMode.isDarkMode) {
71-
store.dispatch(toggleDarkMode());
72-
} else if (currentStore.appState !== event.appState) {
73-
store.dispatch(allCooperativeState(event.appState));
74-
} else if (
75-
currentStore.codePreviewSlice !== event.codePreviewCooperative
76-
) {
77-
store.dispatch(codePreviewCooperative(event.codePreviewCooperative));
78-
} else if (currentStore.styleSlice !== event.styleSlice) {
79-
store.dispatch(cooperativeStyle(event.styleSlice));
80-
}
81-
}
82-
console.log('updated user Store from another user: ', store.getState());
83-
});
84-
}
85-
86-
function handleUserEnteredRoom(roomCode) {
87-
initSocketConnection(roomCode);
88-
}
38+
// let socket;
39+
40+
// function initSocketConnection(roomCode) {
41+
// if (socket) {
42+
// socket.disconnect();
43+
// }
44+
45+
// socket = io(API_BASE_URL, {
46+
// transports: ['websocket']
47+
// });
48+
49+
// socket.on('connect', () => {
50+
// console.log(`You connected with id: ${socket.id}`);
51+
// socket.emit('join-room', roomCode); // Join the room when connected
52+
// });
53+
54+
// // Receiving the room state from the backend
55+
// socket.on('room-state-update', (stateFromServer) => {
56+
// const newState = JSON.parse(stateFromServer);
57+
// // Dispatch actions to update your Redux store with the received state
58+
// store.dispatch(allCooperativeState(newState.appState));
59+
// store.dispatch(codePreviewCooperative(newState.codePreviewCooperative));
60+
// store.dispatch(cooperativeStyle(newState.styleSlice));
61+
// });
62+
63+
// // receiving the message from the back end
64+
// socket.on('receive message', (event) => {
65+
// // console.log('message from server: ', event);
66+
// let currentStore: any = JSON.stringify(store.getState());
67+
// if (currentStore !== event) {
68+
// currentStore = JSON.parse(currentStore);
69+
// event = JSON.parse(event);
70+
// if (currentStore.darkMode.isDarkMode !== event.darkMode.isDarkMode) {
71+
// store.dispatch(toggleDarkMode());
72+
// } else if (currentStore.appState !== event.appState) {
73+
// store.dispatch(allCooperativeState(event.appState));
74+
// } else if (
75+
// currentStore.codePreviewSlice !== event.codePreviewCooperative
76+
// ) {
77+
// store.dispatch(codePreviewCooperative(event.codePreviewCooperative));
78+
// } else if (currentStore.styleSlice !== event.styleSlice) {
79+
// store.dispatch(cooperativeStyle(event.styleSlice));
80+
// }
81+
// }
82+
// console.log('updated user Store from another user: ', store.getState());
83+
// });
84+
// }
85+
86+
// function handleUserEnteredRoom(roomCode) {
87+
// initSocketConnection(roomCode);
88+
// }
8989

9090
// console.log(store.getState());
91-
let previousState = store.getState();
92-
93-
// sending info to backend whenever the redux store changes
94-
const handleStoreChange = debounce(() => {
95-
const newState = store.getState();
96-
const roomCode = newState.roomCodeSlice.roomCode;
97-
98-
if (roomCode !== '') {
99-
// Emit the current room code
100-
socket.emit('room-code', roomCode);
101-
}
102-
103-
if (newState !== previousState) {
104-
// Send the current state to the server
105-
socket.emit(
106-
'custom-event',
107-
'sent from front-end',
108-
JSON.stringify(newState),
109-
roomCode
110-
);
111-
previousState = newState;
112-
}
113-
}, 100);
114-
115-
store.subscribe(() => {
116-
if (socket) {
117-
handleStoreChange();
118-
}
119-
});
91+
// let previousState = store.getState();
92+
93+
// // sending info to backend whenever the redux store changes
94+
// const handleStoreChange = debounce(() => {
95+
// const newState = store.getState();
96+
// const roomCode = newState.roomCodeSlice.roomCode;
97+
98+
// if (roomCode !== '') {
99+
// // Emit the current room code
100+
// socket.emit('room-code', roomCode);
101+
// }
102+
103+
// if (newState !== previousState) {
104+
// // Send the current state to the server
105+
// socket.emit(
106+
// 'custom-event',
107+
// 'sent from front-end',
108+
// JSON.stringify(newState),
109+
// roomCode
110+
// );
111+
// previousState = newState;
112+
// }
113+
// }, 100);
114+
115+
// store.subscribe(() => {
116+
// if (socket) {
117+
// handleStoreChange();
118+
// }
119+
// });
120120

121121
const useStyles = makeStyles((theme) =>
122122
createStyles({
@@ -254,17 +254,17 @@ function navbarDropDown(props) {
254254
props.setDropMenu(false);
255255
};
256256

257-
React.useEffect(() => {
258-
console.log('joinedRoom: ', joinedRoom);
259-
}, [joinedRoom]);
257+
// React.useEffect(() => {
258+
// console.log('joinedRoom: ', joinedRoom);
259+
// }, [joinedRoom]);
260260

261-
function joinRoom() {
262-
dispatch(changeRoom(roomCode));
263-
setConfirmRoom((confirmRoom) => roomCode);
261+
// function joinRoom() {
262+
// dispatch(changeRoom(roomCode));
263+
// setConfirmRoom((confirmRoom) => roomCode);
264264

265-
// Call handleUserEnteredRoom when joining a room
266-
handleUserEnteredRoom(roomCode);
267-
}
265+
// // Call handleUserEnteredRoom when joining a room
266+
// handleUserEnteredRoom(roomCode);
267+
// }
268268
// Part - Dark Mode
269269
const switchDark = isDarkMode ? (
270270
<svg
@@ -298,16 +298,19 @@ function navbarDropDown(props) {
298298

299299
useEffect(() => {
300300
const handleClick = (event) => {
301-
if (event.type === "click" &&
302-
(dropdownRef.current &&
303-
!dropdownRef.current.contains(event.target) && !props.menuButtonRef.current.contains(event.target)) || event.type === "message" && event.data === 'iframeClicked'
301+
if (
302+
(event.type === 'click' &&
303+
dropdownRef.current &&
304+
!dropdownRef.current.contains(event.target) &&
305+
!props.menuButtonRef.current.contains(event.target)) ||
306+
(event.type === 'message' && event.data === 'iframeClicked')
304307
) {
305308
//menuButtonRef is to ensure that handleClose does not get invoked when the user clicks on the menu dropdown button
306309
handleClose();
307310
}
308311
};
309312
window.addEventListener('click', handleClick, true);
310-
window.addEventListener('message', handleClick);//to capture clicks in the iframe
313+
window.addEventListener('message', handleClick); //to capture clicks in the iframe
311314

312315
return () => {
313316
window.removeEventListener('click', handleClick, true);
@@ -360,7 +363,7 @@ function navbarDropDown(props) {
360363
</svg>
361364
</button>
362365
{/* {<ExportButton />} */}
363-
{/*
366+
{/*
364367
<button onClick={handleDarkModeToggle}>
365368
{isDarkMode ? 'Light' : 'Dark'} Mode {switchDark}
366369
</button> */}
@@ -390,8 +393,11 @@ function navbarDropDown(props) {
390393
className="bi bi-bag-check"
391394
viewBox="0 0 16 16"
392395
>
393-
<path fillRule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
394-
<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
396+
<path
397+
fillRule="evenodd"
398+
d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"
399+
/>
400+
<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
395401
</svg>
396402
</button>
397403
</Link>
@@ -411,7 +417,7 @@ function navbarDropDown(props) {
411417
<SaveProjectButton />
412418
</StyledMenuItem>
413419
<StyledMenuItem className={classes.manageProject} onClick={handleClose}>
414-
<ProjectsFolder openAlert={props.openAlert}/>
420+
<ProjectsFolder openAlert={props.openAlert} />
415421
</StyledMenuItem>
416422
<StyledMenuItem className={classes.manageProject} onClick={handleClose}>
417423
<DeleteProjects deleteAlert={props.deleteAlert} />

‎app/src/redux/reducers/slice/roomCodeSlice.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ const roomCodeSlice = createSlice({
1111
initialState,
1212
reducers: {
1313
changeRoom: (state, action) => {
14-
state.roomCode = action.payload
14+
state.roomCode = action.payload;
1515
}
1616
}
1717
});
1818

1919
// Exports the action creator function to be used with useDispatch
2020
export const { changeRoom } = roomCodeSlice.actions;
2121
// Exports so we can combine in rootReducer
22-
export default roomCodeSlice.reducer;
22+
export default roomCodeSlice.reducer;

‎config.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ const config = {
33
DEV_PORT: 5656,
44
API_BASE_URL: isProduction
55
? 'https://app.reactype.dev'
6-
: 'http://localhost:8080',
7-
// : 'http://localhost:5656',
6+
: 'http://localhost:5656',
7+
// : 'http://localhost:8080',
88
API_BASE_URL2: isProduction
99
? 'https://app.reactype.dev'
10-
: 'http://localhost:8080',
10+
: 'http://localhost:8080'
1111
};
1212
module.exports = config;

‎coverage-ts/files/app/src/Dashboard/NavbarDash.tsx.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@
188188
);
189189
}
190190
</textarea><pre id="annotations" style="display:none">[{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:20,&quot;character&quot;:7,&quot;text&quot;:&quot;greenLogo&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:65,&quot;character&quot;:34,&quot;text&quot;:&quot;theme&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:69,&quot;character&quot;:8,&quot;text&quot;:&quot;color&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:69,&quot;character&quot;:15,&quot;text&quot;:&quot;theme&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:69,&quot;character&quot;:21,&quot;text&quot;:&quot;palette&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:69,&quot;character&quot;:29,&quot;text&quot;:&quot;common&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:69,&quot;character&quot;:36,&quot;text&quot;:&quot;white&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:75,&quot;character&quot;:31,&quot;text&quot;:&quot;props&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:84,&quot;character&quot;:9,&quot;text&quot;:&quot;anchorEl&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:85,&quot;character&quot;:22,&quot;text&quot;:&quot;event&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:86,&quot;character&quot;:16,&quot;text&quot;:&quot;event&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:86,&quot;character&quot;:22,&quot;text&quot;:&quot;currentTarget&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:114,&quot;character&quot;:12,&quot;text&quot;:&quot;anchorEl&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:114,&quot;character&quot;:22,&quot;text&quot;:&quot;anchorEl&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:116,&quot;character&quot;:26,&quot;text&quot;:&quot;anchorEl&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:121,&quot;character&quot;:22,&quot;text&quot;:&quot;props&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:121,&quot;character&quot;:28,&quot;text&quot;:&quot;optionClicked&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:147,&quot;character&quot;:21,&quot;text&quot;:&quot;props&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:147,&quot;character&quot;:27,&quot;text&quot;:&quot;isThemeLight&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:152,&quot;character&quot;:14,&quot;text&quot;:&quot;props&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:152,&quot;character&quot;:20,&quot;text&quot;:&quot;isThemeLight&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:152,&quot;character&quot;:35,&quot;text&quot;:&quot;props&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:152,&quot;character&quot;:41,&quot;text&quot;:&quot;setTheme&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:152,&quot;character&quot;:59,&quot;text&quot;:&quot;props&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:152,&quot;character&quot;:65,&quot;text&quot;:&quot;setTheme&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:155,&quot;character&quot;:13,&quot;text&quot;:&quot;props&quot;,&quot;kind&quot;:1},{&quot;file&quot;:&quot;app/src/Dashboard/NavbarDash.tsx&quot;,&quot;line&quot;:155,&quot;character&quot;:19,&quot;text&quot;:&quot;isThemeLight&quot;,&quot;kind&quot;:1}]</pre></div>
191-
<p class="footer-text">TypeScript Coverage Report generated by <a href="https://github.com/plantain-00/type-coverage">type-coverage</a> and <a href="https://github.com/alexcanessa/typescript-coverage-report">typescript-coverage-report</a> at Thu, 07 Sep 2023 18:28:49 GMT</p>
191+
<p class="footer-text">TypeScript Coverage Report generated by <a href="https://github.com/plantain-00/type-coverage">type-coverage</a> and <a href="https://github.com/alexcanessa/typescript-coverage-report">typescript-coverage-report</a> at Sat, 28 Oct 2023 14:16:19 GMT</p>
192192
</body>
193193
</html>
194194

0 commit comments

Comments
 (0)