Skip to content

Commit 6221311

Browse files
wang9huwang9hu
authored
Merge pull request #8 from oslabs-beta/lillian/updating
Lillian/updating
2 parents 9509f68 + 444b64b commit 6221311

15 files changed

+113
-60
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const CodePreview: React.FC<{
3838

3939
const [state] = useContext(StateContext);
4040
const [, setDivHeight] = useState(0);
41+
const compontents = state.components;
4142
let currentComponent = state.components.find(
4243
(elem: Component) => elem.id === state.canvasFocus.componentId
4344
);
@@ -58,7 +59,7 @@ const CodePreview: React.FC<{
5859
type: 'CODE_PREVIEW_INPUT',
5960
payload: currentComponent.code
6061
});
61-
}, [currentComponent]);
62+
}, [currentComponent, compontents]); // Lillian added another dependency here to utilize useEffect
6263

6364
/**
6465
* Handler thats listens to changes in code editor

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ function Annotation({ id, name, annotations }: Annotations) {
5050
}
5151
}
5252
}
53-
console.log(arrIndex);
54-
console.log('arrOfAllChildIDs: ', arrOfAllChildIDs);
53+
// console.log(arrIndex);
54+
// console.log('arrOfAllChildIDs: ', arrOfAllChildIDs);
5555
};
5656
// ---------------------------------------------- NEW CODE for DELETE BUTTONS (end) ---------------------------------------
5757

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -181,11 +181,8 @@ function Canvas(props): JSX.Element {
181181
backgroundColor: isOver ? '#FAFED1' : '#FBFBFB',
182182
border: '1px solid #FBFBF2',
183183
borderStyle: isOver ? 'dotted' : 'solid',
184-
userSelect: 'none',
185184
aspectRatio: 'auto 774 / 1200',
186185
boxSizing: 'border-box',
187-
// width: '100vw',
188-
// height: '100vh'
189186
};
190187

191188
const darkCanvasStyle = {
@@ -202,7 +199,9 @@ function Canvas(props): JSX.Element {
202199
// const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
203200
const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
204201
const darkCombinedCanvasStyle = combineStyles(darkCanvasStyle, currentComponent.style);
205-
// console.log('CURRENTCOMPONENT children: ', currentComponent.children, 'CURRCOMPONENT STYLE: ', currentComponent.style);
202+
// console.log('CURRENTCOMPONENT.CHILDREN : ', currentComponent.children)
203+
// console.log('STATE: ', state.components);
204+
// console.log('CURRENTCOMPONENT : ', currentComponent);
206205
return (
207206
<div className={'componentContainer'} ref={drop} style={props.isThemeLight ? canvasStyle : darkCombinedCanvasStyle} onClick={onClickHandler}>
208207
{renderChildren(currentComponent.children)}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ 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);
6162
const component: string = event.data?.split('/').at(-1);
6263
const componentId =
6364
component &&

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
import { useDrag } from 'react-dnd';
77
import { ItemTypes } from '../../constants/ItemTypes';
88
import StateContext from '../../context/context';
9+
import Annotation from './Annotation'
910
import { combineStyles } from '../../helperFunctions/combineStyles';
1011
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
1112

@@ -66,7 +67,14 @@ function DirectChildComponent({ childId, type, typeId, style, name }: ChildEleme
6667
style={combinedStyle}
6768
ref={drag}
6869
>
69-
<strong>{name}</strong>
70+
71+
<strong>{name + ' cupcake'}</strong>
72+
<Annotation
73+
id={childId}
74+
name={name}
75+
annotations={annotations}
76+
/>
77+
7078
</div>
7179
);
7280
}

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

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,20 +62,41 @@ function DirectChildHTML({
6262
: '1px solid grey'
6363
};
6464

65+
// if (state.components[0].children)
66+
// console.log(globalDefaultStyle);
6567

6668
const combinedStyle = combineStyles(
6769
combineStyles(combineStyles(globalDefaultStyle, HTMLType.style), style),
6870
interactiveStyle
6971
);
7072

73+
// state.components.forEach(component => {
74+
// // console.log('state.components : ', state.components)
75+
// let color = 'rgb(63, 154,';
76+
// let counter = -10;
77+
// component.children?.forEach(obj => {
78+
// // if (obj['childId'] === childId) {
79+
// counter += 10;
80+
// color = color + counter.toString() + ')'
81+
// combinedStyle['backgroundColor'] = color;
82+
// // } else {
83+
// // combinedStyle['backgroundColor'] = isOver ? 'yellow' : globalDefaultStyle['backgroundColor'];
84+
// // }
85+
// })
86+
// });
87+
88+
console.log(name[0].toLowerCase() + name.slice(1))
89+
7190
return (
7291
<div onClick={onClickHandler} style={combinedStyle} ref={drag} id={`canv${childId}`}>
73-
<strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>
74-
<Annotation
75-
id={childId}
76-
name={name}
77-
annotations={annotations}
78-
/>
92+
<span>
93+
<strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort + ' nonNestable'}</strong>
94+
<Annotation
95+
id={childId}
96+
name={name[0].toLowerCase() + name.slice(1)}
97+
annotations={annotations}
98+
/>
99+
</span>
79100
</div>
80101
);
81102
}

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

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import StateContext from '../../context/context';
66
import { combineStyles } from '../../helperFunctions/combineStyles';
77
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
88
import renderChildren from '../../helperFunctions/renderChildren';
9+
import adjustComponentColor from '../../helperFunctions/adjustComponentColor';
910
import Annotation from './Annotation'
1011
import validateNewParent from '../../helperFunctions/changePositionValidation'
1112
import componentNest from '../../helperFunctions/componentNestValidation'
@@ -130,13 +131,59 @@ function DirectChildHTMLNestable({
130131
: '1px solid grey',
131132
};
132133

133-
defaultNestableStyle['backgroundColor'] = isOver ? 'yellow' : 'rgba(0, 0, 255, 0.0)';
134+
// incoporated this logic into my nesting check below caused i new error
135+
// if (isOver) defaultNestableStyle['yellow'];
136+
// defaultNestableStyle['backgroundColor'] = isOver ? 'yellow' : defaultNestableStyle['backgroundColor'];//globalDefaultStyle['backgroundColor']
137+
138+
// if component is not in APP children array, it's a nested component, and should have a differend background color
139+
// defaultNestableStyle['backgroundColor'] = state.components[0].children.includes(childId) ? 'blue' : globalDefaultStyle['backgroundColor'];
140+
141+
142+
// console.log('APP DIRECT KIDS: ', state.components[0].children);
134143

135144
const combinedStyle = combineStyles(
136145
combineStyles(combineStyles(defaultNestableStyle, HTMLType.style), style),
137146
interactiveStyle
138147
);
139148

149+
// WHAT THE CHILDREN ARRAY LOOKS LIKE - LW
150+
// ARRAY OF OBJS
151+
// {type: 'HTML Element', typeId: 1000, name: 'separator', childId: 1000, style: {…}, …}
152+
// tried adding a conditional to only run this reassignment if state.components[0]['name'] === 'App' DON'T WORK
153+
154+
// state.components[0].children?.forEach(obj => {
155+
// // console.log('childId : ', obj['childId'], 'childId : ', childId);
156+
// if (obj['childId'] === childId) {
157+
// combinedStyle['backgroundColor'] = isOver ? 'yellow' : 'grey';
158+
// } else {
159+
// combinedStyle['backgroundColor'] = isOver ? 'yellow' : globalDefaultStyle['backgroundColor'];
160+
// }
161+
// });
162+
163+
164+
// trying to render components with diff background colors based on how deeply nested they were - doesnt' work as on now
165+
// state.components.forEach(component => {
166+
// // console.log('state.components : ', state.components)
167+
// let color = 'rgb(63, 154,';
168+
// let counter = -10;
169+
// component.children?.forEach(obj => {
170+
// // if (obj['childId'] === childId) {
171+
// counter += 10;
172+
// color = color + counter.toString() + ')'
173+
// combinedStyle['backgroundColor'] = isOver ? 'yellow' : color;
174+
// } else {
175+
// combinedStyle['backgroundColor'] = isOver ? 'yellow' : globalDefaultStyle['backgroundColor'];
176+
// }
177+
// })
178+
// });
179+
180+
181+
// console.log('state: ', state);
182+
// helper func i created below does not work now because it cannot reference combined style from its file. - LW
183+
// adjustComponentColor(children, childId, state);
184+
185+
//console.log('combinedStyle : ', combinedStyle);
186+
140187
drag(drop(ref));
141188

142189
const routeButton = [];
@@ -150,7 +197,7 @@ function DirectChildHTMLNestable({
150197
return (
151198
<div onClick={onClickHandler} style={combinedStyle} ref={ref} id={`canv${childId}`}>
152199
<span>
153-
<strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>
200+
<strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort + ' nestable'}</strong>
154201
<strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}</strong>
155202
{routeButton}
156203
<Annotation

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ function IndirectChild({ style, children, placeHolder, linkId, childId, name, an
2424
.name;
2525
combinedStyle = combineStyles(combinedStyle, { color: 'blue' });
2626
}
27+
28+
2729
return (
2830
<div style={combinedStyle}>
2931
{` ( ${childId} )`}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export default function LoginButton() {
3232
if (state.isLoggedIn) {
3333
return (
3434
<Button
35+
id="navbarButton"
3536
variant="contained"
3637
color="secondary"
3738
className="navbarButton"

‎app/src/components/top/NavBar.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme: Theme) =>
5353
width: '100%'
5454
},
5555
menuButton: {
56-
marginRight: theme.spacing(2),
56+
marginRight: theme.spacing(1),
5757
color: 'white'
5858
},
5959
title: {
@@ -188,12 +188,13 @@ const NavBar = (props) => {
188188
{/* ==================================Dashboard Button================================================== */}
189189
{state.isLoggedIn ? (
190190
<Link to="/dashboard" style={{ textDecoration: 'none' }}>
191-
<Button
191+
<Button
192192
variant="contained"
193193
color="secondary"
194194
style={{ minWidth: '137.69px' }}
195195
className="navbarButton"
196196
endIcon={<DashboardIcon />}
197+
id="navbarButton"
197198
>
198199
Dashboard
199200
</Button>
@@ -257,16 +258,17 @@ const NavBar = (props) => {
257258
onClose={handleClose}
258259
>
259260
<StyledMenuItem
261+
id="navbarButton"
260262
className={classes.manageProject}
261263
onClick={handleClose}
262264
>
263-
<SaveProjectButton />
265+
<SaveProjectButton/>
264266
</StyledMenuItem>
265267
<StyledMenuItem
266268
className={classes.manageProject}
267269
onClick={handleClose}
268270
>
269-
<ProjectsFolder />
271+
<ProjectsFolder/>
270272
</StyledMenuItem>
271273
<StyledMenuItem
272274
className={classes.manageProject}

‎app/src/helperFunctions/generateCode.ts

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const generateUnformattedCode = (
3737
rootComponents: number[],
3838
projectType: string,
3939
HTMLTypes: HTMLType[]
40-
) => {
40+
) => {
4141
const components = [...comps];
4242
// find the component that we're going to generate code for
4343
const currComponent = components.find(elem => elem.id === componentId);
@@ -288,6 +288,8 @@ const generateUnformattedCode = (
288288
};
289289
// function to properly incorporate the user created state that is stored in the application state
290290
const writeStateProps = (stateArray: any) => {
291+
console.log('currComponent: ', currComponent);
292+
console.log('StateArray: ', stateArray)
291293
let stateToRender = '';
292294
for (const element of stateArray) {
293295
stateToRender += levelSpacer(2, 2) + element + ';';
@@ -319,39 +321,6 @@ const generateUnformattedCode = (
319321
return state;
320322
};
321323

322-
// // Generate import --- FROM PREVIOUS ITERATION BEFORE 12.0, NOT WORKING -> CONSIDER DELETING
323-
// let importContext = '';
324-
// if (currComponent.useContext) {
325-
// for (const providerId of Object.keys(currComponent.useContext)) {
326-
// const providerComponent = components[parseInt(providerId) - 1];
327-
// importContext += `import ${providerComponent.name}Context from './${providerComponent.name}.tsx'\n \t\t`;
328-
// }
329-
// }
330-
// if (currComponent.useContext) {
331-
// for (const providerId of Object.keys(currComponent.useContext)) {
332-
// const statesFromProvider =
333-
// currComponent.useContext[parseInt(providerId)].statesFromProvider; //{1: {Set, compLink, compText}, 2 : {}...}
334-
// const providerComponent = components[parseInt(providerId) - 1];
335-
// providers +=
336-
// 'const ' +
337-
// providerComponent.name.toLowerCase() +
338-
// 'Context = useContext(' +
339-
// providerComponent.name +
340-
// 'Context);\n \t\t';
341-
// for (let i = 0; i < providerComponent.stateProps.length; i++) {
342-
// if (statesFromProvider.has(providerComponent.stateProps[i].id)) {
343-
// context +=
344-
// 'const ' +
345-
// providerComponent.stateProps[i].key +
346-
// ' = ' +
347-
// providerComponent.name.toLowerCase() +
348-
// 'Context.' +
349-
// providerComponent.stateProps[i].key +
350-
// '; \n \t\t';
351-
// }
352-
// }
353-
// }
354-
// }
355324
// create final component code. component code differs between classic react, next.js, gatsby.js
356325
// classic react code
357326
if (projectType === 'Classic React') {

‎app/src/helperFunctions/renderChildren.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import StateContext from '../context/context';
1313
// there are four types of direct children that can be rendered on the screen
1414
const renderChildren = (children: ChildElement[]) => {
1515
const [state, dispatch] = useContext(StateContext);
16+
1617
return children.map((child: ChildElement, i: number) => {
1718
const { type, style, childId, children, attributes, name, annotations} = child;
1819
let {typeId} = child;
@@ -33,8 +34,7 @@ const renderChildren = (children: ChildElement[]) => {
3334
/>
3435
);
3536
}
36-
// ommitted orderedlists, unorderedlists, and menus, ommitted li items as non-nestable types because they can be nested within.
37-
// child is a non-nestable type of HTML element (everything except for divs and forms)
37+
// child is a non-nestable type of HTML element (aka NOT divs, forms, OrderedLists, UnorderedLists, menus)
3838
else if (type === 'HTML Element' && typeId !== 11 && typeId !== 1000 && typeId !== 2 && typeId !== 3 && typeId !== 14 && typeId !== 15 && typeId !== 16 && typeId !== 17 && typeId !== 18 && typeId !== -1 && typeId !== 19) {
3939
return (
4040
<DirectChildHTML
@@ -47,8 +47,7 @@ const renderChildren = (children: ChildElement[]) => {
4747
/>
4848
);
4949
}
50-
// Added Orderedlists, Unorderedlists, and Menus, changed lists to nestable because they are nestable.
51-
// child is a nestable type of HTML element (divs and forms)
50+
// child is a nestable type of HTML element (divs, forms, OrderedLists, UnorderedLists, menus)
5251
else if (type === 'HTML Element' && (typeId === 11 || typeId === 2 || typeId === 3 || typeId === 14 || typeId === 15 || typeId === 16 || typeId === 17 || typeId === 18 || typeId === -1 || typeId === 19)) {
5352
if((typeId === 18 || typeId === 19) && state.projectType === 'Classic React') typeId = 18;
5453
if((typeId === 17 || typeId === -1) && state.projectType === 'Next.js') return renderChildren(children);

‎app/src/public/styles/globalDefaultStyles.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const globalDefaultStyle: Object = {
1212
fontFamily: 'Helvetica Neue',
1313
maxWidth: 'fit-content',
1414
minWidth: '250px',
15+
backgroundColor: 'white', // experiment to see what is inherited
1516
};
1617

1718
export default globalDefaultStyle;

‎app/src/public/styles/style.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -508,6 +508,8 @@ NAVBAR
508508
#customized-menu {
509509
width: 16%;
510510
}
511+
512+
511513
/*
512514
/////////////////////////////////////////////////
513515
ANNOTATIONS

‎app/src/tree/TreeChart.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import StateContext from '../context/context';
66
import { element } from 'prop-types';
77

88
function usePrevious(value) {
9-
const ref = useRef();
9+
const ref = useRef(); // creates a ref obj w/ current: value
1010
useEffect(() => {
1111
ref.current = value;
1212
});
@@ -141,7 +141,7 @@ function TreeChart({ data }) { // data is components from state - passed in from
141141
.attr('opacity', 1)
142142
.attr('transform', `translate(${xPosition}, 0)`);
143143

144-
}, [data, dimensions, previouslyRenderedData, canvasId]);
144+
}, [state.components, dimensions, previouslyRenderedData, canvasId]);
145145
const treeStyles = {
146146
height: '100%',
147147
width: `100%`,

0 commit comments

Comments
 (0)