Skip to content

Commit b967fc1

Browse files
Tolga MizrakciTolga Mizrakci
Tolga Mizrakci
authored and
Tolga Mizrakci
committed
initial state object is working for addChild react component. addChild not working inside reducer
1 parent 53bb6a5 commit b967fc1

File tree

6 files changed

+156
-82
lines changed

6 files changed

+156
-82
lines changed

‎src/actionTypes/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export const LOAD_INIT_DATA = 'LOAD_INIT_DATA';
22
export const ADD_COMPONENT = 'ADD_COMPONENT';
3+
export const ADD_CHILD = 'ADD_CHILD';
34
export const UPDATE_COMPONENT = 'UPDATE_COMPONENT';
45
export const DELETE_COMPONENT = 'DELETE_COMPONENT';
56
export const UPDATE_CHILDREN = 'UPDATE_CHILDREN';

‎src/actions/components.js

Lines changed: 78 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
LOAD_INIT_DATA,
33
ADD_COMPONENT,
4+
ADD_CHILD,
45
UPDATE_COMPONENT,
56
DELETE_COMPONENT,
67
UPDATE_CHILDREN,
@@ -62,6 +63,11 @@ export const addComponent = ({ title }) => (dispatch) => {
6263
dispatch({ type: SET_SELECTABLE_PARENTS });
6364
};
6465

