Skip to content

Commit 625c609

Browse files
huypham048huypham048
committed
finshed OSP, ready for launch
Co-authored-by: Sal Saluga [email protected] Co-authored-by: Ken Bains [email protected] Co-authored-by: Bianca Picasso [email protected]
1 parent d6bb891 commit 625c609

File tree

7 files changed

+202
-82
lines changed

7 files changed

+202
-82
lines changed

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import ComponentTable from './components/ComponentTable';
99
import { Button } from '@mui/material';
1010
import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
1111
import * as actions from '../../../redux/actions/actions';
12+
import StateContext from '../../../context/context';
1213

1314
const AssignContainer = () => {
1415
const store = useStore();
@@ -20,7 +21,9 @@ const AssignContainer = () => {
2021
const [contextInput, setContextInput] = React.useState(null);
2122
const [componentInput, setComponentInput] = React.useState(null);
2223
const [componentTable, setComponentTable] = useState([]);
24+
const [stateContext, dispatchContext] = useContext(StateContext);
2325

26+
//fetching data from redux store
2427
useEffect(() => {
2528
setState(store.getState().contextSlice);
2629
}, []);
@@ -32,7 +35,8 @@ const AssignContainer = () => {
3235
setTableState(targetContext.values);
3336
}
3437
};
35-
//checks if state is no longer an array, thus an object and will eventually render out the fetched
38+
39+
//construct data for table displaying component table
3640
const renderComponentTable = targetComponent => {
3741
//target Component is main
3842

@@ -47,18 +51,30 @@ const AssignContainer = () => {
4751
listOfContexts.push(context.name);
4852
}
4953
});
50-
console.log('setting component table with ', listOfContexts);
5154
setComponentTable(listOfContexts);
5255
}
5356
};
5457

58+
//handling assignment of contexts to components
5559
const handleAssignment = () => {
60+
if (
61+
contextInput === '' ||
62+
contextInput === null ||
63+
componentInput === '' ||
64+
componentInput === null
65+
)
66+
return;
5667
dispatch(
5768
actions.addComponentToContext({
5869
context: contextInput,
5970
component: componentInput
6071
})
6172
);
73+
//trigger generateCode(), update code preview tab
74+
dispatchContext({
75+
type: 'DELETE ELEMENT',
76+
payload: 'FAKE_ID'
77+
});
6278

6379
setState(store.getState().contextSlice);
6480
renderComponentTable(componentInput);

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useEffect, useState, useContext } from 'react';
22
import { useStore } from 'react-redux';
33
import { useDispatch } from 'react-redux';
44
import Divider from '@mui/material/Divider';
@@ -8,44 +8,57 @@ import AddDataForm from './components/AddDataForm';
88
import AddContextForm from './components/AddContextForm';
99
import * as actions from '../../../redux/actions/actions';
1010
import { Typography } from '@mui/material';
11+
import StateContext from '../../../context/context';
1112

1213
const CreateContainer = () => {
1314
const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }];
1415
const store = useStore();
1516
const [state, setState] = useState([]);
1617
const [tableState, setTableState] = React.useState(defaultTableData);
1718
const [contextInput, setContextInput] = React.useState(null);
19+
const [stateContext, dispatchContext] = useContext(StateContext);
1820

21+
//pulling data from redux store
1922
useEffect(() => {
2023
setState(store.getState().contextSlice);
2124
}, []);
2225

2326
const dispatch = useDispatch();
2427

28+
//update data store when user adds a new context
2529
const handleClickSelectContext = () => {
2630
//prevent user from adding duplicate context
2731
for (let i = 0; i < state.allContext.length; i += 1) {
2832
if (state.allContext[i].name === contextInput.name) {
2933
return;
3034
}
3135
}
36+
setContextInput('');
3237
dispatch(actions.addContextActionCreator(contextInput));
3338
setState(store.getState().contextSlice);
3439
};
3540

41+
//update data store when user add new key-value pair to context
3642
const handleClickInputData = ({ name }, { inputKey, inputValue }) => {
3743
dispatch(
3844
actions.addContextValuesActionCreator({ name, inputKey, inputValue })
3945
);
4046
setState(store.getState().contextSlice);
4147
};
4248

49+
//update data store when user deletes context
4350
const handleDeleteContextClick = () => {
4451
dispatch(actions.deleteContext(contextInput));
4552
setContextInput('');
4653
setState(store.getState().contextSlice);
54+
setTableState(defaultTableData);
55+
dispatchContext({
56+
type: 'DELETE ELEMENT',
57+
payload: 'FAKE_ID'
58+
});
4759
};
4860

