Skip to content

Commit 7071307

Browse files
jujuprojujupro
committed
collab room / emit actions in canvas initial setup
2 parents 7841f27 + b73dac8 commit 7071307

File tree

16 files changed

+306
-209
lines changed

16 files changed

+306
-209
lines changed

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

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,11 @@ const DragDropPanel = (props): JSX.Element => {
3434
return (
3535
<div className={'HTMLItems'}>
3636
<div id="HTMLItemsTopHalf">
37-
<h3 style={{ color: '#ffffff' }}> &lt; HTML Elements &gt; </h3>
38-
37+
<h3 style={{ color: '#ffffff' }}> HTML Elements </h3>
3938
<Grid
4039
container
41-
spacing={{ xs: 0.5, md: 0.5 }}
42-
columns={{ xs: 4, sm: 4, md: 4 }}
40+
// spacing={{ xs: 0.5, md: 0.5 }}
41+
// columns={{ xs: 4, sm: 4, md: 4 }}
4342
justifyContent="center"
4443
>
4544
{htmlTypesToRender.map((option) => {
@@ -49,27 +48,25 @@ const DragDropPanel = (props): JSX.Element => {
4948
)
5049
) {
5150
return (
52-
<Grid item xs={2} sm={2} md={2} key={option.name}>
53-
<HTMLItem
54-
name={option.name}
55-
key={`html-${option.name}`}
56-
id={option.id}
57-
Icon={option.icon}
58-
handleDelete={handleDelete}
59-
/>
60-
</Grid>
51+
<HTMLItem
52+
name={option.name}
53+
key={`html-${option.name}`}
54+
id={option.id}
55+
Icon={option.icon}
56+
handleDelete={handleDelete}
57+
/>
6158
);
6259
}
6360
})}
6461
</Grid>
6562

6663
{state.projectType === 'Classic React' ? (
67-
<h3 style={{ color: '#C6C6C6' }}>React Router</h3>
64+
<h3 style={{ color: '#ffffff' }}>React Router</h3>
6865
) : null}
6966
<Grid
7067
container
71-
spacing={{ xs: 0.5, md: 0.5 }}
72-
columns={{ xs: 4, sm: 4, md: 4 }}
68+
// spacing={{ xs: 0.5, md: 0.5 }}
69+
// columns={{ xs: 4, sm: 4, md: 4 }}
7370
justifyContent="center"
7471
>
7572
{htmlTypesToRender.map((option) => {
@@ -80,15 +77,13 @@ const DragDropPanel = (props): JSX.Element => {
8077
state.projectType === 'Classic React'
8178
) {
8279
return (
83-
<Grid item xs={2} sm={2} md={2} key={option.name}>
84-
<HTMLItem
85-
name={option.name}
86-
key={`html-${option.name}`}
87-
id={option.id}
88-
Icon={option.icon}
89-
handleDelete={handleDelete}
90-
/>
91-
</Grid>
80+
<HTMLItem
81+
name={option.name}
82+
key={`html-${option.name}`}
83+
id={option.id}
84+
Icon={option.icon}
85+
handleDelete={handleDelete}
86+
/>
9287
);
9388
}
9489
})}

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

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React, { ComponentType, ReactElement, useState } from 'react';
22

33
import Grid from '@mui/material/Grid';
44
import { ItemTypes } from '../../constants/ItemTypes';
@@ -10,23 +10,22 @@ import createModal from '../right/createModal';
1010
import makeStyles from '@mui/styles/makeStyles';
1111
import { useDrag } from 'react-dnd';
1212
// import { useSelector } from 'react-redux';
13+
import { IconProps } from '@mui/material';
14+
import CodeIcon from '@mui/icons-material/Code';
1315

1416
const useStyles = makeStyles({
1517
HTMLPanelItem: {
16-
color: '#8F8F8F',
17-
height: '35px',
18-
width: '90px',
19-
fontSize: '80%',
18+
height: 'auto',
19+
width: 'auto',
20+
fontSize: 'medium',
2021
display: 'flex',
21-
flexDirection: 'column',
22-
justifyContent: 'center',
22+
flexDirection: 'row',
23+
justifyContent: 'space-evenly',
2324
textAlign: 'center',
24-
margin: '7px auto',
25-
marginLeft: '30px',
26-
cursor: 'grab',
27-
'& > h3': {
28-
display: 'inline-block'
29-
}
25+
cursor: 'grab'
26+
// '& > h3': {
27+
// display: 'inline-block'
28+
// }
3029
},
3130
lightThemeFontColor: {
3231
color: '#8F8F8F'
@@ -42,6 +41,7 @@ const HTMLItem: React.FC<{
4241
Icon: any;
4342
handleDelete: (id: number) => void;
4443
}> = ({ name, id, Icon, handleDelete }) => {
44+
// console.log('Icon: ', Icon);
4545
const classes = useStyles();
4646
const [modal, setModal] = useState(null);
4747

@@ -52,6 +52,7 @@ const HTMLItem: React.FC<{
5252
newInstance: true,
5353
instanceType: 'HTML Element',
5454
name,
55+
Icon,
5556
instanceTypeId: id
5657
},
5758
collect: (monitor: any) => ({
@@ -120,18 +121,16 @@ const HTMLItem: React.FC<{
120121
// updated the id's to reflect the new element types input and label
121122
return (
122123
// HTML Elements
123-
<Grid item xs={5} key={`html-g${name}`}>
124-
{/* predefined elements */}
124+
<Grid item xs={5} key={`html-g${name}`} id="HTMLgrid">
125125
{id <= 20 && (
126126
<div
127127
ref={drag}
128128
style={{ borderColor: '#C6C6C6' }}
129129
className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
130130
id="HTMLItem"
131131
>
132-
{/* render element's name on canvas */}
133-
{Icon}
134-
<h3>{name}</h3>
132+
{/* <Icon fontSize="small" align-items="center" /> */}
133+
{name}
135134
</div>
136135
)}
137136

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

Lines changed: 78 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@ import List from '@mui/material/List';
55
import ListItem from '@mui/material/ListItem';
66
import ListItemText from '@mui/material/ListItemText';
77
import Button from '@mui/material/Button';
8-
import React, { useState } from 'react';
8+
import React, { useEffect } from 'react';
99
import { RootState } from '../../redux/store';
1010
import TextField from '@mui/material/TextField';
11-
import { allCooperativeState } from '../../redux/reducers/slice/appStateSlice';
11+
import {
12+
allCooperativeState,
13+
addChild
14+
} from '../../redux/reducers/slice/appStateSlice';
1215
import {
1316
setRoomCode,
1417
setUserName,
@@ -28,6 +31,7 @@ import debounce from '../../../../node_modules/lodash/debounce.js';
2831
// // Part - join room and room code functionality
2932
let socket;
3033
const { API_BASE_URL } = config;
34+
3135
const RoomsContainer = () => {
3236
const dispatch = useDispatch();
3337
//roomCode/userName for emiting to socket io, userList for displaying user List receiving from back end, userJoined fo conditional rendering between join and leave room.
@@ -60,87 +64,98 @@ const RoomsContainer = () => {
6064
//If you are the new user: receive the state from the host
6165
socket.on('server emitting state from host', (state, callback) => {
6266
//dispatching new state to change user current state
63-
console.log('state recieved by new joiner:', state);
67+
console.log('state recieved by new join:', state);
6468
store.dispatch(allCooperativeState(state.appState));
6569
store.dispatch(codePreviewCooperative(state.codePreviewCooperative));
6670
store.dispatch(cooperativeStyle(state.styleSlice));
67-
callback({ status: 'confirmed' });
71+
callback({ status: 'confirmed' });
6872
});
6973

7074
// update user list when there's a change: new join or leave the room
7175
socket.on('updateUserList', (newUserList: object) => {
7276
dispatch(setUserList(Object.values(newUserList)));
7377
});
7478

75-
// receive the new state from the server and dispatch action creators to update state
76-
socket.on('new state from back', (event) => {
77-
const currentStore = JSON.parse(JSON.stringify(store.getState()));
78-
const newState = JSON.parse(event);
79+
// // receive the new state from the server and dispatch action creators to update state
80+
// socket.on('new state from back', (event) => {
81+
// const currentStore = JSON.parse(JSON.stringify(store.getState()));
82+
// const newState = JSON.parse(event);
7983

80-
const areStatesEqual = (stateA, stateB) =>
81-
JSON.stringify(stateA) === JSON.stringify(stateB);
84+
// const areStatesEqual = (stateA, stateB) =>
85+
// JSON.stringify(stateA) === JSON.stringify(stateB);
8286

83-
//checking if current state are equal to the state being sent from server
84-
if (!areStatesEqual(currentStore, newState)) {
85-
if (!areStatesEqual(currentStore.appState, newState.appState)) {
86-
store.dispatch(allCooperativeState(newState.appState));
87-
} else if (
88-
!areStatesEqual(
89-
currentStore.codePreviewSlice,
90-
newState.codePreviewCooperative
91-
)
92-
) {
93-
store.dispatch(
94-
codePreviewCooperative(newState.codePreviewCooperative)
95-
);
96-
} else if (
97-
!areStatesEqual(currentStore.styleSlice, newState.styleSlice)
98-
) {
99-
store.dispatch(cooperativeStyle(newState.styleSlice));
100-
}
101-
}
102-
});
87+
// //checking if current state are equal to the state being sent from server
88+
// if (!areStatesEqual(currentStore, newState)) {
89+
// if (!areStatesEqual(currentStore.appState, newState.appState)) {
90+
// store.dispatch(allCooperativeState(newState.appState));
91+
// } else if (
92+
// !areStatesEqual(
93+
// currentStore.codePreviewSlice,
94+
// newState.codePreviewCooperative
95+
// )
96+
// ) {
97+
// store.dispatch(
98+
// codePreviewCooperative(newState.codePreviewCooperative)
99+
// );
100+
// } else if (
101+
// !areStatesEqual(currentStore.styleSlice, newState.styleSlice)
102+
// ) {
103+
// store.dispatch(cooperativeStyle(newState.styleSlice));
104+
// }
105+
// }
106+
// });
103107
}
104108

109+
// let previousState = store.getState();
110+
// // sending info to backend whenever the redux store changes
111+
// //handling state changes and send to server
112+
113+
// const findStateDiff = (prevState, newState) => {
114+
// const changes = {};
115+
// for (let key in newState) {
116+
// if (JSON.stringify(newState[key]) !== JSON.stringify(prevState[key])) {
117+
// changes[key] = newState[key];
118+
// }
119+
// }
120+
// return changes;
121+
// };
122+
123+
// const handleStoreChange = debounce(() => {
124+
// const newState = store.getState();
125+
// const roomCode = newState.roomSlice.roomCode;
126+
// const changes = findStateDiff(previousState, newState);
127+
128+
// if (Object.keys(changes).length > 0) {
129+
// // Send the current state to the server
130+
// console.log('newState:', newState);
131+
// console.log('changes:', changes);
132+
// socket.emit('new state from front', JSON.stringify(changes), roomCode);
133+
// //re-assgin previousState to be the newState
134+
// previousState = newState;
135+
// }
136+
// }, 100);
137+
138+
// //listening to changes from store by users, whenever the store's state changes, invoke handleStoreChange function
139+
// store.subscribe(() => {
140+
// if (socket) {
141+
// handleStoreChange();
142+
// }
143+
// });
144+
105145
function handleUserEnteredRoom(roomCode) {
106146
initSocketConnection(roomCode);
107147
}
108148

109-
let previousState = store.getState();
110-
// sending info to backend whenever the redux store changes
111-
//handling state changes and send to server
149+
//-----------------------
112150

113-
const findStateDiff = (prevState, newState) => {
114-
const changes = {};
115-
for (let key in newState) {
116-
if (JSON.stringify(newState[key]) !== JSON.stringify(prevState[key])) {
117-
changes[key] = newState[key];
118-
}
119-
}
120-
return changes;
121-
};
122-
123-
const handleStoreChange = debounce(() => {
124-
const newState = store.getState();
125-
const roomCode = newState.roomSlice.roomCode;
126-
const changes = findStateDiff(previousState, newState);
127-
128-
if (Object.keys(changes).length > 0) {
129-
// Send the current state to the server
130-
console.log('newState:', newState);
131-
console.log('changes:', changes);
132-
socket.emit('new state from front', JSON.stringify(changes), roomCode);
133-
//re-assgin previousState to be the newState
134-
previousState = newState;
135-
}
136-
}, 100);
151+
if (socket) {
152+
socket.on('child data from back', (childData: string) => {
153+
console.log('child data received by users', JSON.parse(childData));
154+
store.dispatch(addChild(JSON.parse(childData)));
155+
});
156+
}
137157

138-
//listening to changes from store by users, whenever the store's state changes, invoke handleStoreChange function
139-
store.subscribe(() => {
140-
if (socket) {
141-
handleStoreChange();
142-
}
143-
});
158+
//-----------------------
144159

145160
//joining room function
146161
function joinRoom() {

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,30 +53,33 @@ const Sidebar: React.FC<SidebarProps> = ({
5353
gap: '50px',
5454
width: 67,
5555
background: '#151515',
56-
height: '100vh'
56+
height: '100vh',
5757
}}
5858
>
5959
<Tab sx={{position: 'absolute', visibility: "hidden"}} value={null}/>
6060
<Tab
6161
sx={{
62-
color: activeTab === 0 ? '#C6C6C6' : '#4A4A4A',
63-
'&.Mui-selected': { color: '#C6C6C6' }
62+
color: activeTab === 0 ? '#a5ead6' : '#4A4A4A',
63+
'&.Mui-selected': { color: '#a5ead6' },
64+
'&:hover': { color: '#d2f5eb' }
6465
}}
6566
icon={<AddBoxIcon sx={{ fontSize: '36px' }} />}
6667
value={0}
6768
/>
6869
<Tab
6970
sx={{
70-
color: activeTab === 1 ? '#C6C6C6' : '#4A4A4A',
71-
'&.Mui-selected': { color: '#C6C6C6' }
71+
color: activeTab === 1 ? '#a5ead6' : '#4A4A4A',
72+
'&.Mui-selected': { color: '#a5ead6' },
73+
'&:hover': { color: '#d2f5eb' }
7274
}}
7375
icon={<IoMdCube style={{ fontSize: '33px' }} />}
7476
value={1}
7577
/>
7678
<Tab
7779
sx={{
78-
color: activeTab === 2 ? '#C6C6C6' : '#4A4A4A',
79-
'&.Mui-selected': { color: '#C6C6C6' }
80+
color: activeTab === 2 ? '#a5ead6' : '#4A4A4A',
81+
'&.Mui-selected': { color: '#a5ead6' },
82+
'&:hover': { color: '#d2f5eb' }
8083
}}
8184
icon={<PeopleIcon sx={{ fontSize: '36px' }} />}
8285
value={2}

0 commit comments

Comments
 (0)