66+
export const addChild = ({ title }) => (dispatch) => {
67+
dispatch({ type: ADD_CHILD, payload: { title } });
68+
// dispatch({ type: SET_SELECTABLE_PARENTS });
69+
};
70+
6571
export const deleteComponent = ({ index, id, parentIds = [] }) => (dispatch) => {
6672
if (parentIds.length) {
6773
// Delete Component from its parent if it has a parent.
@@ -91,21 +97,21 @@ export const updateComponent = ({
9197
dispatch({ type: SET_SELECTABLE_PARENTS });
9298
};
9399

94-
export const exportFiles = ({ components, path }) => (dispatch) => {
95-
dispatch({
96-
type: EXPORT_FILES,
97-
});
98-
99-
createFiles(components, path)
100-
.then(dir => dispatch({
101-
type: EXPORT_FILES_SUCCESS,
102-
payload: { status: true, dir: dir[0] },
103-
}))
104-
.catch(err => dispatch({
105-
type: EXPORT_FILES_ERROR,
106-
payload: { status: true, err },
107-
}));
108-
};
100+
// export const exportFiles = ({ components, path }) => (dispatch) => {
101+
// dispatch({
102+
// type: EXPORT_FILES,
103+
// });
104+
105+
// createFiles(components, path)
106+
// .then(dir => dispatch({
107+
// type: EXPORT_FILES_SUCCESS,
108+
// payload: { status: true, dir: dir[0] },
109+
// }))
110+
// .catch(err => dispatch({
111+
// type: EXPORT_FILES_ERROR,
112+
// payload: { status: true, err },
113+
// }));
114+
// };
109115

110116
export const handleClose = () => ({
111117
type: HANDLE_CLOSE,
@@ -121,71 +127,66 @@ export const handleTransform = (id, {
121127
},
122128
});
123129

124-
// Application generation options
125-
// cosnt genOptions = [
126-
// 'Export into existing project.', 'Export with starter repo.', 'Export with create-react-app.'
127-
// ];
128-
129-
export const createApplication = ({
130-
path, components = [], genOption, appName = 'proto_app', repoUrl,
131-
}) => (dispatch) => {
132-
if (genOption === 0) {
133-
dispatch(exportFiles({ path, components }));
134-
} else if (genOption) {
135-
dispatch({
136-
type: CREATE_APPLICATION,
137-
});
138-
createApplicationUtil({
139-
path, appName, genOption, repoUrl,
140-
})
141-
.then(() => {
142-
dispatch({
143-
type: CREATE_APPLICATION_SUCCESS,
144-
});
145-
dispatch(exportFiles({ path: `${path}/${appName}`, components }));
146-
})
147-
.catch(err => dispatch({
148-
type: CREATE_APPLICATION_ERROR,
149-
payload: { status: true, err },
150-
}));
151-
}
152-
};
130+
// export const createApplication = ({
131+
// path, components = [], genOption, appName = 'proto_app', repoUrl,
132+
// }) => (dispatch) => {
133+
// if (genOption === 0) {
134+
// dispatch(exportFiles({ path, components }));
135+
// } else if (genOption) {
136+
// dispatch({
137+
// type: CREATE_APPLICATION,
138+
// });
139+
// createApplicationUtil({
140+
// path, appName, genOption, repoUrl,
141+
// })
142+
// .then(() => {
143+
// dispatch({
144+
// type: CREATE_APPLICATION_SUCCESS,
145+
// });
146+
// dispatch(exportFiles({ path: `${path}/${appName}`, components }));
147+
// })
148+
// .catch(err => dispatch({
149+
// type: CREATE_APPLICATION_ERROR,
150+
// payload: { status: true, err },
151+
// }));
152+
// }
153+
// };
153154

154155
export const toggleDragging = status => ({
155156
type: TOGGLE_DRAGGING,
156157
payload: status,
157158
});
158159

159-
export const moveToBottom = componentId => ({
160-
type: MOVE_TO_BOTTOM,
161-
payload: componentId,
162-
});
163-
164-
export const moveToTop = componentId => ({
165-
type: MOVE_TO_TOP,
166-
payload: componentId,
167-
});
168-
169-
export const openExpansionPanel = component => ({
170-
type: OPEN_EXPANSION_PANEL,
171-
payload: { component },
172-
});
173-
174-
export const deleteAllData = () => ({
175-
type: DELETE_ALL_DATA,
176-
});
177-
178-
export const changeImagePath = path => ({
179-
type: CHANGE_IMAGE_PATH,
180-
payload: path,
181-
});
182-
183-
export const deleteCompProp = ({ id, index }) => ({
184-
type: DELETE_PROP,
185-
payload: { id, index },
186-
});
187-
188-
export const addCompProp = prop => ({
189-
type: ADD_PROP,
190-
payload: { ...prop },
191-
});
160+
// export const moveToBottom = componentId => ({
161+
// type: MOVE_TO_BOTTOM,
162+
// payload: componentId,
163+
// });
164+
165+
// export const moveToTop = componentId => ({
166+
// type: MOVE_TO_TOP,
167+
// payload: componentId,
168+
// });
169+
170+
// export const openExpansionPanel = component => ({
171+
// type: OPEN_EXPANSION_PANEL,
172+
// payload: { component },
173+
// });
174+
175+
// export const deleteAllData = () => ({
176+
// type: DELETE_ALL_DATA,
177+
// });
178+
179+
// export const changeImagePath = path => ({
180+
// type: CHANGE_IMAGE_PATH,
181+
// payload: path,
182+
// });
183+
184+
// export const deleteCompProp = ({ id, index }) => ({
185+
// type: DELETE_PROP,
186+
// payload: { id, index },
187+
// });
188+
189+
// export const addCompProp = prop => ({
190+
// type: ADD_PROP,
191+
// payload: { ...prop },
192+
// });

‎src/reducers/componentReducer.js renamed to ‎src/reducers/componentReducer.ts

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
LOAD_INIT_DATA,
33
ADD_COMPONENT,
4+
ADD_CHILD,
45
UPDATE_COMPONENT,
56
DELETE_COMPONENT,
67
UPDATE_CHILDREN,
@@ -25,6 +26,7 @@ import {
2526

2627
import {
2728
addComponent,
29+
addChild,
2830
updateComponent,
2931
deleteComponent,
3032
updateChildren,
@@ -43,14 +45,52 @@ import {
4345
deleteProp,
4446
} from '../utils/componentReducer.util';
4547

48+
interface Child {
49+
childId: number;
50+
componentRef: number; // references the component this child instance belongs to
51+
position: object;
52+
}
53+
54+
interface Component {
55+
componentId: number;
56+
title: string;
57+
childrenArray: Child[];
58+
nextChildId: number;
59+
focusChild: Component;
60+
}
61+
62+
const appComponent = {
63+
id: '1',
64+
stateful: false,
65+
title: 'App',
66+
parentIds: [],
67+
color: '#FF6D00',
68+
draggable: true,
69+
childrenIds: [],
70+
selectableParents: [],
71+
expanded: true,
72+
props: [],
73+
nextPropId: 0,
74+
position: {
75+
x: 110,
76+
y: 120,
77+
width: 50,
78+
height: 50,
79+
},
80+
81+
childrenArray: [],
82+
nextChildId: 1,
83+
focusChild: null,
84+
}
85+
4686
const initialApplicationState = {
47-
totalComponents: 0,
48-
nextId: 1,
49-
imagePath: '',
87+
totalComponents: 1,
88+
nextId: 2,
89+
// imagePath: '',
5090
successOpen: false,
5191
errorOpen: false,
5292
focusComponent: {},
53-
components: [],
93+
components: [appComponent],
5494
appDir: '',
5595
loading: false,
5696
};
@@ -68,6 +108,8 @@ const componentReducer = (state = initialApplicationState, action) => {
68108
};
69109
case ADD_COMPONENT:
70110
return addComponent(state, action.payload);
111+
case ADD_CHILD:
112+
return addChild(state, action.payload);
71113
case UPDATE_COMPONENT:
72114
return updateComponent(state, action.payload);
73115
case DELETE_COMPONENT:

‎src/reducers/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { combineReducers } from 'redux';
22

3-
import componentReducer from './componentReducer';
3+
import componentReducer from './componentReducer.ts';
44

55
const reducers = combineReducers({
66
workspace: componentReducer,

‎src/utils/componentReducer.util.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,35 @@ export const addComponent = (state, { title }) => {
5050
};
5151
};
5252

53+
export const addChild = (state, { title }) => {
54+
const strippedTitle = title
55+
.replace(/[a-z]+/gi,
56+
word => word[0].toUpperCase() + word.slice(1))
57+
.replace(/[-_\s0-9\W]+/gi, '');
58+
const newComponent = {
59+
...initialComponentState,
60+
title: strippedTitle,
61+
id: state.nextId.toString(),
62+
color: getColor(),
63+
};
64+
65+
const components = [
66+
...state.components,
67+
newComponent,
68+
];
69+
70+
const totalComponents = state.totalComponents + 1;
71+
const nextId = state.nextId + 1;
72+
73+
return {
74+
...state,
75+
totalComponents,
76+
nextId,
77+
components,
78+
focusComponent: newComponent,
79+
};
80+
};
81+
5382
export const updateComponent = ((state, {
5483
id, newParentId = null, color = null, stateful = null, props = null,
5584
}) => {

‎webpack.config.development.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ module.exports = {
2222
module: {
2323
rules: [
2424
{ test: /\.tsx?$/, exclude: /node-modules/, loader: 'babel-loader' },
25+
{ test: /\.ts?$/, exclude: /node-modules/, loader: 'babel-loader' },
2526
{
2627
test: /\.(js|jsx)$/,
2728
exclude: /node_modules/,

0 commit comments

Comments
 (0)