61+
//re-render data table when there's new changes
4962
const renderTable = targetContext => {
5063
if (
5164
targetContext === null ||

‎app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const DisplayContainer = () => {
88
const { allContext } = store.getState().contextSlice;
99
const [contextData, setContextData] = useState([]);
1010

11+
//build data for Google charts, tree rendering
1112
useEffect(() => {
1213
transformData(allContext);
1314
}, []);

‎app/src/components/main/DemoRender.tsx

Lines changed: 103 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect, useRef, useContext } from 'react';
2-
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
2+
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
33
import Box from '@material-ui/core/Box';
44
import cssRefresher from '../../helperFunctions/cssRefresh';
55
import { useSelector } from 'react-redux';
@@ -17,12 +17,12 @@ const DemoRender = (): JSX.Element => {
1717
(elem: Component) => elem.id === state.canvasFocus.componentId
1818
);
1919

20-
// Create React ref to inject transpiled code in inframe
20+
// Create React ref to inject transpiled code in inframe
2121
const iframe = useRef<any>();
2222
const demoContainerStyle = {
2323
width: '100%',
2424
backgroundColor: '#FBFBFB',
25-
border: '2px Solid grey',
25+
border: '2px Solid grey'
2626
};
2727

2828
const html = `
@@ -55,14 +55,19 @@ const DemoRender = (): JSX.Element => {
5555
`;
5656

5757
//Switch between components when clicking on a link in the live render
58-
window.onmessage = (event) => {
59-
if(event.data === undefined) return;
60-
const component:string = event.data?.split('/').at(-1);
61-
const componentId = component && state.components?.find((el) => {
62-
return el.name.toLowerCase() === component.toLowerCase();
63-
}).id;
64-
componentId && dispatch({ type: 'CHANGE FOCUS', payload: {componentId, childId: null}})
65-
58+
window.onmessage = event => {
59+
if (event.data === undefined) return;
60+
const component: string = event.data?.split('/').at(-1);
61+
const componentId =
62+
component &&
63+
state.components?.find(el => {
64+
return el.name.toLowerCase() === component.toLowerCase();
65+
}).id;
66+
componentId &&
67+
dispatch({
68+
type: 'CHANGE FOCUS',
69+
payload: { componentId, childId: null }
70+
});
6671
};
6772

6873
// This function is the heart of DemoRender it will take the array of components stored in state and dynamically construct the desired React component for the live demo
@@ -78,28 +83,94 @@ const DemoRender = (): JSX.Element => {
7883
const classRender = element.attributes.cssClasses;
7984
const activeLink = element.attributes.compLink;
8085
let renderedChildren;
81-
if (elementType !== 'input' && elementType !== 'img' && elementType !== 'Image' && element.children.length > 0) {
86+
if (
87+
elementType !== 'input' &&
88+
elementType !== 'img' &&
89+
elementType !== 'Image' &&
90+
element.children.length > 0
91+
) {
8292
renderedChildren = componentBuilder(element.children);
8393
}
84-
if (elementType === 'input') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
85-
else if (elementType === 'img') componentsToRender.push(<Box component={elementType} src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
86-
else if (elementType === 'Image') componentsToRender.push(<Box component='img' src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
87-
else if (elementType === 'a' || elementType === 'Link') componentsToRender.push(<Box component='a' href={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>);
88-
else if (elementType === 'Switch') componentsToRender.push(<Switch>{renderedChildren}</Switch>);
89-
else if (elementType === 'Route') componentsToRender.push(<Route exact path={activeLink}>{renderedChildren}</Route>);
90-
else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>
91-
);
94+
if (elementType === 'input')
95+
componentsToRender.push(
96+
<Box
97+
component={elementType}
98+
className={classRender}
99+
style={elementStyle}
100+
key={key}
101+
id={`rend${childId}`}
102+
></Box>
103+
);
104+
else if (elementType === 'img')
105+
componentsToRender.push(
106+
<Box
107+
component={elementType}
108+
src={activeLink}
109+
className={classRender}
110+
style={elementStyle}
111+
key={key}
112+
id={`rend${childId}`}
113+
></Box>
114+
);
115+
else if (elementType === 'Image')
116+
componentsToRender.push(
117+
<Box
118+
component="img"
119+
src={activeLink}
120+
className={classRender}
121+
style={elementStyle}
122+
key={key}
123+
id={`rend${childId}`}
124+
></Box>
125+
);
126+
else if (elementType === 'a' || elementType === 'Link')
127+
componentsToRender.push(
128+
<Box
129+
component="a"
130+
href={activeLink}
131+
className={classRender}
132+
style={elementStyle}
133+
key={key}
134+
id={`rend${childId}`}
135+
>
136+
{innerText}
137+
{renderedChildren}
138+
</Box>
139+
);
140+
else if (elementType === 'Switch')
141+
componentsToRender.push(<Switch>{renderedChildren}</Switch>);
142+
else if (elementType === 'Route')
143+
componentsToRender.push(
144+
<Route exact path={activeLink}>
145+
{renderedChildren}
146+
</Route>
147+
);
148+
else
149+
componentsToRender.push(
150+
<Box
151+
component={elementType}
152+
className={classRender}
153+
style={elementStyle}
154+
key={key}
155+
id={`rend${childId}`}
156+
>
157+
{innerText}
158+
{renderedChildren}
159+
</Box>
160+
);
92161
key += 1;
93162
}
94163
}
95164
return componentsToRender;
96165
};
97166

98167
let code = '';
99-
const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
168+
const currComponent = state.components.find(
169+
element => element.id === state.canvasFocus.componentId
170+
);
100171

101172
componentBuilder(currComponent.children).forEach(element => {
102-
try{
173+
try {
103174
code += ReactDOMServer.renderToString(element);
104175
} catch {
105176
return;
@@ -108,17 +179,23 @@ const DemoRender = (): JSX.Element => {
108179

109180
useEffect(() => {
110181
cssRefresher();
111-
}, [])
182+
}, []);
112183

113184
useEffect(() => {
114185
iframe.current.contentWindow.postMessage(code, '*');
115-
}, [code])
186+
}, [code]);
116187

117188
return (
118189
<div id={'renderFocus'} style={demoContainerStyle}>
119-
<iframe ref={iframe} sandbox='allow-scripts' srcDoc={html} width='100%' height='100%' />
190+
<iframe
191+
ref={iframe}
192+
sandbox="allow-scripts"
193+
srcDoc={html}
194+
width="100%"
195+
height="100%"
196+
/>
120197
</div>
121198
);
122199
};
123200

124-
export default DemoRender;
201+
export default DemoRender;

0 commit comments

Comments
 (0)