Skip to content

Commit a9a9937

Browse files
LALeerLALeer
committed
Co-authored-by: Sean <[email protected]>
Co-authored-by: jujupro <[email protected]> Co-authored-by: lauraafor <[email protected]>
2 parents bc3773b + 20ec777 commit a9a9937

File tree

23 files changed

+529
-117
lines changed

23 files changed

+529
-117
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/bottom/CodePreview.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import 'ace-builds/src-noconflict/mode-javascript';
44
import 'ace-builds/src-noconflict/theme-dracula';
55
import 'ace-builds/src-noconflict/theme-terminal';
66

7-
import * as esbuild from 'esbuild-wasm';
8-
97
import React, { useContext, useEffect, useRef, useState } from 'react';
108
import {
119
codePreviewInput,
@@ -19,22 +17,14 @@ import { RootState } from '../../redux/store';
1917
import { fetchPlugin } from '../../plugins/fetch-plugin';
2018
import { unpkgPathPlugin } from '../../plugins/unpkg-path-plugin';
2119
import useResizeObserver from '../../tree/useResizeObserver';
20+
import { initializeEsbuild } from '../../helperFunctions/esbuildService';
2221

2322
const CodePreview: React.FC<{
2423
theme: string | null;
2524
setTheme: any | null;
2625
}> = ({ theme, setTheme }) => {
2726
const ref = useRef<any>();
2827

29-
/**
30-
* Starts the Web Assembly service.
31-
*/
32-
const startService = async () => {
33-
ref.current = await esbuild.initialize({
34-
worker: true,
35-
wasmURL: 'https://unpkg.com/[email protected]/esbuild.wasm'
36-
});
37-
};
3828
const dispatch = useDispatch();
3929

4030
const wrapper = useRef();
@@ -49,7 +39,8 @@ const CodePreview: React.FC<{
4939
const [input, setInput] = useState('');
5040

5141
useEffect(() => {
52-
startService();
42+
//Starts the Web Assembly service
43+
initializeEsbuild();
5344
}, []);
5445

5546
useEffect(() => {
@@ -61,6 +52,13 @@ const CodePreview: React.FC<{
6152
dispatch(codePreviewInput(currentComponent.code));
6253
}, [currentComponent, state.components]);
6354

55+
useEffect(() => {
56+
console.log('CodePreview Mounted');
57+
return () => {
58+
console.log('CodePreview Unmounted');
59+
};
60+
}, []);
61+
6462
/**
6563
* Handler thats listens to changes in code editor
6664
* @param {string} data - Code entered by the user

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

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,6 @@ const HTMLItem: React.FC<{
129129
className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
130130
id="HTMLItem"
131131
>
132-
{/* <Icon fontSize="small" align-items="center" /> */}
133132
{typeof IconComponent !== 'undefined' && (
134133
<IconComponent fontSize="small" align-items="center" />
135134
)}
@@ -139,23 +138,23 @@ const HTMLItem: React.FC<{
139138

140139
{/* Custom Elements */}
141140
{id > 20 && (
142-
<span id="customHTMLElement">
143-
<div
144-
ref={drag}
145-
style={{ borderColor: '#C6C6C6' }}
146-
className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
147-
id="HTMLItem"
148-
>
149-
<h3>{name}</h3>
150-
</div>
151-
<button
141+
<div
142+
ref={drag}
143+
style={{ borderColor: '#C6C6C6' }}
144+
className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
145+
id="HTMLItem"
146+
>
147+
{typeof CodeIcon !== 'undefined' && (
148+
<CodeIcon fontSize="small" align-items="center" />)}
149+
{name}
150+
<button
152151
id="newElement"
153152
style={{ color: '#C6C6C6' }}
154153
onClick={() => deleteAllInstances(id)}
155-
>
156-
X
157-
</button>
158-
</span>
154+
>
155+
X
156+
</button>
157+
</div>
159158
)}
160159
{modal}
161160
</Grid>

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

Lines changed: 8 additions & 1 deletion
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('');
@@ -317,7 +325,6 @@ const useStyles = makeStyles({
317325
},
318326
addComponentWrapper: {
319327
width: '100%',
320-
margin: '5px 0px 0px 0px'
321328
},
322329
input: {
323330
borderRadius: '5px',

0 commit comments

Comments
 (0)