Skip to content

Commit 050a15e

Browse files
tonyitotonyito
committed
Refactor complete for file structure
2 parents 04513d0 + 6d715ff commit 050a15e

28 files changed

+374
-201
lines changed

‎package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,10 +94,12 @@
9494
"@material-ui/icons": "^4.0.1",
9595
"@material-ui/styles": "^4.9.6",
9696
"@types/prettier": "^1.19.0",
97+
"@types/prismjs": "^1.16.0",
9798
"@types/react": "^16.8.14",
9899
"@types/react-dom": "^16.8.4",
99100
"@types/react-redux": "^7.0.8",
100101
"@types/react-syntax-highlighter": "^11.0.4",
102+
"ace-builds": "^1.4.8",
101103
"autoprefixer": "^9.0.1",
102104
"babel-polyfill": "^6.26.0",
103105
"classnames": "^2.2.6",
@@ -113,13 +115,16 @@
113115
"lodash.throttle": "^4.1.1",
114116
"material-table": "^1.25.2",
115117
"prettier": "^1.19.1",
118+
"prismjs": "^1.19.0",
116119
"prop-types": "^15.6.2",
117120
"react": "^16.13.0",
121+
"react-ace": "^8.1.0",
118122
"react-d3-tree": "^1.12.3",
119123
"react-dom": "^16.4.1",
120124
"react-draggable": "^3.0.5",
121125
"react-konva": "^16.12.0-0",
122126
"react-redux": "^5.0.7",
127+
"react-simple-code-editor": "^0.11.0",
123128
"react-sortable-tree": "^2.2.0",
124129
"react-syntax-highlighter": "^10.2.1",
125130
"redux": "^4.0.0",

‎src/actionTypes/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,5 @@ export const UNDO: string = 'UNDO';
3535
export const UPDATE_COMPONENT: string = 'UPDATE_COMPONENT';
3636
export const UPDATE_CHILDREN: string = 'UPDATE_CHILDREN';
3737
export const UPDATE_CHILDREN_SORT: string = 'UPDATE_CHILDREN_SORT';
38-
export const UPDATE_HTML_ATTR: string = 'UPDATE_HTML_ATTR';
38+
export const UPDATE_CODE: string = 'UPDATE_CODE';
39+
export const UPDATE_HTML_ATTR: string = 'UPDATE_HTML_ATTR';

‎src/actions/actionCreators.ts

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
PropInt,
55
ChildInt,
66
Action,
7-
} from '../intefaces/Interfaces';
7+
} from '../interfaces/Interfaces';
88

