Skip to content

Commit 9362366

Browse files
calvincaocalvincao
committed
Merge branch 'Miko' of https://github.com/oslabs-beta/ReacType into addReduxAndMikos
2 parents 217e147 + 3db4d99 commit 9362366

File tree

10 files changed

+79
-59
lines changed

10 files changed

+79
-59
lines changed

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,6 @@ const CodePreview: React.FC<{
4545
);
4646

4747
const [input, setInput] = useState();
48-
49-
useEffect(() => {
50-
console.log('CodePreview input', input);
51-
console.log('currentComponent.code', currentComponent.code);
52-
}, [input])
5348

5449
useEffect(() => {
5550
startService();

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const DragDropPanel = (props): JSX.Element => {
2828
};
2929

3030
// filter out separator so that it will not appear on the html panel
31-
const htmlTypesToRender = state.HTMLTypes.filter(type => type.name !== 'separator' && type.name !== 'Route');
31+
const htmlTypesToRender = state.HTMLTypes.filter(type => type.name !== 'separator');
3232
return (
3333
<div className="HTMLItems">
3434
<div id="HTMLItemsTopHalf">
@@ -37,7 +37,7 @@ const DragDropPanel = (props): JSX.Element => {
3737
>
3838
<h3 style={ {color: isThemeLight ? '#000' : '#fff'} }>HTML ELEMENTS</h3>
3939
{htmlTypesToRender.map(option => {
40-
if (!['Switch', 'LinkTo', 'LinkHref', 'Image'].includes(option.name)) {
40+
if (!['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(option.name)) {
4141
return (
4242
<HTMLItem
4343
name={option.name}
@@ -53,7 +53,7 @@ const DragDropPanel = (props): JSX.Element => {
5353
})}
5454
{state.projectType === "Classic React" ? <h3 style={ {color: isThemeLight ? '#000' : '#fff' } }>REACT ROUTER</h3> : null}
5555
{htmlTypesToRender.map(option => {
56-
if ((option.name === 'Switch' || option.name === 'LinkTo') && state.projectType === "Classic React") {
56+
if ((option.name === 'Switch' || option.name === 'LinkTo' || option.name === 'Route') && state.projectType === "Classic React") {
5757
return (
5858
<HTMLItem
5959
name={option.name}

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

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AddRoutes } from '../../interfaces/Interfaces'
2-
import React, { useContext } from 'react';
2+
import React, { useContext, useState } from 'react';
33
import StateContext from '../../context/context';
44
import FormControl from '@material-ui/core/FormControl';
55
import MenuItem from '@material-ui/core/MenuItem';
@@ -8,10 +8,10 @@ import { InputLabel } from '@material-ui/core';
88

99
import { styleContext } from '../../containers/AppContainer';
1010

11-
function AddLink({ id }: AddRoutes) {
11+
function AddLink({ id, onClickHandler }) {
1212
const { isThemeLight } = useContext(styleContext);
1313
const [state, dispatch] = useContext(StateContext);
14-
console.log('AddLink\'s state', state);
14+
1515
const handleClick = (id) => {
1616
dispatch({
1717
type: 'ADD CHILD',
@@ -24,32 +24,34 @@ function AddLink({ id }: AddRoutes) {
2424
}
2525

2626
const handlePageSelect = event => {
27-
const selectedPageName = event.target.value;
28-
console.log('selectedPages State: ', selectedPageName);
29-
console.log('page state', state.components[0].children);
30-
state.components[0].children.forEach(element => {
27+
const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
28+
currComponent.children.some(element => {
3129
if(element.childId === id) {
32-
element.attributes.compLink = event.target.value;
30+
const state = JSON.parse(JSON.stringify(element));
31+
state.childId = id;
32+
state.attributes.compLink = event.target.value;
33+
dispatch({type: 'UPDATE ATTRIBUTES', payload: state})
34+
return true;
3335
}
3436
});
35-
// selectedPageName.compLink = event.target.value;
36-
// dispatch({ type: 'HREF TO', payload: });
3737
}
3838

39-
console.log('state', state);
40-
let pagesItems = state.components.filter(comp => state.rootComponents.includes(comp.id));
41-
let dropDown = pagesItems.map(comp => <MenuItem value={comp.name}>{comp.name}</MenuItem>);
39+
const pagesItems = state.components.filter(comp => state.rootComponents.includes(comp.id));
40+
const dropDown = pagesItems.map(comp => <MenuItem value={comp.name}>{comp.name}</MenuItem>);
41+
4242
return (
43-
<div style={{ padding: '1px', float: 'right' }}>
44-
<FormControl size='small'>
45-
<InputLabel style={ { color: isThemeLight? '#000' : '#fff'} }>Pages</InputLabel>
46-
<Select variant="outlined"
47-
onChange={handlePageSelect}
48-
id="page-select"
49-
style={ isThemeLight? {backgroundColor: '#eef0f1', color: '#000', border: '1px solid black'} : {backgroundColor: 'gray', color: '#fff', border: '1px solid white'}}
50-
>
51-
{dropDown}
52-
</Select>
43+
<div style={{padding: '1px', float: 'right', display: 'flex', border: '2px solid red', alignSelf: 'center'}}>
44+
<FormControl size='medium' style={{display: 'flex'}}>
45+
<InputLabel style={ { color: isThemeLight? '#000' : '#fff'} }>Pages</InputLabel>
46+
<Select label='pages'
47+
variant="outlined"
48+
onMouseDown={onClickHandler}
49+
onChange={handlePageSelect}
50+
id="page-select"
51+
style={ isThemeLight? {backgroundColor: '#eef0f1', color: '#000', border: '1px solid black', height: '28px', width: '200px'} : {backgroundColor: 'gray', color: '#fff', border: '1px solid white', height: '28px', width: '200px'}}
52+
>
53+
{dropDown}
54+
</Select>
5355
</FormControl>
5456
</div>
5557
);

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,11 @@ const DemoRender = (): JSX.Element => {
6666
}
6767
if (elementType === 'input') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
6868
else if (elementType === 'img') componentsToRender.push(<Box component={elementType} src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
69-
else if (elementType === 'a' || elementType === 'Link') componentsToRender.push(<Box component={'a'} href={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>);
69+
else if (elementType === 'Image') componentsToRender.push(<Box component='img' src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
70+
else if (elementType === 'a') componentsToRender.push(<Box component={elementType} href='javascript:void(0)' className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>);
7071
else if (elementType === 'Switch') componentsToRender.push(<Switch>{renderedChildren}</Switch>);
7172
else if (elementType === 'Route') componentsToRender.push(<Route exact path={activeLink}>{renderedChildren}</Route>);
72-
// else if (elementType === 'LinkTo') componentsToRender.push(<Link to={activeLink}>{innerText}</Link>);
73+
else if (elementType === 'Link') componentsToRender.push(<Box component='a' href='javascript:void(0)' className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>)/*componentsToRender.push(<Link to={activeLink}>{innerText}</Link>);*/
7374
else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>);
7475
key += 1;
7576
}
@@ -78,12 +79,9 @@ const DemoRender = (): JSX.Element => {
7879
};
7980

8081
let code = '';
81-
const currComponent = state.components.filter(element => element.id === state.canvasFocus.componentId);
82-
componentBuilder(currComponent[0].children).forEach(element => {
82+
const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
83+
componentBuilder(currComponent.children).forEach(element => {
8384
try{
84-
if(element.props.component === 'Link') {
85-
86-
}
8785
code += ReactDOMServer.renderToString(element)
8886
} catch {
8987
return;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,9 +143,9 @@ function DirectChildHTMLNestable({
143143
routeButton.push(<AddRoute id={childId} name={name} />);
144144
}
145145
if (typeId === 19) {
146-
routeButton.push(<AddLink id={childId} name={name} />);
146+
routeButton.push(<AddLink id={childId} onClickHandler={onClickHandler} name={name} />);
147147
}
148-
148+
149149
return (
150150
<div onClick={onClickHandler} style={combinedStyle} ref={ref} id={`canv${childId}`}>
151151
<strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>

‎app/src/components/right/ProjectManager.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@ const ProjectManager = () => {
118118
// when a directory is chosen, the callback will export the project to the chosen folder
119119
// Note: this listener is imported from the main process via preload.js
120120
window.api.addAppDirChosenListener(path => {
121+
console.log('state compnents', state.components)
121122
exportProject(
122123
path,
123124
state.name

‎app/src/components/right/StatePropsPanel.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -321,15 +321,15 @@ const useStyles = makeStyles((theme: Theme) =>
321321
borderBottom: '1px solid white'
322322
},
323323
rootUnderlineDark: {
324-
'& .MuiSelect-icon': {
324+
'& .-icon': {
325325
color: '#fff',
326326
},
327327
'&::before': {
328328
borderBottom: '1px solid #fff'
329329
}
330330
},
331331
rootUnderlineLight: {
332-
'& .MuiSelect-icon': {
332+
'& .-icon': {
333333
color: 'rgba(0,0,0,0.54)',
334334
},
335335
'&::before': {

‎app/src/containers/CustomizationPanel.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,14 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
4848
const [stateUsedObj, setStateUsedObj] = useState({});
4949

5050
const resetFields = () => {
51-
const childrenArray = state.components[0].children;
52-
let attributes;
51+
const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
52+
const childrenArray = currComponent.children;
5353
for (const element of childrenArray) {
5454
if (configTarget.child && element.childId === configTarget.child.id) {
55-
attributes = element.attributes;
56-
setCompText(attributes.text ? attributes.text : '');
57-
setCompLink(attributes.link ? attributes.link : '');
55+
const attributes = element.attributes;
56+
const style = element.style;
57+
setCompText(attributes.compText ? attributes.compText : '');
58+
setCompLink(attributes.compLink ? attributes.compLink : '');
5859
setCssClasses(attributes.cssClasses ? attributes.cssClasses : '');
5960
}
6061
}
@@ -73,6 +74,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
7374
// after component renders, reset the input fields with the current styles of the selected child
7475
useEffect(() => {
7576
resetFields();
77+
// const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
78+
// const childrenArray = currComponent.children;
79+
// console.log('childrenArray', childrenArray)
7680
}, [state.canvasFocus.componentId, state.canvasFocus.childId]);
7781
// handles all input field changes, with specific updates called based on input's name
7882
const handleChange = (e: React.ChangeEvent<{ value: any }>) => {
@@ -399,7 +403,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
399403
<FormSelector
400404
classes={classes}
401405
isThemeLight={isThemeLight}
402-
selectValue={flexAlign}
406+
selectValue={displayMode}
403407
handleChange={handleChange}
404408
title="Display:"
405409
name="display"
@@ -415,7 +419,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
415419
<FormSelector
416420
classes={classes}
417421
isThemeLight={isThemeLight}
418-
selectValue={flexAlign}
422+
selectValue={flexDir}
419423
handleChange={handleChange}
420424
title="Flex direction:"
421425
name="flexdir"
@@ -428,7 +432,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
428432
<FormSelector
429433
classes={classes}
430434
isThemeLight={isThemeLight}
431-
selectValue={flexAlign}
435+
selectValue={flexJustify}
432436
handleChange={handleChange}
433437
title="Justify content:"
434438
name="flexjust"

‎app/src/helperFunctions/generateCode.ts

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const generateUnformattedCode = (
4545
let providers: string = '';
4646
let context: string = '';
4747
let links: boolean = false;
48+
let images: boolean = false;
4849
const isRoot = rootComponents.includes(componentId);
4950
let importReactRouter = false;
5051
// returns an array of objects which may include components, html elements, and/or route links
@@ -75,15 +76,21 @@ const generateUnformattedCode = (
7576
referencedHTML.tag === 'ol' ||
7677
referencedHTML.tag === 'menu' ||
7778
referencedHTML.tag === 'li' ||
78-
referencedHTML.tag === 'LinkTo' ||
79+
referencedHTML.tag === 'Link' ||
7980
referencedHTML.tag === 'Switch' ||
80-
referencedHTML.tag === 'Route'
81+
referencedHTML.tag === 'Route' ||
82+
referencedHTML.tag === 'Image'
8183
) {
8284
child.children = getEnrichedChildren(child);
8385
}
86+
8487
// when we see a Switch or LinkTo, import React Router
85-
if (referencedHTML.tag === 'Switch' || referencedHTML.tag === 'LinkTo')
88+
if (referencedHTML.tag === 'Switch' || (referencedHTML.tag === 'Link' && projectType === 'Classic React'))
8689
importReactRouter = true;
90+
else if(referencedHTML.tag === 'Link')
91+
links = true;
92+
if(referencedHTML.tag === 'Image')
93+
images = true;
8794
return child;
8895
} else if (child.type === 'Route Link') {
8996
links = true;
@@ -163,13 +170,20 @@ const generateUnformattedCode = (
163170
return `${levelSpacer(level, 5)}<${childElement.tag} href=${activeLink} ${elementTagDetails(childElement)}>${innerText}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
164171
} else if (childElement.tag === 'input') {
165172
return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}></${childElement.tag}>${levelSpacer(2, (3 + level))}`;
166-
} else if (childElement.tag === 'LinkTo') {
167-
return `${levelSpacer(level, 5)}<Link to=${activeLink}${elementTagDetails(childElement)}>${innerText}
168-
${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}
173+
} else if (childElement.tag === 'Link' && projectType === 'Classic React') {
174+
return `${levelSpacer(level, 5)}<Link to=${activeLink}${elementTagDetails(childElement)}>
175+
${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}${innerText}
176+
${tabSpacer(level - 1)}</Link>${levelSpacer(2, (3 + level))}`;
177+
} else if (childElement.tag === 'Link' && projectType === 'Next.js') {
178+
return `${levelSpacer(level, 5)}<Link href=${activeLink}${elementTagDetails(childElement)}>
179+
${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}<a>${innerText}</a>
169180
${tabSpacer(level - 1)}</Link>${levelSpacer(2, (3 + level))}`;
170-
} else if (nestable) {
181+
} else if (childElement.tag === 'Image') {
182+
return `${levelSpacer(level, 5)}<${childElement.tag} src=${activeLink} ${elementTagDetails(childElement)}/>`;
183+
} else if (nestable) {
171184
const routePath = (childElement.tag === 'Route') ? (' ' + 'exact path=' + activeLink) : '';
172-
return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}${routePath}>${innerText}
185+
return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}${routePath}>
186+
${tabSpacer(level)}${innerText}
173187
${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}
174188
${tabSpacer(level - 1)}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
175189
} else if (childElement.tag !== 'separator') {
@@ -294,6 +308,8 @@ const generateUnformattedCode = (
294308
${importsMapped}
295309
import Head from 'next/head'
296310
${links ? `import Link from 'next/link'` : ``}
311+
${images ? `import Image from 'next/link'` : ``}
312+
297313
const ${currComponent.name} = (props): JSX.Element => {
298314
const [value, setValue] = useState<any | undefined>("INITIAL VALUE");
299315
return (

‎app/src/reducers/componentReducer.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -395,7 +395,11 @@ const reducer = (state: State, action: Action) => {
395395
if (childId < 1000) {
396396
// makes separators not selectable
397397
const canvasFocus = { ...state.canvasFocus, componentId, childId };
398-
return { ...state, canvasFocus };
398+
//makes it so the code preview will update when clicking on a new component
399+
const components = state.components.map(element => {
400+
return Object.assign({}, element);
401+
});
402+
return { ...state, components, canvasFocus };
399403
}
400404
return { ...state };
401405
}

0 commit comments

Comments
 (0)