Skip to content

Commit fa121e6

Browse files
Evan-CrewsEvan-Crews
authored
Merge pull request #3 from oslabs-beta/renderNextjs
Calvin, Katrina, Yuanji, Evan, Miko - added Next.js Image & Link Component
2 parents 934c76a + f31e4b8 commit fa121e6

File tree

6 files changed

+127
-50
lines changed

6 files changed

+127
-50
lines changed

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

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ Hook state:
1717
*/
1818
// Extracted the drag and drop functionality from HTMLPanel to make a modular component that can hang wherever the future designers may choose.
1919
const DragDropPanel = (props): JSX.Element => {
20-
const [state, dispatch] = useContext(StateContext);
21-
const {isThemeLight} = props;
20+
const [state, dispatch] = useContext(StateContext);
21+
const { isThemeLight } = props;
2222

2323
const handleDelete = (id: number): void => {
2424
dispatch({
@@ -33,27 +33,43 @@ const DragDropPanel = (props): JSX.Element => {
3333
<div className="HTMLItems">
3434
<div id="HTMLItemsTopHalf">
3535
<Grid
36-
id="HTMLItemsGrid"
37-
>
38-
<h3>HTML ELEMENTS</h3>
39-
{htmlTypesToRender.map(option => {
40-
if(option.id !== 17 && option.id !== 18) {
41-
return (
42-
<HTMLItem
43-
name={option.name}
44-
key={`html-${option.name}`}
45-
id={option.id}
46-
Icon={option.icon}
47-
handleDelete={handleDelete}
48-
isThemeLight={isThemeLight}
49-
/>
50-
);
51-
}
36+
id="HTMLItemsGrid"
37+
>
38+
<h3>HTML ELEMENTS</h3>
39+
{htmlTypesToRender.map(option => {
40+
if (![17, 18, 19, 20].includes(option.id)) {
41+
return (
42+
<HTMLItem
43+
name={option.name}
44+
key={`html-${option.name}`}
45+
id={option.id}
46+
Icon={option.icon}
47+
handleDelete={handleDelete}
48+
isThemeLight={isThemeLight}
49+
/>
50+
);
51+
}
52+
53+
})}
54+
{state.projectType === "Classic React" ? <h3>REACT ROUTER</h3> : null}
55+
{htmlTypesToRender.map(option => {
56+
if ((option.id === 17 || option.id === 18) && state.projectType === "Classic React") {
57+
return (
58+
<HTMLItem
59+
name={option.name}
60+
key={`html-${option.name}`}
61+
id={option.id}
62+
Icon={option.icon}
63+
handleDelete={handleDelete}
64+
isThemeLight={isThemeLight}
65+
/>
66+
);
67+
}
68+
})}
5269

53-
})}
54-
<h3>REACT ROUTER</h3>
70+
{state.projectType === "Next.js" ? <h3>Next.js</h3> : null}
5571
{htmlTypesToRender.map(option => {
56-
if(option.id === 17 || option.id === 18) {
72+
if ((option.id === 19 || option.id === 20) && state.projectType === "Next.js") {
5773
return (
5874
<HTMLItem
5975
name={option.name}
@@ -63,10 +79,10 @@ const DragDropPanel = (props): JSX.Element => {
6379
handleDelete={handleDelete}
6480
isThemeLight={isThemeLight}
6581
/>
66-
);
82+
);
6783
}
68-
})}
69-
</Grid>
84+
})}
85+
</Grid>
7086
</div>
7187
</div>
7288
);

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -119,21 +119,22 @@ const HTMLItem : React.FC<{
119119
// updated the id's to reflect the new element types input and label
120120
return ( // HTML Elements
121121
<Grid item xs={5} key={`html-g${name}`}>
122-
{ id <= 18 &&
123-
<div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
124-
<h3>{name}</h3>
125-
</div>}
126-
{id > 18 &&
127-
<span id="customHTMLElement">
128-
<div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
129-
<h3>{name}</h3>
130-
</div>
131-
<button id="newElement" style={{color: isThemeLight ? '#186BB4' : 'white' }} onClick={() => deleteAllInstances(id)} >X</button>
132-
</span>
122+
{ id <= 20 &&
123+
<div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
124+
<h3>{name}</h3>
125+
</div>
126+
}
127+
{ id > 20 &&
128+
<span id="customHTMLElement">
129+
<div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
130+
<h3>{name}</h3>
131+
</div>
132+
<button id="newElement" style={{color: isThemeLight ? '#186BB4' : 'white' }} onClick={() => deleteAllInstances(id)} >X</button>
133+
</span>
133134
}
134135
{modal}
135136
</Grid>
136137
);
137138
}
138139

139-
export default HTMLItem;
140+
export default HTMLItem;

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { AddRoutes } from '../../interfaces/Interfaces'
2+
import React, { useContext } from 'react';
3+
import StateContext from '../../context/context';
4+
import FormControl from '@material-ui/core/FormControl';
5+
import MenuItem from '@material-ui/core/MenuItem';
6+
import Select from '@material-ui/core/Select';
7+
8+
9+
function AddLink({id}: AddRoutes) {
10+
const [, dispatch] = useContext(StateContext);
11+
12+
const handleClick = (id) => {
13+
dispatch({
14+
type: 'ADD CHILD',
15+
payload: {
16+
type: 'HTML Element',
17+
typeId: 19,
18+
childId: id // this is the id of the parent to attach it to
19+
}
20+
});
21+
}
22+
23+
return (
24+
<div style={{ padding: '1px', float: 'right' }}>
25+
<FormControl size='small'>
26+
<Select
27+
variant="outlined"
28+
>
29+
<MenuItem>Classic React</MenuItem>
30+
<MenuItem>Gatsby.js</MenuItem>
31+
<MenuItem>Next.js</MenuItem>
32+
</Select>
33+
</FormControl>
34+
</div>
35+
);
36+
}
37+
38+
export default AddLink;

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

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useContext, useEffect, useRef } from 'react';
2-
import { ChildElement, HTMLType} from '../../interfaces/Interfaces';
2+
import { ChildElement, HTMLType } from '../../interfaces/Interfaces';
33
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
44
import { ItemTypes } from '../../constants/ItemTypes';
55
import StateContext from '../../context/context';
@@ -10,6 +10,7 @@ import Annotation from './Annotation'
1010
import validateNewParent from '../../helperFunctions/changePositionValidation'
1111
import componentNest from '../../helperFunctions/componentNestValidation'
1212
import AddRoute from './AddRoute';
13+
import AddLink from './AddLink';
1314

1415
function DirectChildHTMLNestable({
1516
childId,
@@ -24,14 +25,14 @@ function DirectChildHTMLNestable({
2425
const [state, dispatch] = useContext(StateContext);
2526
const ref = useRef(null);
2627

27-
// takes a snapshot of state to be used in UNDO and REDO cases. snapShotFunc is also invoked in Canvas.tsx
28-
const snapShotFunc = () => {
29-
//makes a deep clone of state
30-
const deepCopiedState = JSON.parse(JSON.stringify(state));
31-
const focusIndex = state.canvasFocus.componentId - 1;
32-
//pushes the last user action on the canvas into the past array of Component
33-
state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
34-
};
28+
// takes a snapshot of state to be used in UNDO and REDO cases. snapShotFunc is also invoked in Canvas.tsx
29+
const snapShotFunc = () => {
30+
//makes a deep clone of state
31+
const deepCopiedState = JSON.parse(JSON.stringify(state));
32+
const focusIndex = state.canvasFocus.componentId - 1;
33+
//pushes the last user action on the canvas into the past array of Component
34+
state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
35+
};
3536

3637
// find the HTML element corresponding with this instance of an HTML element
3738
// find the current component to render on the canvas
@@ -48,7 +49,7 @@ const snapShotFunc = () => {
4849
childId: childId,
4950
instanceType: type,
5051
instanceTypeId: typeId,
51-
name: name
52+
name: name
5253
},
5354
canDrag: HTMLType.id !== 1000, // dragging not permitted if element is separator
5455
collect: (monitor: any) => {
@@ -138,6 +139,9 @@ const snapShotFunc = () => {
138139
if (typeId === 17) {
139140
routeButton.push(<AddRoute id={childId} name={name} />);
140141
}
142+
if (typeId === 19) {
143+
routeButton.push(<AddLink id={childId} name={name} />);
144+
}
141145

142146
return (
143147
<div onClick={onClickHandler} style={combinedStyle} ref={ref} id={`canv${childId}`}>

‎app/src/context/HTMLTypes.tsx

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const HTMLTypes: HTMLType[] = [
2323
id: 1000,
2424
tag: 'separator',
2525
name: 'separator',
26-
style: { border: 'none'},
26+
style: { border: 'none' },
2727
placeHolderShort: '',
2828
placeHolderLong: '',
2929
icon: ''
@@ -180,6 +180,24 @@ const HTMLTypes: HTMLType[] = [
180180
placeHolderShort: 'LinkTo',
181181
placeHolderLong: '',
182182
icon: ListIcon
183-
}
183+
},
184+
{
185+
id: 19,
186+
tag: 'LinkHref',
187+
name: 'LinkHref',
188+
style: {},
189+
placeHolderShort: 'LinkHref',
190+
placeHolderLong: '',
191+
icon: ListIcon
192+
},
193+
{
194+
id: 20,
195+
tag: 'Image',
196+
name: 'Image',
197+
style: {},
198+
placeHolderShort: 'Image',
199+
placeHolderLong: '',
200+
icon: ListIcon,
201+
},
184202
];
185203
export default HTMLTypes;

‎app/src/helperFunctions/renderChildren.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const renderChildren = (children: ChildElement[]) => {
3434
}
3535
// ommitted orderedlists, unorderedlists, and menus, ommitted li items as non-nestable types because they can be nested within.
3636
// child is a non-nestable type of HTML element (everything except for divs and forms)
37-
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) {
37+
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) {
3838
return (
3939
<DirectChildHTML
4040
childId={childId}
@@ -48,7 +48,7 @@ const renderChildren = (children: ChildElement[]) => {
4848
}
4949
// Added Orderedlists, Unorderedlists, and Menus, changed lists to nestable because they are nestable.
5050
// child is a nestable type of HTML element (divs and forms)
51-
else if (type === 'HTML Element' && (typeId === 11 || typeId === 2 || typeId === 3 || typeId === 14 || typeId === 15 || typeId === 16 || typeId === 17 || typeId === 18 || typeId === -1)) {
51+
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)) {
5252
return (
5353
<DirectChildHTMLNestable
5454
childId={childId}

0 commit comments

Comments
 (0)