Skip to content

Commit 65fe34e

Browse files
aw2934aw2934
committed
merge with other changes to reposition branch
2 parents a14137c + fe0fc8c commit 65fe34e

File tree

14 files changed

+85
-255
lines changed

14 files changed

+85
-255
lines changed

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ import TextField from '@material-ui/core/TextField';
77
import Button from '@material-ui/core/Button';
88
import FormControlLabel from '@material-ui/core/FormControlLabel';
99
import Checkbox from '@material-ui/core/Checkbox';
10-
import MenuItem from '@material-ui/core/MenuItem';
11-
1210
import { makeStyles } from '@material-ui/core/styles';
1311

1412
// The component panel section of the left panel displays all components and has the ability to add new components
@@ -61,7 +59,7 @@ const ComponentPanel = (): JSX.Element => {
6159
};
6260

6361
// "Root" components are not draggable into the main canvas
64-
// If next.js mode is on, root components will be separate pages
62+
// If next.js or Gatsby.js mode is on, root components will be separate pages
6563
const toggleRootStatus = (e: React.ChangeEvent<HTMLInputElement>) => {
6664
setIsRoot(isRoot ? false : true);
6765
};
@@ -143,7 +141,7 @@ const ComponentPanel = (): JSX.Element => {
143141
onChange={toggleRootStatus}
144142
/>
145143
}
146-
label={state.projectType === 'Next.js' ? 'Page' : 'Root'} // name varies depending on mode
144+
label={state.projectType === 'Next.js' || state.projectType === 'Gatsby.js' ? 'Page' : 'Root'} // name varies depending on mode
147145
className={classes.rootCheckBoxLabel}
148146
labelPlacement="top"
149147
/>
@@ -162,7 +160,7 @@ const ComponentPanel = (): JSX.Element => {
162160
{/* Display all root components */}
163161
<div className={classes.panelWrapperList}>
164162
{/* Heading just below ADD button */}
165-
<h4>{state.projectType === 'Next.js' ? 'Pages' : 'Root components'}</h4>
163+
<h4>{state.projectType === 'Next.js' || state.projectType === 'Gatsby.js' ? 'Pages' : 'Root components'}</h4>
166164
<Grid container direction="row" justify="center" alignItems="center">
167165
{state.components
168166
.filter(comp => state.rootComponents.includes(comp.id))
@@ -195,10 +193,10 @@ const ComponentPanel = (): JSX.Element => {
195193
);
196194
})}
197195
</Grid>
198-
{/* Display navigation components - (only applies to next.js which has routing built in) */}
199-
{state.projectType === 'Next.js' ? (
196+
{/* Display routing components - (only applies to next.js or gatsby.js which has routing built in) */}
197+
{state.projectType === 'Next.js' || state.projectType === 'Gatsby.js'? (
200198
<React.Fragment>
201-
<h4>Navigation</h4>
199+
<h4>Routing</h4>
202200
<Grid
203201
container
204202
direction="row"

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,6 @@ const ComponentPanelItem: React.FC<{
5454
},
5555
canDrag: !root && !isFocus, // dragging not permitted if component is root component or current component
5656
collect: (monitor: any) => ({
57-
// not clear !! is needed on the next line -- monitor.isDragging() already returns a boolean, and quick testing w/out still works
58-
// on the other hand, commenting out this line of code entirely does not appear to change anything
5957
isDragging: !!monitor.isDragging(), // !! converts an object to a boolean (i.e., if falsy, becomes false => !!0 === false)
6058
}),
6159
});

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import React, { useMemo, useContext, useRef, Children } from 'react';
1+
import React, { useContext, useRef, } from 'react';
22
import {
3-
State,
43
Component,
54
ChildElement,
65
HTMLType
76
} from '../../interfaces/Interfaces';
8-
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
7+
import { useDrag } from 'react-dnd';
98
import { ItemTypes } from '../../constants/ItemTypes';
109
import StateContext from '../../context/context';
1110
import { combineStyles } from '../../helperFunctions/combineStyles';
@@ -14,7 +13,6 @@ import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
1413

1514
function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
1615
const [state, dispatch] = useContext(StateContext);
17-
const ref = useRef(null);
1816

1917
// find the top-level component corresponding to this instance of the component
2018
// find the current component to render on the canvas

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1-
import React, { useMemo, useContext, useRef } from 'react';
1+
import React, { useContext, useRef } from 'react';
22
import {
3-
State,
4-
Component,
53
ChildElement,
64
HTMLType
75
} from '../../interfaces/Interfaces';
8-
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
6+
import { useDrag } from 'react-dnd';
97
import { ItemTypes } from '../../constants/ItemTypes';
108
import StateContext from '../../context/context';
119
import { combineStyles } from '../../helperFunctions/combineStyles';
12-
import IndirectChild from './IndirectChild';
1310
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
1411

1512
function DirectChildHTML({

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,8 @@ function DirectChildHTMLNestable({
9595
// priority order is 1) style directly set for this child (style), 2) style of the referenced HTML element, and 3) default styling
9696
const defaultNestableStyle = { ...globalDefaultStyle };
9797
const separatorStyle = {
98-
// // height? padding?
99-
// padding: '5px',
100-
// margin: '5px',
98+
padding: '5px 10px',
99+
margin: '1px 10px',
101100
};
102101

103102
defaultNestableStyle['backgroundColor'] = isOver ? 'yellow' : 'white';

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,8 +198,9 @@ const ProjectManager = () => {
198198
value={state.projectType}
199199
onChange={handleProjectChange}
200200
>
201-
<MenuItem value={'Next.js'}>Next.js</MenuItem>
202201
<MenuItem value={'Classic React'}>Classic React</MenuItem>
202+
<MenuItem value={'Gatsby.js'}>Gatsby.js</MenuItem>
203+
<MenuItem value={'Next.js'}>Next.js</MenuItem>
203204
</Select>
204205
</FormControl>
205206
</div>

‎app/src/containers/RightContainer.tsx

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React, {
33
useContext,
44
useEffect,
55
useMemo,
6-
Component
76
} from 'react';
87
import { makeStyles } from '@material-ui/core/styles';
98
import FormControl from '@material-ui/core/FormControl';
@@ -156,21 +155,6 @@ const RightContainer = (): JSX.Element => {
156155

157156
const isIndex = (): boolean => configTarget.id === 1;
158157

159-
const isChildOfPage = (): boolean => {
160-
let isChild: boolean = false;
161-
162-
// id of target we want to check
163-
const { id } = configTarget;
164-
state.components.forEach(comp => {
165-
comp.children.forEach(child => {
166-
if (child.type === 'Component' && child.typeId === id) {
167-
isChild = true;
168-
}
169-
});
170-
});
171-
return isChild;
172-
};
173-
174158
const isLinkedTo = (): boolean => {
175159
const { id } = configTarget;
176160
const pageName = state.components[id - 1].name;
@@ -221,16 +205,6 @@ const RightContainer = (): JSX.Element => {
221205
: dispatch({ type: 'DELETE PAGE', payload: { id } });
222206
};
223207

224-
// const handleDeleteReusableComponent = () => {
225-
// dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
226-
// };
227-
228-
const isReusable = (configTarget): boolean => {
229-
return state.components
230-
.filter(comp => !state.rootComponents.includes(comp.id))
231-
.some(el => el.id == configTarget.id);
232-
};
233-
234208
const handleDialogError = err => {
235209
if (err === 'index') setDeleteIndexError(true);
236210
else setDeleteComponentError(true);
@@ -548,26 +522,6 @@ const RightContainer = (): JSX.Element => {
548522
</Button>
549523
</DialogActions>
550524
</Dialog>
551-
{/* <Dialog
552-
open={deleteComponentError}
553-
onClose={handleCloseDialogError}
554-
aria-labelledby="alert-dialog-title"
555-
aria-describedby="alert-dialog-description"
556-
>
557-
<DialogTitle id="alert-dialog-title">
558-
{ErrorMessages.deleteComponentTitle}
559-
</DialogTitle>
560-
<DialogContent>
561-
<DialogContentText id="alert-dialog-description">
562-
{ErrorMessages.deleteComponentMessage}
563-
</DialogContentText>
564-
</DialogContent>
565-
<DialogActions>
566-
<Button onClick={handleCloseDialogError} color="primary">
567-
OK
568-
</Button>
569-
</DialogActions>
570-
</Dialog> */}
571525
{modal}
572526
</div>
573527
);

‎app/src/context/HTMLTypes.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ const HTMLTypes: HTMLType[] = [
2424
id: 1000,
2525
tag: 'separator',
2626
name: 'separator',
27-
style: { border: 'none' },
28-
placeHolderShort: 'separator',
29-
placeHolderLong: 'separator',
27+
style: { border: 'none'},
28+
placeHolderShort: '',
29+
placeHolderLong: '',
3030
icon: ''
3131
},
3232
{

‎app/src/context/initialState.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,12 @@ const initialState: State = {
1515
isPage: true
1616
},
1717
],
18-
projectType: 'Next.js',
18+
projectType: 'Classic React',
1919
rootComponents: [1],
2020
canvasFocus: { componentId: 1, childId: null },
2121
nextComponentId: 2,
2222
nextChildId: 1,
2323
nextTopSeparatorId: 1000,
24-
nextBottomSeparatorId: 5000,
2524
HTMLTypes
2625
};
2726

‎app/src/helperFunctions/generateCode.ts

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -116,11 +116,13 @@ const generateUnformattedCode = (
116116
return `<${child.tag}${formatStyles(child.style)}></${child.tag}>`;
117117
}
118118
}
119-
// route links are only a next.js feature. if the user creates a route link and then switches projects, generate code for a normal link instead
119+
// route links are for gastby.js and next.js feature. if the user creates a route link and then switches projects, generate code for a normal link instead
120120
else if (child.type === 'Route Link') {
121-
return projectType === 'Next.js'
122-
? `<div><Link href="/${child.name}"><a>${child.name}</a></Link></div>`
123-
: `<div><a>${child.name}</a></div>`;
121+
if (projectType === 'Next.js') {
122+
return `<div><Link href="/${child.name}"><a>${child.name}</a></Link></div>`
123+
} else if (projectType === 'Gatsby.js') {
124+
return `<div><Link to="/${child.name}">${child.name}</Link>`
125+
} else return `<div><a>${child.name}</a></div>`
124126
}
125127
})
126128
.filter(element => !!element)
@@ -144,7 +146,7 @@ const generateUnformattedCode = (
144146

145147
// import statements differ between root (pages) and regular components (components)
146148
const importsMapped =
147-
projectType === 'Next.js'
149+
projectType === 'Next.js' || projectType === 'Gatsby.js'
148150
? imports
149151
.map((comp: string) => {
150152
return isRoot
@@ -163,7 +165,7 @@ const generateUnformattedCode = (
163165

164166
// create final component code. component code differs between classic react and next.js
165167
// classic react code
166-
if (projectType !== 'Next.js') {
168+
if (projectType === 'Classic React') {
167169
return `
168170
${stateful && !classBased ? `import React, {useState} from 'react';` : ''}
169171
${classBased ? `import React, {Component} from 'react';` : ''}
@@ -202,7 +204,7 @@ const generateUnformattedCode = (
202204
`;
203205
}
204206
// next.js component code
205-
else {
207+
else if (projectType === 'Next.js') {
206208
return `
207209
import React, { useState } from 'react';
208210
${importsMapped}
@@ -229,6 +231,37 @@ const generateUnformattedCode = (
229231
);
230232
}
231233
234+
export default ${currentComponent.name};
235+
`;
236+
} else {
237+
return `
238+
import React, { useState } from 'react';
239+
import { StaticQuery, graphql } from 'gatsby';
240+
${links ? `import { Link } from 'gatsby'` : ``}
241+
242+
${importsMapped}
243+
244+
245+
const ${currentComponent.name} = (props): JSX.Element => {
246+
247+
const [value, setValue] = useState<any | undefined>("INITIAL VALUE");
248+
249+
return (
250+
<>
251+
${
252+
isRoot
253+
? `<head>
254+
<title>${currentComponent.name}</title>
255+
</head>`
256+
: ``
257+
}
258+
<div className="${currentComponent.name}" style={props.style}>
259+
${writeNestedElements(enrichedChildren)}
260+
</div>
261+
</>
262+
);
263+
}
264+
232265
export default ${currentComponent.name};
233266
`;
234267
}

‎app/src/helperFunctions/manageSeparators.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ const manageSeparators = {};
77

88
manageSeparators.nextTopSeparatorId = initialState.nextTopSeparatorId;
99

10-
manageSeparators.handleSeparators = (arr) => {
10+
manageSeparators.handleSeparators = (arr, str) => {
11+
if (str === 'delete' && arr.length === 1) {
12+
arr.splice(0, 1);
13+
}
14+
1115
for (let index = 0; index < arr.length; index++) {
1216
if (arr[index].name === 'separator' && arr[index + 1].name === 'separator') {
1317
arr.splice(index, 1); // removes extra separator from array
@@ -33,20 +37,21 @@ manageSeparators.handleSeparators = (arr) => {
3337
// check is length is > 0 or it is a nested element
3438
if (arr[index].children.length) {
3539
// recursive call if children array
36-
manageSeparators.handleSeparators(arr[index].children);
40+
(str === 'delete') ? manageSeparators.handleSeparators(arr[index].children, str) : manageSeparators.handleSeparators(arr[index].children);
3741
}
3842
}
3943
return manageSeparators.nextTopSeparatorId;
4044
};
4145

42-
manageSeparators.mergeSeparator = (arr) => {
46+
manageSeparators.mergeSeparator = (arr, index) => {
47+
console.log('mergerSeparator',arr)
4348
return arr.map((child) => {
4449
if (child.name === 'div' && child.children.length) {
45-
const divContents = manageSeparators.mergeSeparator(child.children);
50+
const divContents = manageSeparators.mergeSeparator(child.children, index);
4651
return { ...child, children: divContents }
4752
}
4853
else if (child.name === 'separator' && child.children.length) {
49-
return child.children[1];
54+
return child.children[index];
5055
}
5156
else return child;
5257
});

‎app/src/helperFunctions/renderChildren.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@ import SeparatorChild from '../components/main/SeparatorChild';
77
import RouteLink from '../components/main/RouteLink';
88
import StateContext from '../context/context';
99

10-
11-
// const findNestedChild = (childArr) => {
12-
// if (!childArr.length)
13-
// };
1410
// helper method to render all direct children of a component
1511
// direct children are clickable and draggable
1612
// direct children may also have their own indirect children (grandchildren, great-grandchildren, etc) which are not draggable and clickable

0 commit comments

Comments
 (0)