Skip to content

Commit 41ca1ec

Browse files
yijunliu90yijunliu90
authored
Merge pull request #12 from oslabs-beta/xiao-tutorialCloseBtn
Xiao --- tutorial close btn
2 parents 712e508 + d8c27ea commit 41ca1ec

File tree

9 files changed

+66
-115
lines changed

9 files changed

+66
-115
lines changed

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,6 @@ const AddContextForm = ({
2323
const handleClick = () => {
2424
if (contextInput === '' || contextInput === null) return;
2525
handleClickSelectContext();
26-
27-
//need to trigger the generate code functionality to update the code preview tab. Sending dummy data to trigger with a DELELTE ELEMENT dispatch method
28-
dispatch({
29-
type: 'DELETE ELEMENT',
30-
payload: 'FAKE_ID'
31-
});
3226
};
3327

3428
const onChange = (event, newValue) => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
267267
</div>
268268

269269
<div style={{display: 'flex', flexDirection: 'column', width: `${40}px`, color: 'black', justifyContent: 'center'}}>
270-
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
270+
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" className="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
271271
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
272272
</svg>
273273
</div>

‎app/src/components/bottom/UseStateModal.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useState, useContext} from 'react';
1+
import React, {useState, useContext, useRef} from 'react';
22
import Modal from '@material-ui/core/Modal';
33
import StateContext from '../../context/context';
44
import TableStateProps from './TableStateProps';
@@ -10,7 +10,7 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
1010
const [stateKey, setStateKey] = useState('');
1111
const [statePropsId, setStatePropsId] = useState(-1);
1212
const [componentProviderId, setComponentProviderId] = useState(1);
13-
13+
const container = useRef(null);
1414
// table to choose state from
1515
const body = (
1616
<div className="useState-position">
@@ -46,9 +46,9 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
4646
);
4747

4848
return (
49-
<div>
49+
<div ref={container}>
5050
<button className="useState-btn" onClick={() => setOpen(true)}>USE STATE</button>
51-
<Modal open={open}>{body}</Modal>
51+
<Modal open={open} container={container.current}>{body}</Modal>
5252
</div>
5353
);
5454
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ const DemoRender = (): JSX.Element => {
5858
//Switch between components when clicking on a link in the live render
5959
window.onmessage = (event) => {
6060
if (event.data === undefined) return;
61-
// console.log('event: ', event);
6261
const component: string = event.data?.split('/').at(-1);
6362
const componentId =
6463
component &&

‎app/src/containers/CustomizationPanel.tsx

Lines changed: 33 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -49,18 +49,11 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
4949
const [modal, setModal] = useState(null);
5050
const [useContextObj, setUseContextObj] = useState({});
5151
const [stateUsedObj, setStateUsedObj] = useState({});
52-
// ------------------------------------------- added code below -------------------------------------------
5352
const [eventAll, setEventAll] = useState(['', '']);
5453
const [eventRow, setEventRow] = useState([]);
55-
// ------------------------------------------- added code above -------------------------------------------
54+
5655
const currFocus = getFocus().child;
57-
// state.components
58-
// .find((el) => {
59-
// return el.id === state.canvasFocus.componentId;
60-
// })
61-
// .children.find((el) => {
62-
// return el.childId === state.canvasFocus.childId;
63-
// });
56+
6457
useEffect( () => {
6558
currFocus?.attributes?.compLink && setCompLink(currFocus.attributes.compLink);
6659
setEventAll(['', '']);
@@ -148,14 +141,12 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
148141
case 'cssClasses':
149142
setCssClasses(inputVal);
150143
break;
151-
// ------------------------------------------- added code below -------------------------------------------
152144
case 'event':
153145
setEventAll(inputVal ? [inputVal, `handle${inputVal.slice(2)}`] : ['', '']);
154146
break;
155147
case 'funcName':
156148
setEventAll([eventAll[0], inputVal]);
157149
break;
158-
// ------------------------------------------- added code above -------------------------------------------
159150
default:
160151
break;
161152
}
@@ -315,7 +306,6 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
315306

316307

317308
const handleSave = (): Object => {
318-
// ------------------------------------------- change code below -------------------------------------------
319309
dispatch({
320310
type: 'UPDATE STATE USED',
321311
payload: {stateUsedObj: stateUsedObj}
@@ -354,7 +344,6 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
354344
type: 'UPDATE EVENTS',
355345
payload: { events: eventsObj }
356346
});
357-
// ------------------------------------------- change code above -------------------------------------------
358347
return styleObj;
359348
};
360349
// UNDO/REDO functionality--onClick these functions will be invoked.
@@ -738,7 +727,6 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
738727
</FormControl>
739728
</div>
740729
</div>
741-
{/* ------------------------------------------- added new code------------------------------------------- */}
742730
<div>
743731
<FormSelector
744732
classes={classes}
@@ -755,71 +743,39 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
755743
{ value: 'onKeyDown', text: 'onKeyDown' }
756744
]}
757745
/>
746+
</div>
747+
{ eventAll[0] && (<div className={classes.configRow}>
748+
<div
749+
className={
750+
isThemeLight
751+
? `${classes.configType} ${classes.lightThemeFontColor}`
752+
: `${classes.configType} ${classes.darkThemeFontColor}`
753+
}
754+
>
755+
<h3>Function Name:</h3>
758756
</div>
759-
{ eventAll[0] && (<div className={classes.configRow}>
760-
<div
761-
className={
762-
isThemeLight
763-
? `${classes.configType} ${classes.lightThemeFontColor}`
764-
: `${classes.configType} ${classes.darkThemeFontColor}`
765-
}
766-
>
767-
<h3>Function Name:</h3>
768-
</div>
769-
<FormControl variant="filled">
770-
<TextField
771-
variant="filled"
772-
name="funcName"
773-
inputProps={{
774-
className: isThemeLight
775-
? `${classes.selectInput} ${classes.lightThemeFontColor}`
776-
: `${classes.selectInput} ${classes.darkThemeFontColor}`
777-
}}
778-
value={eventAll[1]}
779-
onChange={handleChange}
780-
placeholder="Function Name"
781-
/>
782-
</FormControl>
783-
</div> )}
784-
{ currFocus && Object.keys(currFocus.events).length !== 0 && (<div className={'event-table'}>
785-
<DataGrid
786-
rows={eventRow}
787-
columns={eventColumnTabs}
788-
pageSize={5}
789-
// editRowsModel={editRowsModel}
790-
// className={props.isThemeLight ? classes.themeLight : classes.themeDark}
757+
<FormControl variant="filled">
758+
<TextField
759+
variant="filled"
760+
name="funcName"
761+
inputProps={{
762+
className: isThemeLight
763+
? `${classes.selectInput} ${classes.lightThemeFontColor}`
764+
: `${classes.selectInput} ${classes.darkThemeFontColor}`
765+
}}
766+
value={eventAll[1]}
767+
onChange={handleChange}
768+
placeholder="Function Name"
791769
/>
792-
</div>)}
793-
{/* <TableContainer component={Paper} sx={{ maxHeight: '350px' }}>
794-
<Table
795-
sx={{ width: '510px' }}
796-
aria-label="customized table"
797-
stickyHeader
798-
>
799-
<TableHead>
800-
<TableRow>
801-
<StyledTableCell align="center" colSpan={3}>
802-
Added Event
803-
</StyledTableCell>
804-
</TableRow>
805-
</TableHead>
806-
<TableBody>
807-
<StyledTableRow>
808-
<StyledTableCell component="th" scope="row"><b>Event</b></StyledTableCell>
809-
<StyledTableCell align="right"><b>FuncName</b></StyledTableCell>
810-
<StyledTableCell align="right"><b>X</b></StyledTableCell>
811-
</StyledTableRow>
812-
{currComponentState ? currComponentState.map((data, index) => (
813-
<StyledTableRow key={index}>
814-
<StyledTableCell component="th" scope="row">{data.key}</StyledTableCell>
815-
<StyledTableCell align="right">{data.type}</StyledTableCell>
816-
<StyledTableCell align="right">{data.value}</StyledTableCell>
817-
</StyledTableRow>
818-
)) : ''}
819-
</TableBody>
820-
</Table>
821-
</TableContainer> */}
822-
{/* ------------------------------------------- added from above -------------------------------------------*/}
770+
</FormControl>
771+
</div> )}
772+
{ currFocus && Object.keys(currFocus.events).length !== 0 && (<div className={'event-table'}>
773+
<DataGrid
774+
rows={eventRow}
775+
columns={eventColumnTabs}
776+
pageSize={5}
777+
/>
778+
</div>)}
823779
</div>
824780
<div>
825781
<div className={classes.buttonRow}>

‎app/src/containers/LeftContainer.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,4 @@ const LeftContainer = (props): JSX.Element => {
4343
);
4444
};
4545

46-
{/* <div className="arrow-right"></div> */}
47-
4846
export default LeftContainer;

‎app/src/helperFunctions/generateCode.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -391,31 +391,31 @@ const generateUnformattedCode = (
391391
return importStr;
392392
};
393393

394-
// ------------------------------------------- added code below -------------------------------------------
395-
const createEventHandler = () => {
394+
const createEventHandler = (children) => {
396395
let importStr = '';
397-
enrichedChildren.map((child) => {
396+
children.map((child) => {
398397
if (child.type === 'HTML Element') {
399398
if (child.events) {
400399
for (const [event, funcName] of Object.entries(child.events)) {
401400
importStr += `\tconst ${funcName} = () => {};\n`;
402401
}
403402
}
403+
if (child.children.length !== 0) importStr += createEventHandler(child.children);
404404
}
405405
});
406406

407407
return importStr;
408408
};
409-
// ------------------------------------------- added code above -------------------------------------------
409+
410410
let generatedCode = "import React, { useState, useEffect, useContext} from 'react';\n\n";
411411
generatedCode += currComponent.name === 'APP' ? contextImports : '';
412-
generatedCode += importReactRouter ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';` : ``;
412+
generatedCode += importReactRouter ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';\n` : ``;
413413
generatedCode += createContextImport() ? `${createContextImport()}\n`: '';
414414
generatedCode += importsMapped ? `${importsMapped}\n` : '';
415415
// below is the return statement of the codepreview
416416
generatedCode += `const ${currComponent.name} = (props) => {\n`;
417417
generatedCode += writeStateProps(currComponent.useStateCodes) ? `\t${writeStateProps(currComponent.useStateCodes)}\n` : '';
418-
generatedCode += createEventHandler() ? `${createEventHandler()}\n` : '';
418+
generatedCode += createEventHandler(enrichedChildren) ? `${createEventHandler(enrichedChildren)}\n` : '';
419419
generatedCode += `
420420
return(
421421
<>

‎app/src/reducers/componentReducer.ts

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -85,21 +85,25 @@ const reducer = (state: State, action: Action) => {
8585
// update all ids and typeIds to match one another
8686
const updateAllIds = (comp: Component[] | ChildElement[]) => {
8787
// put components' names and ids into an obj
88-
const obj = {};
89-
comp.forEach((el) => {
90-
obj[el.name] = el.id;
91-
});
88+
const obj = { spr: 1000, others: 1 };
89+
// comp.forEach((el) => {
90+
// if (!obj[el.name]) obj[el.name] = el.id;
91+
// });
9292
// for each of the components, if it has children, iterate through that children array
9393
comp.forEach((el) => {
9494
if (el.children.length > 0) {
9595
for (let i = 0; i < el.children.length; i++) {
9696
// update each child's childId
97-
el.children[i].childId = i + 1;
98-
// if the child's name and id exists in the object
99-
if (obj[el.children[i].name]) {
100-
// set the child's typeId to be the value in the object of the child's name key
101-
el.children[i].typeId = obj[el.children[i].name];
97+
if (el.children[i].name === 'separator') {
98+
el.children[i].childId = obj['spr']++;
99+
} else {
100+
el.children[i].childId = obj['others']++;
102101
}
102+
// // if the child's name and id exists in the object
103+
// if (obj[el.children[i].name]) {
104+
// // set the child's typeId to be the value in the object of the child's name key
105+
// el.children[i].typeId = obj[el.children[i].name];
106+
// }
103107
// recursively call the updateAllIds function on the child's children array if
104108
// the child's children array is greater than 0
105109
if (el.children[i].children.length > 0) {
@@ -145,7 +149,7 @@ const reducer = (state: State, action: Action) => {
145149
// component has a children array, iterate through the array of children
146150
child.forEach((el) => {
147151
if (el.children.length) {
148-
const arr = [];
152+
const arr: ChildElement[] = [];
149153
for (let i = 0; i < el.children.length; i++) {
150154
// check to see if the name variable doesn't match the name of the child
151155
if (el.children[i].name !== name) {
@@ -510,7 +514,6 @@ const reducer = (state: State, action: Action) => {
510514
);
511515
return { ...state, components };
512516
}
513-
// ------------------------------------------- added code below -------------------------------------------
514517
case 'UPDATE EVENTS': {
515518
const { events } = action.payload;
516519
if (JSON.stringify(events) === '{}') return state;
@@ -552,8 +555,6 @@ const reducer = (state: State, action: Action) => {
552555
);
553556
return { ...state, components };
554557
}
555-
// ------------------------------------------- added code above -------------------------------------------
556-
557558
case 'DELETE CHILD': {
558559
// if in-focus instance is a top-level component and not a child, don't delete anything
559560
if (!state.canvasFocus.childId) return state;
@@ -752,6 +753,7 @@ const reducer = (state: State, action: Action) => {
752753
});
753754
const components: Component[] = deleteById(action.payload, name);
754755
const rootComponents: number[] = updateRoots(components);
756+
const canvasFocus = { ...state.canvasFocus, childId: null };
755757
components.forEach((el, i) => {
756758
el.code = generateCode(
757759
components,
@@ -763,6 +765,7 @@ const reducer = (state: State, action: Action) => {
763765
});
764766
return {
765767
...state,
768+
canvasFocus,
766769
HTMLTypes
767770
};
768771
}

‎app/src/tutorial/Tutorial.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import ColorLensIcon from '@material-ui/icons/ColorLens';
2020
import SwapVertIcon from '@material-ui/icons/SwapVert';
2121
import KeyboardIcon from '@material-ui/icons/Keyboard';
2222
import BrushIcon from '@material-ui/icons/Brush';
23-
import HomeIcon from '@material-ui/icons/Home';
23+
import CloseIcon from '@material-ui/icons/Close';
2424
import Button from '@material-ui/core/Button';
2525

2626

@@ -142,18 +142,19 @@ const Tutorial: React.FC<RouteComponentProps> = () => {
142142
return (
143143
<>
144144
<div>
145-
<Link to='/' style={{textDecoration: 'none'}}>
145+
{/* <Link to='/' style={{textDecoration: 'none'}}> */}
146146
<Button
147147
variant='contained'
148148
color='primary'
149149
style={{ minWidth: '137.69px'}}
150150
className="navbarButton"
151151
id="ratingButton"
152-
endIcon={<HomeIcon/>}
152+
onClick={window.close}
153+
endIcon={<CloseIcon/>}
153154
>
154-
HOME
155+
Close
155156
</Button>
156-
</Link>
157+
{/* </Link> */}
157158
</div>
158159
<Container maxWidth="xl" className={classes.container}>
159160
<h1 className={classes.pageTitle}>ReacType Tutorial</h1>

0 commit comments

Comments
 (0)