Skip to content

Commit 23d21af

Browse files
lauraaforlauraafor
committed
adjustment
2 parents c752225 + 20ec777 commit 23d21af

File tree

16 files changed

+361
-66
lines changed

16 files changed

+361
-66
lines changed

‎app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { addComponentToContext } from '../../../redux/reducers/slice/contextRedu
1111
import { useSelector, useDispatch } from 'react-redux';
1212
import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
1313
import { RootState } from '../../../redux/store';
14+
import { emitEvent } from '../../../../src/helperFunctions/socket';
1415

1516
const AssignContainer = () => {
1617
const dispatch = useDispatch();
@@ -23,6 +24,7 @@ const AssignContainer = () => {
2324
state: store.appState,
2425
contextParam: store.contextSlice
2526
}));
27+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
2628

2729
//sets table data if it exists
2830
const renderTable = (targetContext) => {
@@ -52,6 +54,7 @@ const AssignContainer = () => {
5254
componentInput === null
5355
)
5456
return;
57+
5558
dispatch(
5659
addComponentToContext({
5760
context: contextInput,
@@ -60,6 +63,16 @@ const AssignContainer = () => {
6063
);
6164
//trigger generateCode(), update code preview tab
6265
dispatch(deleteElement({ id: 'FAKE_ID', contextParam: contextParam }));
66+
67+
if (roomCode) {
68+
emitEvent('assignContextActions', roomCode, {
69+
context: contextInput,
70+
component: componentInput,
71+
id: 'FAKE_ID',
72+
contextParam: contextParam
73+
});
74+
}
75+
6376
renderComponentTable(componentInput);
6477
};
6578

‎app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,12 @@ import {
1212
} from '../../../redux/reducers/slice/contextReducer';
1313
import { useSelector, useDispatch } from 'react-redux';
1414
import { RootState } from '../../../redux/store';
15+
import { emitEvent } from '../../../../src/helperFunctions/socket';
1516

1617
const CreateContainer = () => {
1718
const state = useSelector((store: RootState) => store.contextSlice);
19+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
20+
1821
const [contextInput, setContextInput] = React.useState('');
1922
const [currentContext, setCurrentContext] = React.useState('');
2023
const [errorMsg, setErrorMsg] = React.useState('');
@@ -49,6 +52,11 @@ const CreateContainer = () => {
4952
}
5053

5154
dispatch(addContext({ name: contextInput }));
55+
56+
if (roomCode) {
57+
emitEvent('addContextAction', roomCode, { name: contextInput });
58+
}
59+
5260
setContextInput('');
5361
};
5462

@@ -73,11 +81,24 @@ const CreateContainer = () => {
7381
//update data store when user add new key-value pair to context
7482
const handleClickInputData = (name, { inputKey, inputValue }) => {
7583
dispatch(addContextValues({ name, inputKey, inputValue }));
84+
85+
if (roomCode) {
86+
emitEvent('addContextValuesAction', roomCode, {
87+
name,
88+
inputKey,
89+
inputValue
90+
});
91+
}
7692
};
7793

7894
//update data store when user deletes context
7995
const handleDeleteContextClick = () => {
8096
dispatch(deleteContext({ name: currentContext }));
97+
98+
if (roomCode) {
99+
emitEvent('deleteContextAction', roomCode, { name: currentContext });
100+
}
101+
81102
setContextInput('');
82103
setCurrentContext('');
83104
};

‎app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@ import TableStateProps from './TableStateProps';
1616
import TableParentProps from './TableParentProps';
1717
import TablePassedInProps from './TablePassedInProps';
1818
import { RootState } from '../../../../redux/store';
19+
import { emitEvent } from '../../../../helperFunctions/socket';
1920

2021
const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
2122
const state = useSelector((store: RootState) => store.appState);
2223
const contextParam = useSelector((store: RootState) => store.contextSlice);
24+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
2325

2426
const dispatch = useDispatch();
2527
const classes = useStyles();
@@ -159,6 +161,15 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
159161
contextParam: contextParam
160162
})
161163
);
164+
165+
if (roomCode) {
166+
emitEvent('addStateAction', roomCode, {
167+
newState: newState,
168+
setNewState: setNewState,
169+
contextParam: contextParam
170+
});
171+
}
172+
162173
setRows1([...rows1, newState]);
163174
setErrorStatus(false);
164175
clearForm();

‎app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ import makeStyles from '@mui/styles/makeStyles';
66
import AddIcon from '@mui/icons-material/Add';
77
import { addPassedInProps } from '../../../../redux/reducers/slice/appStateSlice';
88
import { RootState } from '../../../../redux/store';
9+
import { emitEvent } from '../../../../helperFunctions/socket';
910

1011
const TableParentProps = (props) => {
1112
const state = useSelector((store: RootState) => store.appState);
1213
const contextParam = useSelector((store: RootState) => store.contextSlice);
14+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
1315

1416
const dispatch = useDispatch();
1517
const classes = useStyles();
@@ -76,6 +78,15 @@ const TableParentProps = (props) => {
7678
contextParam: contextParam
7779
})
7880
);
81+
82+
if (roomCode) {
83+
emitEvent('addPassedInPropsAction', roomCode, {
84+
passedInProps: parentComponentProps,
85+
rowId: rowId,
86+
parentComponent: parentComponent,
87+
contextParam: contextParam
88+
});
89+
}
7990
};
8091

