Skip to content

Commit d70a8b0

Browse files
andrewjcho84andrewjcho84
authored
Merge pull request #35 from tsully/nextrouting
Next.js routing and left panel UI improvements
2 parents 0e2c715 + 08f540e commit d70a8b0

21 files changed

+604
-320
lines changed

‎app/electron/preload.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ const { existsSync, writeFileSync, mkdirSync, writeFile } = require('fs');
55
const formatCode = require('./preloadFunctions/format');
66
const {
77
chooseAppDir,
8-
appDirChosen
8+
addAppDirChosenListener,
9+
removeAllAppDirChosenListeners
910
} = require('./preloadFunctions/chooseAppDir');
1011

1112
// Expose protected methods that allow the renderer process to use
@@ -19,7 +20,8 @@ const {
1920
contextBridge.exposeInMainWorld('api', {
2021
formatCode: formatCode,
2122
chooseAppDir: chooseAppDir,
22-
appDirChosen: appDirChosen,
23+
addAppDirChosenListener: addAppDirChosenListener,
24+
removeAllAppDirChosenListeners: removeAllAppDirChosenListeners,
2325
existsSync: existsSync,
2426
writeFileSync: writeFileSync,
2527
mkdirSync: mkdirSync,

‎app/electron/preloadFunctions/chooseAppDir.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,20 @@ const chooseAppDir = () => {
66

77
// once an app directory is chosen, the main process will send an "app_dir_selected" event
88
// when this event occurs, exucte the callback passed in by the user
9-
const appDirChosen = callback => {
9+
const addAppDirChosenListener = callback => {
1010
return ipcRenderer.on('app_dir_selected', (event, path) => {
1111
callback(path);
1212
});
1313
};
1414

15-
module.exports = { chooseAppDir, appDirChosen };
15+
// removes all listeners for the app_dir_selected event
16+
// this is important because otherwise listeners will pile up and events will trigger multiple events
17+
const removeAllAppDirChosenListeners = () => {
18+
ipcRenderer.removeAllListeners('app_dir_selected');
19+
};
20+
21+
module.exports = {
22+
chooseAppDir,
23+
addAppDirChosenListener,
24+
removeAllAppDirChosenListeners
25+
};

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

Lines changed: 1 addition & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -33,54 +33,9 @@ const BottomTabs = () => {
3333
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
3434
label="Code Preview"
3535
/>
36-
<Tab
37-
disableRipple
38-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
39-
label="Application Tree"
40-
/>
4136
</Tabs>
4237
</Box>
43-
{tab === 0 && (
44-
<CodePreview />
45-
// <div>Code Preview</div>
46-
)}
47-
{tab === 1 && (
48-
// <div
49-
// id="treeWrapper"
50-
// style={{
51-
// width: '80%',
52-
// height: '100%'
53-
// }}
54-
// ref={node => (this.treeWrapper = node)}
55-
// >
56-
// <Tree
57-
// data={[this.generateComponentTree(focusComponent.id, components)]}
58-
// separation={{ siblings: 0.3, nonSiblings: 0.3 }}
59-
// transitionDuration={0}
60-
// translate={this.state.translate}
61-
// onClick={this.handleClick}
62-
// styles={{
63-
// nodes: {
64-
// node: {
65-
// name: {
66-
// fill: '#D3D3D3',
67-
// stroke: '#D3D3D3',
68-
// strokeWidth: 1
69-
// }
70-
// },
71-
// leafNode: {
72-
// name: {
73-
// fill: '#D3D3D3',
74-
// stroke: '#D3D3D3',
75-
// strokeWidth: 1
76-
// }
77-
// }
78-
// }
79-
// }}
80-
// />
81-
// </div>
82-
<div>Tree</div>
83-
)}
38+
{tab === 0 && <CodePreview />}
8439
</div>
8540
);
8641
};

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useContext } from 'react';
22
import { stateContext } from '../../context/context';
3-
// import { format } from 'prettier';
43
import AceEditor from 'react-ace';
54
import { makeStyles } from '@material-ui/core/styles';
65
import 'ace-builds/src-noconflict/mode-javascript';

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

Lines changed: 137 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,16 @@ import ParagraphIcon from '@material-ui/icons/LocalParking';
55
import FormIcon from '@material-ui/icons/Description';
66
import Grid from '@material-ui/core/Grid';
77
import ComponentPanelItem from './ComponentPanelItem';
8+
import ComponentPanelRoutingItem from './ComponentPanelRoutingItem';
89
import TextField from '@material-ui/core/TextField';
910
import Button from '@material-ui/core/Button';
1011
import FormControlLabel from '@material-ui/core/FormControlLabel';
12+
import FormControl from '@material-ui/core/FormControl';
13+
import Checkbox from '@material-ui/core/Checkbox';
1114
import Switch from '@material-ui/core/Switch';
15+
import InputLabel from '@material-ui/core/InputLabel';
16+
import MenuItem from '@material-ui/core/MenuItem';
17+
import Select from '@material-ui/core/Select';
1218

1319
import { makeStyles } from '@material-ui/core/styles';
1420

@@ -17,16 +23,37 @@ const useStyles = makeStyles({
1723
marginTop: '15px'
1824
},
1925
inputWrapper: {
20-
height: '115px',
26+
// height: '115px',
2127
textAlign: 'center',
2228
display: 'flex',
23-
justifyContent: 'center',
24-
paddingLeft: '35px',
29+
alignItems: 'center',
30+
justifyContent: 'space-between',
31+
// paddingLeft: '35px',
2532
marginBottom: '15px'
2633
},
34+
addComponentWrapper: {
35+
border: '1px solid rgba(70,131,83)',
36+
padding: '20px',
37+
margin: '20px'
38+
},
39+
rootCheckBox: {},
40+
rootCheckBoxLabel: {
41+
color: 'white'
42+
},
43+
projectTypeWrapper: {
44+
paddingLeft: '20px',
45+
paddingRight: '20px',
46+
marginBottom: '15px',
47+
width: '100%'
48+
},
49+
projectSelector: {
50+
backgroundColor: 'rgba(255,255,255,0.15)',
51+
width: '317px',
52+
color: '#fff'
53+
},
2754
panelWrapper: {
2855
width: '100%',
29-
marginTop: '15px',
56+
marginTop: '15px'
3057
},
3158
panelWrapperList: {
3259
maxHeight: '675px',
@@ -35,6 +62,10 @@ const useStyles = makeStyles({
3562
marginLeft: '-15px',
3663
marginRight: '-15px'
3764
},
65+
panelSubheader: {
66+
textAlign: 'center',
67+
color: '#fff'
68+
},
3869
input: {
3970
color: '#fff',
4071
borderRadius: '5px',
@@ -59,16 +90,19 @@ const useStyles = makeStyles({
5990
marginLeft: '10px'
6091
},
6192
button: {
62-
fontSize: '1rem'
93+
fontSize: '1rem',
94+
height: '40px',
95+
maginTop: '10px',
96+
width: '100%',
97+
// border: '1px solid rgba(70,131,83)',
98+
backgroundColor: 'rgba(1,212,109,0.1)'
6399
},
64100
rootToggle: {
65101
color: '#01d46d',
66102
fontSize: '0.85rem'
67-
},
68-
103+
}
69104
});
70105

71-
72106
const ComponentPanel = (): JSX.Element => {
73107
const classes = useStyles();
74108
const [state, dispatch] = useContext(stateContext);
@@ -144,9 +178,14 @@ const ComponentPanel = (): JSX.Element => {
144178
resetError();
145179
};
146180

181+
const handleProjectChange = event => {
182+
const projectType = event.target.value;
183+
dispatch({ type: 'CHANGE PROJECT TYPE', payload: { projectType } });
184+
};
185+
147186
const isFocus = (targetId: Number) => {
148187
return state.canvasFocus.componentId === targetId ? true : false;
149-
}
188+
};
150189

151190
const setFocus = (targetId: Number) => {
152191
const focusTarget = state.components.filter(comp => {
@@ -159,53 +198,107 @@ const ComponentPanel = (): JSX.Element => {
159198

160199
return (
161200
<div className={classes.panelWrapper}>
162-
<div className={classes.inputWrapper}>
163-
<TextField
164-
color={'primary'}
165-
label="Component Name"
166-
variant="outlined"
167-
className={classes.inputField}
168-
InputProps={{ className: classes.input }}
169-
InputLabelProps={{ className: classes.inputLabel }}
170-
value={compName}
171-
error={errorStatus}
172-
helperText={errorStatus ? errorMsg : ''}
173-
onChange={handleNameInput}
174-
/>
175-
<div className={classes.btnGroup}>
201+
<div className={classes.projectTypeWrapper}>
202+
<FormControl>
203+
{/* <InputLabel id="project-type-label" className={classes.inputLabel}>
204+
Project Type
205+
</InputLabel> */}
206+
<Select
207+
variant="outlined"
208+
labelId="project-type-label"
209+
id="demo-simple-select"
210+
className={classes.projectSelector}
211+
value={state.projectType}
212+
onChange={handleProjectChange}
213+
>
214+
<MenuItem value={'Next.js'}>Next.js</MenuItem>
215+
<MenuItem value={'Classic React'}>Classic React</MenuItem>
216+
</Select>
217+
</FormControl>
218+
</div>
219+
220+
<div className={classes.addComponentWrapper}>
221+
<div>
222+
<div className={classes.inputWrapper}>
223+
<TextField
224+
color={'primary'}
225+
label="Component Name"
226+
variant="outlined"
227+
className={classes.inputField}
228+
InputProps={{ className: classes.input }}
229+
InputLabelProps={{ className: classes.inputLabel }}
230+
value={compName}
231+
error={errorStatus}
232+
helperText={errorStatus ? errorMsg : ''}
233+
onChange={handleNameInput}
234+
/>
235+
<div className={classes.btnGroup}>
236+
<FormControlLabel
237+
value="top"
238+
control={
239+
<Checkbox color="primary" onChange={toggleRootStatus} />
240+
}
241+
label={state.projectType === 'Next.js' ? 'Page' : 'Root'}
242+
className={classes.rootCheckBoxLabel}
243+
labelPlacement="top"
244+
/>
245+
</div>
246+
</div>
176247
<Button
177248
className={classes.button}
178249
color="primary"
179250
onClick={handleNameSubmit}
180251
>
181252
ADD
182253
</Button>
183-
<FormControlLabel
184-
control={
185-
<Switch
186-
checked={isRoot}
187-
onChange={toggleRootStatus}
188-
color="primary"
189-
/>
190-
}
191-
className={classes.rootToggle}
192-
label="ROOT"
193-
/>
194254
</div>
195255
</div>
196256
<div className={classes.panelWrapperList}>
257+
<h4>{state.projectType === 'Next.js' ? 'Pages' : 'Root components'}</h4>
197258
<Grid container direction="row" justify="center" alignItems="center">
198-
{state.components.map(comp => (
199-
<ComponentPanelItem
200-
isFocus={isFocus(comp.id)}
201-
key={`comp-${comp.id}`}
202-
name={comp.name}
203-
id={comp.id}
204-
root={state.rootComponents.includes(comp.id)}
205-
focusClick={() => setFocus(comp.id)}
206-
/>
207-
))}
259+
{state.components
260+
.filter(comp => state.rootComponents.includes(comp.id))
261+
.map(comp => (
262+
<ComponentPanelItem
263+
isFocus={isFocus(comp.id)}
264+
key={`comp-${comp.id}`}
265+
name={comp.name}
266+
id={comp.id}
267+
root={true}
268+
focusClick={() => setFocus(comp.id)}
269+
/>
270+
))}
271+
</Grid>
272+
<h4>Reusable components</h4>
273+
<Grid container direction="row" justify="center" alignItems="center">
274+
{state.components
275+
.filter(comp => !state.rootComponents.includes(comp.id))
276+
.map(comp => (
277+
<ComponentPanelItem
278+
isFocus={isFocus(comp.id)}
279+
key={`comp-${comp.id}`}
280+
name={comp.name}
281+
id={comp.id}
282+
root={false}
283+
focusClick={() => setFocus(comp.id)}
284+
/>
285+
))}
208286
</Grid>
287+
{state.projectType === 'Next.js' ? (
288+
<React.Fragment>
289+
<h4>Next.js components</h4>
290+
<Grid
291+
container
292+
direction="row"
293+
justify="center"
294+
alignItems="center"
295+
>
296+
<ComponentPanelRoutingItem key={'premadecomp-1'} />
297+
</Grid>
298+
</React.Fragment>
299+
) : (
300+
''
301+
)}
209302
</div>
210303
</div>
211304
);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ const ComponentPanelItem: React.FC<{
4242
})
4343
});
4444

45+
46+
4547
const handleClick = () => {
4648
dispatch({
4749
type: 'CHANGE FOCUS',

0 commit comments

Comments
 (0)