Skip to content

Commit 3284602

Browse files
author
john lim
committed
testing link
1 parent b32e163 commit 3284602

File tree

7 files changed

+128
-100
lines changed

7 files changed

+128
-100
lines changed

app/electron/menu.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ var MenuBuilder = function(mainWindow, appName) {
2626
contextIsolation: true,
2727
enableRemoteModule: false,
2828
zoomFactor: 1.0,
29-
devTools: false
29+
// devTools: false
3030
}
3131
});
3232
tutorial.loadURL(`http://localhost:8080/#/tutorial`);

app/src/components/left/HTMLItem.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { ItemTypes } from '../../constants/ItemTypes';
44
import Grid from '@material-ui/core/Grid';
55
import { makeStyles } from '@material-ui/core/styles';
66

7+
const buttonClasses =
8+
'MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-button-12 MuiButton-textPrimary';
79

810
const useStyles = makeStyles({
911
HTMLPanelItem: {
@@ -29,7 +31,8 @@ const HTMLItem: React.FC<{
2931
name: string;
3032
id: number;
3133
Icon: any;
32-
}> = ({ name, id, Icon }) => {
34+
handleDelete: (id: number) => void;
35+
}> = ({ name, id, Icon, handleDelete }) => {
3336
const classes = useStyles();
3437

3538
const [{ isDragging }, drag] = useDrag({
@@ -58,6 +61,7 @@ const HTMLItem: React.FC<{
5861
>
5962
{Icon && <Icon />}
6063
</span>
64+
<button className={buttonClasses} onClick={() => { handleDelete(id) }} > X </button>
6165
</div>
6266
</Grid>
6367
);

app/src/components/left/HTMLPanel.tsx

Lines changed: 19 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const HTMLPanel = (): JSX.Element => {
2727
setName(e.target.value);
2828
};
2929

30-
const checkNameDupe = (inputName: String) => {
30+
const checkNameDupe = (inputName: String): boolean => {
3131
let checkList = state.HTMLTypes.slice();
3232

3333
// checks to see if inputted comp name already exists
@@ -66,6 +66,8 @@ const HTMLPanel = (): JSX.Element => {
6666
const formattedName =
6767
inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1);
6868
// add new component to state
69+
console.log(inputTag);
70+
console.log(inputName);
6971
const newElement = {
7072
id: currentID,
7173
tag: inputTag,
@@ -79,13 +81,19 @@ const HTMLPanel = (): JSX.Element => {
7981
type: 'ADD ELEMENT',
8082
payload: newElement
8183
});
82-
const nextID = currentID + 1;
84+
let nextID = 0;
85+
for (let i = 0; i < state.HTMLTypes.length; i+=1) {
86+
if (state.HTMLTypes[i].id > nextID) {
87+
nextID = state.HTMLTypes.id;
88+
}
89+
}
90+
nextID += 1;
8391
setCurrentID(nextID);
8492
setTag('');
8593
setName('');
8694
};
8795

88-
const alphanumeric = input => {
96+
const alphanumeric = (input:string): boolean => {
8997
let letterNumber = /^[0-9a-zA-Z]+$/;
9098
if (input.match(letterNumber)) return true;
9199
return false;
@@ -111,6 +119,13 @@ const HTMLPanel = (): JSX.Element => {
111119
resetError();
112120
};
113121

122+
const handleDelete = (id: number): void => {
123+
dispatch({
124+
type: "DELETE ELEMENT",
125+
payload: id
126+
});
127+
}
128+
114129
return (
115130
<div>
116131
<h4> HTML Elements</h4>
@@ -167,6 +182,7 @@ const HTMLPanel = (): JSX.Element => {
167182
key={`html-${option.name}`}
168183
id={option.id}
169184
Icon={option.icon}
185+
handleDelete={handleDelete}
170186
/>
171187
))}
172188
</Grid>
@@ -175,9 +191,6 @@ const HTMLPanel = (): JSX.Element => {
175191
};
176192

177193
const useStyles = makeStyles({
178-
inputField: {
179-
marginTop: '15px'
180-
},
181194
inputWrapper: {
182195
// height: '115px',
183196
textAlign: 'center',
@@ -192,25 +205,6 @@ const useStyles = makeStyles({
192205
padding: '20px',
193206
margin: '20px'
194207
},
195-
rootCheckBox: {},
196-
rootCheckBoxLabel: {
197-
color: 'white'
198-
},
199-
panelWrapper: {
200-
width: '100%',
201-
marginTop: '15px'
202-
},
203-
panelWrapperList: {
204-
// maxHeight: '400px',
205-
minHeight: '120px',
206-
// overflowY: 'auto',
207-
marginLeft: '-15px',
208-
marginRight: '-15px'
209-
},
210-
panelSubheader: {
211-
textAlign: 'center',
212-
color: '#fff'
213-
},
214208
input: {
215209
color: '#fff',
216210
borderRadius: '5px',
@@ -228,24 +222,6 @@ const useStyles = makeStyles({
228222
zIndex: 20,
229223
color: '#fff',
230224
marginTop: '-10px'
231-
},
232-
btnGroup: {
233-
display: 'flex',
234-
flexDirection: 'column',
235-
paddingTop: '10px',
236-
marginLeft: '10px'
237-
},
238-
button: {
239-
fontSize: '1rem',
240-
height: '40px',
241-
maginTop: '10px',
242-
width: '100%',
243-
// border: '1px solid rgba(70,131,83)',
244-
backgroundColor: 'rgba(1,212,109,0.1)'
245-
},
246-
rootToggle: {
247-
color: '#01d46d',
248-
fontSize: '0.85rem'
249225
}
250226
});
251227

app/src/index.js

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,8 @@ import Cookies from 'js-cookie';
77
import SignIn from './components/login/SignIn.tsx';
88
import SignUp from './components/login/SignUp.tsx';
99
import Tutorial from './tutorial/Tutorial.tsx';
10-
import Pages from './tutorial/Pages.tsx';
11-
import Customization from './tutorial/Customization.tsx';
12-
import Canvas from './tutorial/Canvas.tsx';
13-
import Styling from './tutorial/Styling.tsx';
14-
import RouteLinks from './tutorial/RouteLinks.tsx';
15-
import ReusableComponents from './tutorial/ReusableComponents.tsx';
16-
import ComponentTree from './tutorial/ComponentTree.tsx';
17-
import HtmlElements from './tutorial/HtmlElements.tsx';
18-
import CodePreview from './tutorial/CodePreview.tsx';
10+
import TutorialPage from './tutorial/TutorialPages.tsx';
11+
1912

2013
import {
2114
HashRouter as Router,
@@ -45,16 +38,8 @@ ReactDOM.render(
4538
<Route exact path="/signup" component={SignUp} />
4639
<PrivateRoute exact path="/" component={App} />
4740
<Route exact path="/tutorial" component={Tutorial}/>
48-
<Route exact path="/pages" component={Pages}/>
49-
<Route exact path="/links" component={RouteLinks}/>
50-
<Route exact path="/code-preview" component={CodePreview}/>
51-
<Route exact path="/reusable-components" component={ReusableComponents}/>
52-
<Route exact path="/component-tree" component={ComponentTree}/>
53-
<Route exact path="/html-elements" component={HtmlElements}/>
54-
<Route exact path="/styling" component={Styling}/>
55-
<Route exact path="/customization" component={Customization}/>
56-
<Route exact path="/canvas" component={Canvas}/>
41+
<Route exact path="/tutorialPage" component={TutorialPage} />
5742
</Switch>
5843
</Router>,
5944
document.getElementById('app')
60-
);
45+
);

app/src/reducers/componentReducer.ts

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,9 @@ const reducer = (state: State, action: Action) => {
117117
action.payload.componentName === ''
118118
)
119119
return state;
120-
120+
121121
const components = [...state.components];
122-
122+
123123
const newComponent = {
124124
id: state.components.length + 1,
125125
name: action.payload.componentName,
@@ -176,20 +176,20 @@ const reducer = (state: State, action: Action) => {
176176
}
177177
});
178178
}
179-
179+
180180
if (type === 'Component') {
181181
const originalComponent = findComponent(state.components, typeId);
182182
if (childTypeExists('Component', parentComponentId, originalComponent))
183183
return state;
184184
}
185-
185+
186186
let newName = state.HTMLTypes.reduce((name, el) => {
187187
if (typeId === el.id) {
188188
name = (type === 'Component') ? componentName : el.tag;
189189
}
190190
return name;
191191
}, '');
192-
192+
193193
if (type === 'Route Link') {
194194
components.find(comp => {
195195
if (comp.id === typeId) {
@@ -200,7 +200,7 @@ const reducer = (state: State, action: Action) => {
200200
}
201201
const newChild: ChildElement = {
202202
type,
203-
typeId: components.length + 1,
203+
typeId,
204204
name: newName,
205205
childId: state.nextChildId,
206206
style: {},
@@ -310,7 +310,7 @@ const reducer = (state: State, action: Action) => {
310310
}
311311
case 'DELETE CHILD': {
312312
// if in-focus instance is a top-level component and not a child, don't delete anything
313-
313+
314314
if (!state.canvasFocus.childId) return state;
315315

316316
// find the current component in focus
@@ -436,7 +436,9 @@ const reducer = (state: State, action: Action) => {
436436
}
437437

438438
case 'OPEN PROJECT': {
439+
console.log("BEFORE: ", action.payload.HTMLTypes);
439440
convertToJSX(action.payload.HTMLTypes);
441+
console.log("AFTER: ", action.payload.HTMLTypes);
440442
return {
441443
...action.payload
442444
};
@@ -450,6 +452,20 @@ const reducer = (state: State, action: Action) => {
450452
HTMLTypes
451453
};
452454
}
455+
456+
case 'DELETE ELEMENT': {
457+
const HTMLTypes = [...state.HTMLTypes];
458+
for (let i = 0; i < HTMLTypes.length; i+=1) {
459+
if (HTMLTypes[i].id === action.payload) {
460+
HTMLTypes.splice(i, 1);
461+
}
462+
}
463+
return {
464+
...state,
465+
HTMLTypes
466+
}
467+
}
468+
453469
default:
454470
return state;
455471
}

app/src/tutorial/Tutorial.tsx

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState, createContext, useContext } from 'react';
22
import { makeStyles } from '@material-ui/core/styles';
33
import Card from '@material-ui/core/Card';
44
import CardActions from '@material-ui/core/CardActions';
@@ -18,6 +18,9 @@ import AddPhotoAlternateIcon from '@material-ui/icons/AddPhotoAlternate';
1818
import StyleIcon from '@material-ui/icons/Style';
1919
import ColorLensIcon from '@material-ui/icons/ColorLens';
2020

21+
22+
export const PageContext = createContext({ page: null, setPage: null});
23+
2124
const useStyles = makeStyles({
2225
root: {
2326
display: 'flex',
@@ -84,6 +87,9 @@ const useStyles = makeStyles({
8487

8588
const Tutorial: React.FC<RouteComponentProps> = () => {
8689
const classes = useStyles();
90+
const initial = useContext(PageContext);
91+
const [page, setPage] = useState(initial);
92+
8793
const topics = [
8894
'Pages',
8995
'Route Links',
@@ -95,17 +101,7 @@ const Tutorial: React.FC<RouteComponentProps> = () => {
95101
'Styling',
96102
'Customization'
97103
];
98-
const routes = [
99-
'/pages',
100-
'/links',
101-
'/code-preview',
102-
'/reusable-components',
103-
'/canvas',
104-
'/component-tree',
105-
'/html-elements',
106-
'/styling',
107-
'/customization'
108-
];
104+
109105
const icons = [
110106
<MenuBookIcon className={classes.icons} />,
111107
<LinkIcon className={classes.icons} />,
@@ -125,28 +121,27 @@ const Tutorial: React.FC<RouteComponentProps> = () => {
125121
const cards = topics.map((topic, i) => {
126122
return (
127123
<div key={`k${i}`} className={classes.cardWrapper}>
128-
<Card className={classes.root} variant="elevation">
129-
<CardContent>
130-
<Typography className={classes.title}>{topic}</Typography>
131-
</CardContent>
132-
<CardActions className={classes.cardActions}>
133-
<Link to={routes[i]} style={{ textDecoration: 'none' }}>
134-
{icons[i]}
135-
</Link>
136-
</CardActions>
137-
</Card>
124+
<Link to={'/tutorialPages'} style={{ textDecoration: 'none' }} >
125+
<Card className={classes.root} variant="elevation">
126+
<CardContent>
127+
<Typography className={classes.title}>{topic}</Typography>
128+
</CardContent>
129+
<CardActions className={classes.cardActions}>
130+
{icons[i]}
131+
</CardActions>
132+
</Card>
133+
</Link>
138134
</div>
139135
);
140136
});
141137

142138
return (
143-
<Container maxWidth="xl" className={classes.container}>
144-
<h1 className={classes.pageTitle}>Reactype Tutorial</h1>
145-
<div className={classes.wrapper}>{cards}</div>
146-
{/* <Link to={`/`}>
147-
<button>Application</button>
148-
</Link> */}
149-
</Container>
139+
<PageContext.Provider value={{ page, setPage }} >
140+
<Container maxWidth="xl" className={classes.container}>
141+
<h1 className={classes.pageTitle}>ReacType Tutorial</h1>
142+
<div className={classes.wrapper}>{cards}</div>
143+
</Container>
144+
</PageContext.Provider>
150145
);
151146
};
152147

0 commit comments

Comments
 (0)