8192
useEffect(() => {

‎app/src/components/StateManagement/CreateTab/components/TablePassedInProps.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import { useDispatch, useSelector } from 'react-redux';
77
import { deletePassedInProps } from '../../../../redux/reducers/slice/appStateSlice';
88
import { RootState } from '../../../../redux/store';
99
import { ColumnTab } from '../../../../interfaces/Interfaces';
10+
import { emitEvent } from '../../../../helperFunctions/socket';
1011

1112
const TablePassedInProps = (props) => {
1213
const state = useSelector((store: RootState) => store.appState);
1314
const contextParam = useSelector((store: RootState) => store.contextSlice);
15+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
1416

1517
const dispatch = useDispatch();
1618
const classes = useStyles();
@@ -75,6 +77,13 @@ const TablePassedInProps = (props) => {
7577
// remove the state that the button is clicked
7678
// send a dispatch to rerender the table
7779
dispatch(deletePassedInProps({ rowId: rowId, contextParam: contextParam }));
80+
81+
if (roomCode) {
82+
emitEvent('deletePassedInPropsAction', roomCode, {
83+
rowId: rowId,
84+
contextParam: contextParam
85+
});
86+
}
7887
};
7988

8089
useEffect(() => {

‎app/src/components/StateManagement/CreateTab/components/TableStateProps.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,13 @@ import { useDispatch, useSelector } from 'react-redux';
88
import { deleteState } from '../../../../redux/reducers/slice/appStateSlice';
99
import { RootState } from '../../../../redux/store';
1010
import { ColumnTab } from '../../../../interfaces/Interfaces';
11+
import { emitEvent } from '../../../../helperFunctions/socket';
12+
1113
// updates state mgmt boxes and data grid
1214
const TableStateProps = (props) => {
1315
const state = useSelector((store: RootState) => store.appState);
1416
const contextParam = useSelector((store: RootState) => store.contextSlice);
17+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
1518

1619
const dispatch = useDispatch();
1720
const classes = useStyles();
@@ -84,6 +87,14 @@ const TableStateProps = (props) => {
8487
contextParam: contextParam
8588
})
8689
);
90+
91+
if (roomCode) {
92+
emitEvent('deleteStateAction', roomCode, {
93+
stateProps: filtered,
94+
rowId: selectedId,
95+
contextParam: contextParam
96+
});
97+
}
8798
};
8899

89100
useEffect(() => {

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { addElement } from '../../redux/reducers/slice/appStateSlice';
88
import makeStyles from '@mui/styles/makeStyles';
99
import MuiAlert, { AlertProps } from '@mui/material/Alert';
1010
import Snackbar from '@mui/material/Snackbar';
11+
import { emitEvent } from '../../helperFunctions/socket';
1112

1213
/*
1314
DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
@@ -32,6 +33,8 @@ const HTMLPanel = (props): JSX.Element => {
3233
const [errorStatus, setErrorStatus] = useState(false);
3334
const [alertOpen, setAlertOpen] = React.useState<boolean>(false);
3435
const state = useSelector((store: RootState) => store.appState);
36+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
37+
3538
const dispatch = useDispatch();
3639
let startingID = 0;
3740
state.HTMLTypes.forEach((element) => {
@@ -106,6 +109,11 @@ const HTMLPanel = (props): JSX.Element => {
106109
};
107110

108111
dispatch(addElement(newElement));
112+
113+
if (roomCode) {
114+
emitEvent('addElementAction', roomCode, newElement);
115+
}
116+
109117
setCurrentID(currentID + 1);
110118
setTag('');
111119
setName('');

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

Lines changed: 116 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,27 @@ import {
1414
addChild,
1515
changeFocus,
1616
deleteChild,
17-
deleteElement,
1817
changePosition,
1918
resetState,
2019
updateStateUsed,
2120
updateUseContext,
2221
updateCss,
2322
updateAttributes,
2423
updateEvents,
24+
addComponent,
25+
addElement,
26+
addState,
27+
deleteState,
28+
addPassedInProps,
29+
deletePassedInProps,
30+
deleteElement,
2531
updateStylesheet
2632
} from '../../redux/reducers/slice/appStateSlice';
33+
import {
34+
addContext,
35+
deleteContext,
36+
addContextValues
37+
} from '../../redux/reducers/slice/contextReducer';
2738
import {
2839
setRoomCode,
2940
setUserName,
@@ -40,6 +51,12 @@ import {
4051
getSocket,
4152
disconnectSocket
4253
} from '../../helperFunctions/socket';
54+
import {
55+
AddContextPayload,
56+
AddContextValuesPayload,
57+
DeleteContextPayload,
58+
addComponentToContext
59+
} from '../../../src/redux/reducers/slice/contextReducer';
4360

4461
// // for websockets
4562
// // Part - join room and room code functionality
@@ -130,18 +147,43 @@ const RoomsContainer = () => {
130147

131148
socket.on('update data from server', (updateData: BottomPanelObj) => {
132149
// console.log('update data received from server', updateData);
133-
store.dispatch(updateStateUsed({stateUsedObj: updateData.stateUsedObj, contextParam: updateData.contextParam}));
134-
store.dispatch(updateUseContext({useContextObj: updateData.useContextObj, contextParam: updateData.contextParam}));
135-
store.dispatch(updateCss({style: updateData.style, contextParam: updateData.contextParam}));
136-
store.dispatch(updateAttributes({attributes: updateData.attributes, contextParam: updateData.contextParam}));
137-
store.dispatch(updateEvents({events: updateData.events, contextParam: updateData.contextParam}));
138-
});
150+
store.dispatch(
151+
updateStateUsed({
152+
stateUsedObj: updateData.stateUsedObj,
153+
contextParam: updateData.contextParam
154+
})
155+
);
156+
store.dispatch(
157+
updateUseContext({
158+
useContextObj: updateData.useContextObj,
159+
contextParam: updateData.contextParam
160+
})
161+
);
162+
store.dispatch(
163+
updateCss({
164+
style: updateData.style,
165+
contextParam: updateData.contextParam
166+
})
167+
);
168+
store.dispatch(
169+
updateAttributes({
170+
attributes: updateData.attributes,
171+
contextParam: updateData.contextParam
172+
})
173+
);
174+
store.dispatch(
175+
updateEvents({
176+
events: updateData.events,
177+
contextParam: updateData.contextParam
178+
})
179+
);
180+
});
139181

140182
socket.on('update css data from server', (cssData: object) => {
141183
// console.log('CSS data received from server', cssData);
142184
store.dispatch(updateStylesheet(cssData));
143185
});
144-
186+
145187
socket.on(
146188
'item position data from server',
147189
(itemPositionData: object) => {
@@ -152,6 +194,72 @@ const RoomsContainer = () => {
152194
store.dispatch(changePosition(itemPositionData));
153195
}
154196
);
197+
198+
socket.on('new component data from server', (newComponent: object) => {
199+
store.dispatch(addComponent(newComponent));
200+
});
201+
202+
socket.on('new element data from server', (newElement: object) => {
203+
store.dispatch(addElement(newElement));
204+
});
205+
206+
socket.on(
207+
'new component state data from server',
208+
(componentState: object) => {
209+
store.dispatch(addState(componentState));
210+
}
211+
);
212+
213+
socket.on(
214+
'delete component state data from server',
215+
(componentStateDelete: object) => {
216+
store.dispatch(deleteState(componentStateDelete));
217+
}
218+
);
219+
220+
socket.on(
221+
'new PassedInProps data from server',
222+
(passedInProps: object) => {
223+
store.dispatch(addPassedInProps(passedInProps));
224+
}
225+
);
226+
227+
socket.on(
228+
'PassedInProps delete data from server',
229+
(passedInProps: object) => {
230+
store.dispatch(deletePassedInProps(passedInProps));
231+
}
232+
);
233+
234+
socket.on('new context from server', (context: AddContextPayload) => {
235+
store.dispatch(addContext(context));
236+
});
237+
238+
socket.on(
239+
'new context value from server',
240+
(contextVal: AddContextValuesPayload) => {
241+
store.dispatch(addContextValues(contextVal));
242+
}
243+
);
244+
245+
socket.on(
246+
'delete context data from server',
247+
(context: DeleteContextPayload) => {
248+
store.dispatch(deleteContext(context));
249+
}
250+
);
251+
252+
socket.on('assign context data from server', (data) => {
253+
store.dispatch(
254+
addComponentToContext({
255+
context: data.context,
256+
component: data.component
257+
})
258+
);
259+
store.dispatch(
260+
deleteElement({ id: 'FAKE_ID', contextParam: data.contextParam })
261+
);
262+
});
155263
}
156264
}
157265

0 commit comments

Comments
 (0)