99
import {
1010
ADD_CHILD,
@@ -36,6 +36,7 @@ import {
3636
TOGGLE_STATE,
3737
UNDO,
3838
UPDATE_HTML_ATTR,
39+
UPDATE_CODE,
3940
} from '../actionTypes/index';
4041
import { loadState } from '../localStorage';
4142
import createFiles from '../utils/createFiles.util';
@@ -44,7 +45,7 @@ import createApplicationUtil from '../utils/createApplication.util';
4445
export const addChild = ({
4546
title,
4647
childType,
47-
HTMLInfo,
48+
HTMLInfo
4849
}: {
4950
title: string;
5051
childType: string;
@@ -81,7 +82,7 @@ export const deleteChild = ({}) => (dispatch: (arg: Action) => void) => {
8182

8283
export const deleteComponent = ({
8384
componentId,
84-
stateComponents,
85+
stateComponents
8586
}: {
8687
componentId: number;
8788
stateComponents: ComponentsInt;
@@ -96,8 +97,8 @@ export const deleteComponent = ({
9697
payload: {
9798
parentId: parent.id,
9899
childId: child.childId,
99-
calledFromDeleteComponent: true,
100-
},
100+
calledFromDeleteComponent: true
101+
}
101102
});
102103
});
103104
});
@@ -110,14 +111,14 @@ export const deleteComponent = ({
110111

111112
export const changeComponentFocusChild = ({
112113
componentId,
113-
childId,
114+
childId
114115
}: {
115116
componentId: number;
116117
childId: number;
117118
}) => (dispatch: (arg: Action) => void) => {
118119
dispatch({
119120
type: CHANGE_COMPONENT_FOCUS_CHILD,
120-
payload: { componentId, childId },
121+
payload: { componentId, childId }
121122
});
122123
};
123124

@@ -139,7 +140,7 @@ export const createApplication = ({
139140
components = [],
140141
genOption,
141142
appName = 'reactype_app',
142-
exportAppBool,
143+
exportAppBool
143144
}: {
144145
path: string;
145146
components: ComponentsInt;
@@ -154,43 +155,43 @@ export const createApplication = ({
154155
appName,
155156
path,
156157
components,
157-
exportAppBool,
158+
exportAppBool
158159
})
159160
);
160161
} else if (genOption) {
161162
exportAppBool = true;
162163
dispatch({
163-
type: CREATE_APPLICATION,
164+
type: CREATE_APPLICATION
164165
});
165166
createApplicationUtil({
166167
path,
167168
appName,
168-
genOption,
169+
genOption
169170
})
170171
.then(() => {
171172
dispatch({
172-
type: CREATE_APPLICATION_SUCCESS,
173+
type: CREATE_APPLICATION_SUCCESS
173174
});
174175
dispatch(
175176
exportFiles({
176177
appName,
177178
path,
178179
components,
179-
exportAppBool,
180+
exportAppBool
180181
})
181182
);
182183
})
183184
.catch((err: string) =>
184185
dispatch({
185186
type: CREATE_APPLICATION_ERROR,
186-
payload: { status: true, err },
187+
payload: { status: true, err }
187188
})
188189
);
189190
}
190191
};
191192

192193
export const deleteAllData = () => ({
193-
type: DELETE_ALL_DATA,
194+
type: DELETE_ALL_DATA
194195
});
195196

196197
export const deleteImage = () => ({
@@ -279,7 +280,7 @@ export const loadInitData = () => (dispatch: (arg: Action) => void) => {
279280
};
280281

281282
export const redo = () => ({
282-
type: REDO,
283+
type: REDO
283284
});
284285

285286
export const toggleComponentState = ({ id }: { id: number }) => (
@@ -304,15 +305,28 @@ export const undo = () => ({
304305
type: UNDO,
305306
});
306307

308+
export const updateCode = ({
309+
componentId,
310+
code
311+
}: {
312+
componentId: number;
313+
code: string;
314+
}) => (dispatch: (arg: Action) => void) => {
315+
dispatch({
316+
type: UPDATE_CODE,
317+
payload: { componentId, code }
318+
});
319+
};
320+
307321
export const updateHtmlAttr = ({
308322
attr,
309-
value,
323+
value
310324
}: {
311325
attr: string;
312326
value: string;
313327
}) => (dispatch: (arg: Action) => void) => {
314328
dispatch({
315329
type: UPDATE_HTML_ATTR,
316-
payload: { attr, value },
330+
payload: { attr, value }
317331
});
318332
};

‎src/components/bottom/BottomPanel.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,26 @@ import React, { Component } from 'react';
22
import { connect } from 'react-redux';
33
import { handleClose, deleteProp, addProp } from '../../actions/actionCreators';
44
import BottomTabs from './BottomTabs';
5-
import { PropsInt, PropInt } from '../../intefaces/Interfaces';
5+
import { PropsInt, PropInt } from '../../interfaces/Interfaces';
66

77
const IPC = require('electron').ipcRenderer;
88

99
const mapDispatchToProps = (dispatch: any) => ({
1010
handleNotificationClose: () => dispatch(handleClose()),
1111
deleteProp: (id: number) => dispatch(deleteProp(id)),
12-
addProp: (prop: PropInt) => dispatch(addProp(prop)),
12+
addProp: (prop: PropInt) => dispatch(addProp(prop))
1313
});
1414

1515
const mapStateToProps = (store: any) => ({
1616
focusChild: store.workspace.focusChild,
17-
components: store.workspace.components,
17+
components: store.workspace.components
1818
});
1919

2020
interface BottomPanelPropsInt extends PropsInt {
2121
deleteProp(id: number): void;
2222
addProp(prop: PropInt): void;
2323
changeFocusComponent(arg: { title: string }): void;
24+
updateCode(arg: { componentId: number; code: string }): void;
2425
}
2526

2627
class BottomPanel extends Component<BottomPanelPropsInt> {
@@ -32,6 +33,7 @@ class BottomPanel extends Component<BottomPanelPropsInt> {
3233
addProp,
3334
focusChild,
3435
changeFocusComponent,
36+
updateCode
3537
} = this.props;
3638

3739
return (
@@ -43,6 +45,7 @@ class BottomPanel extends Component<BottomPanelPropsInt> {
4345
addProp={addProp}
4446
focusChild={focusChild}
4547
changeFocusComponent={changeFocusComponent}
48+
updateCode={updateCode}
4649
/>
4750
</div>
4851
);

‎src/components/bottom/BottomTabs.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ import {
1111
ComponentsInt,
1212
PropInt,
1313
PropsInt
14-
} from '../../intefaces/Interfaces';
14+
} from '../../interfaces/Interfaces';
1515

1616
interface BottomTabsPropsInt extends PropsInt {
1717
deleteProp(id: number): void;
1818
addProp(prop: PropInt): void;
1919
classes: any;
2020
changeFocusComponent(arg: { title: string }): void;
21+
updateCode(arg: { componentId: number; code: string }): void;
2122
}
2223

2324
// interface TreeInt {
@@ -50,6 +51,7 @@ const styles = (theme: Theme): any => ({
5051
minWidth: 72,
5152
fontWeight: theme.typography.fontWeightRegular,
5253
marginRight: theme.spacing.unit * 4,
54+
marginTop: '10px',
5355

5456
fontFamily: [
5557
'-apple-system',
@@ -142,7 +144,8 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
142144
focusComponent,
143145
deleteProp,
144146
addProp,
145-
focusChild
147+
focusChild,
148+
updateCode
146149
} = this.props;
147150
const { value } = this.state;
148151

@@ -162,12 +165,12 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
162165
<Tab
163166
disableRipple
164167
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
165-
label='Application Tree'
168+
label="Application Tree"
166169
/>
167170
<Tab
168171
disableRipple
169172
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
170-
label='Code Preview'
173+
label="Code Preview"
171174
/>
172175
<Tab
173176
disableRipple
@@ -184,13 +187,13 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
184187
<Tab
185188
disableRipple
186189
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
187-
label='Add Child Props'
190+
label="Add Child Props"
188191
/>
189192
</Tabs>
190193

191194
{value === 0 && (
192195
<div
193-
id='treeWrapper'
196+
id="treeWrapper"
194197
style={{
195198
width: '100%',
196199
height: '100%'
@@ -227,7 +230,9 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
227230
{value === 1 && (
228231
<CodePreview
229232
focusComponent={focusComponent}
233+
updateCode={updateCode}
230234
components={components}
235+
changeFocusComponent={this.props.changeFocusComponent}
231236
/>
232237
)}
233238
{value === 2 && <Props />}

0 commit comments

Comments
 (0)