Skip to content

Commit 14c7717

Browse files
tonyitotonyito
committed
Add component moved
1 parent 92626ee commit 14c7717

File tree

6 files changed

+197
-105
lines changed

6 files changed

+197
-105
lines changed

‎src/reducers/bottomReducers.ts

Whitespace-only changes.

‎src/reducers/componentReducer.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { initialApplicationState } from './initialState';
22
import { Action } from '../intefaces/Interfaces';
33

4+
import { addComponent } from './leftReducers'
5+
46
import {
57
LOAD_INIT_DATA,
68
ADD_COMPONENT,
@@ -33,7 +35,6 @@ import {
3335
} from '../actionTypes/index';
3436

3537
import {
36-
addComponent,
3738
addChild,
3839
deleteChild,
3940
deleteComponent,

‎src/reducers/initialState.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import cloneDeep from '../helperFunctions/cloneDeep';
2+
import getColor from '../helperFunctions/colors';
23

34
import {
45
ComponentInt,
@@ -63,3 +64,21 @@ export const initialApplicationState: ApplicationStateInt = {
6364
future: []
6465
};
6566

67+
export const initialComponentState: ComponentInt = {
68+
id: 0,
69+
stateful: false,
70+
classBased: false,
71+
title: '',
72+
color: getColor(),
73+
props: [],
74+
nextPropId: 1,
75+
position: {
76+
x: 25,
77+
y: 25,
78+
width: 800,
79+
height: 550,
80+
},
81+
childrenArray: [],
82+
nextChildId: 1,
83+
focusChildId: 0,
84+
};

‎src/reducers/leftReducers.ts

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import cloneDeep from '../helperFunctions/cloneDeep';
2+
import getColor from '../helperFunctions/colors';
3+
import { ComponentInt, ApplicationStateInt } from '../intefaces/Interfaces';
4+
import { initialComponentState } from './initialState';
5+
import { createHistory } from '../helperFunctions/createHistory';
6+
7+
export const addComponent = (
8+
state: ApplicationStateInt,
9+
{ title }: { title: string }
10+
) => {
11+
// remove whitespace and digits, capitalize first char
12+
const strippedTitle = title
13+
.replace(/[a-z]+/gi, word => word[0].toUpperCase() + word.slice(1))
14+
.replace(/[-_\s0-9\W]+/gi, '');
15+
16+
// duplicate component names not allowed
17+
if (
18+
state.components.find((comp: ComponentInt) => comp.title === strippedTitle)
19+
) {
20+
window.alert(
21+
`A component with the name: "${strippedTitle}" already exists.\n Please think of another name.`
22+
);
23+
return {
24+
...state,
25+
};
26+
}
27+
28+
// empty component name not allowed
29+
if (strippedTitle === '') {
30+
return {
31+
...state,
32+
};
33+
}
34+
35+
//chooses a color for the component from the random color generator
36+
let componentColor = getColor();
37+
//Makes sure no two consecutive components have the same color
38+
const lastComponent = state.components.reduce((acc, curr) =>
39+
curr.id > acc.id ? curr : acc
40+
).color;
41+
while (componentColor === lastComponent) {
42+
componentColor = getColor();
43+
}
44+
45+
//assigns the componentID to whatever is supposed to be next
46+
const componentId = state.nextId;
47+
48+
//creates a newcomponent and prepares it to be added to an array of components in the store
49+
const newComponent: ComponentInt = {
50+
...initialComponentState,
51+
title: strippedTitle,
52+
id: componentId,
53+
color: componentColor,
54+
childrenArray: [],
55+
};
56+
57+
const components = [...state.components, newComponent];
58+
59+
//increments both total components and the nextID
60+
const totalComponents = state.totalComponents + 1;
61+
const nextId = state.nextId + 1;
62+
63+
//creates an array of component IDs that can be added as children to this newly created component.
64+
//the newly created component and the App component are never selectable.
65+
const selectableChildren = state.components
66+
.map((comp: ComponentInt) => comp.id)
67+
.filter((id: number) => id !== newComponent.id);
68+
69+
const ancestors: Array<number> = [];
70+
71+
// reset focused child to null values so when focused component is assigned to the newly created component,
72+
//child from previously focused component doesn;t show up
73+
const newFocusChild = cloneDeep(state.initialApplicationFocusChild);
74+
75+
const { history, historyIndex, future } = createHistory(state);
76+
77+
return {
78+
...state,
79+
totalComponents,
80+
nextId,
81+
components,
82+
focusComponent: newComponent,
83+
focusChild: newFocusChild,
84+
ancestors,
85+
selectableChildren, // new component so everyone except yourself is available
86+
history,
87+
historyIndex,
88+
future,
89+
};
90+
};

‎src/reducers/mainReducers.ts

Whitespace-only changes.

‎src/utils/componentReducer.util.ts

Lines changed: 86 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -13,110 +13,92 @@ import {
1313
import { createHistory } from '../helperFunctions/createHistory';
1414

1515
//this is the default values for any component added to the app.
16-
17-
const initialComponentState: ComponentInt = {
18-
id: 0,
19-
stateful: false,
20-
classBased: false,
21-
title: '',
22-
color: getColor(),
23-
props: [],
24-
nextPropId: 1,
25-
position: {
26-
x: 25,
27-
y: 25,
28-
width: 800,
29-
height: 550,
30-
},
31-
childrenArray: [],
32-
nextChildId: 1,
33-
focusChildId: 0,
34-
};
35-
36-
export const addComponent = (
37-
state: ApplicationStateInt,
38-
{ title }: { title: string }
39-
) => {
40-
// remove whitespace and digits, capitalize first char
41-
const strippedTitle = title
42-
.replace(/[a-z]+/gi, word => word[0].toUpperCase() + word.slice(1))
43-
.replace(/[-_\s0-9\W]+/gi, '');
44-
45-
// duplicate component names not allowed
46-
if (
47-
state.components.find((comp: ComponentInt) => comp.title === strippedTitle)
48-
) {
49-
window.alert(
50-
`A component with the name: "${strippedTitle}" already exists.\n Please think of another name.`
51-
);
52-
return {
53-
...state,
54-
};
55-
}
56-
57-
// empty component name not allowed
58-
if (strippedTitle === '') {
59-
return {
60-
...state,
61-
};
62-
}
63-
64-
//chooses a color for the component from the random color generator
65-
let componentColor = getColor();
66-
//Makes sure no two consecutive components have the same color
67-
const lastComponent = state.components.reduce((acc, curr) =>
68-
curr.id > acc.id ? curr : acc
69-
).color;
70-
while (componentColor === lastComponent) {
71-
componentColor = getColor();
72-
}
73-
74-
//assigns the componentID to whatever is supposed to be next
75-
const componentId = state.nextId;
76-
77-
//creates a newcomponent and prepares it to be added to an array of components in the store
78-
const newComponent: ComponentInt = {
79-
...initialComponentState,
80-
title: strippedTitle,
81-
id: componentId,
82-
color: componentColor,
83-
childrenArray: [],
84-
};
85-
86-
const components = [...state.components, newComponent];
87-
88-
//increments both total components and the nextID
89-
const totalComponents = state.totalComponents + 1;
90-
const nextId = state.nextId + 1;
91-
92-
//creates an array of component IDs that can be added as children to this newly created component.
93-
//the newly created component and the App component are never selectable.
94-
const selectableChildren = state.components
95-
.map((comp: ComponentInt) => comp.id)
96-
.filter((id: number) => id !== newComponent.id);
97-
98-
const ancestors: Array<number> = [];
99-
100-
// reset focused child to null values so when focused component is assigned to the newly created component,
101-
//child from previously focused component doesn;t show up
102-
const newFocusChild = cloneDeep(state.initialApplicationFocusChild);
103-
104-
const { history, historyIndex, future } = createHistory(state);
105-
106-
return {
107-
...state,
108-
totalComponents,
109-
nextId,
110-
components,
111-
focusComponent: newComponent,
112-
focusChild: newFocusChild,
113-
ancestors,
114-
selectableChildren, // new component so everyone except yourself is available
115-
history,
116-
historyIndex,
117-
future,
118-
};
119-
};
16+
import { initialComponentState } from '../reducers/initialState';
17+
18+
// export const addComponent = (
19+
// state: ApplicationStateInt,
20+
// { title }: { title: string }
21+
// ) => {
22+
// // remove whitespace and digits, capitalize first char
23+
// const strippedTitle = title
24+
// .replace(/[a-z]+/gi, word => word[0].toUpperCase() + word.slice(1))
25+
// .replace(/[-_\s0-9\W]+/gi, '');
26+
27+
// // duplicate component names not allowed
28+
// if (
29+
// state.components.find((comp: ComponentInt) => comp.title === strippedTitle)
30+
// ) {
31+
// window.alert(
32+
// `A component with the name: "${strippedTitle}" already exists.\n Please think of another name.`
33+
// );
34+
// return {
35+
// ...state,
36+
// };
37+
// }
38+
39+
// // empty component name not allowed
40+
// if (strippedTitle === '') {
41+
// return {
42+
// ...state,
43+
// };
44+
// }
45+
46+
// //chooses a color for the component from the random color generator
47+
// let componentColor = getColor();
48+
// //Makes sure no two consecutive components have the same color
49+
// const lastComponent = state.components.reduce((acc, curr) =>
50+
// curr.id > acc.id ? curr : acc
51+
// ).color;
52+
// while (componentColor === lastComponent) {
53+
// componentColor = getColor();
54+
// }
55+
56+
// //assigns the componentID to whatever is supposed to be next
57+
// const componentId = state.nextId;
58+
59+
// //creates a newcomponent and prepares it to be added to an array of components in the store
60+
// const newComponent: ComponentInt = {
61+
// ...initialComponentState,
62+
// title: strippedTitle,
63+
// id: componentId,
64+
// color: componentColor,
65+
// childrenArray: [],
66+
// };
67+
68+
// const components = [...state.components, newComponent];
69+
70+
// //increments both total components and the nextID
71+
// const totalComponents = state.totalComponents + 1;
72+
// const nextId = state.nextId + 1;
73+
74+
// //creates an array of component IDs that can be added as children to this newly created component.
75+
// //the newly created component and the App component are never selectable.
76+
// const selectableChildren = state.components
77+
// .map((comp: ComponentInt) => comp.id)
78+
// .filter((id: number) => id !== newComponent.id);
79+
80+
// const ancestors: Array<number> = [];
81+
82+
// // reset focused child to null values so when focused component is assigned to the newly created component,
83+
// //child from previously focused component doesn;t show up
84+
// const newFocusChild = cloneDeep(state.initialApplicationFocusChild);
85+
86+
// const { history, historyIndex, future } = createHistory(state);
87+
88+
// return {
89+
// ...state,
90+
// totalComponents,
91+
// nextId,
92+
// components,
93+
// focusComponent: newComponent,
94+
// focusChild: newFocusChild,
95+
// ancestors,
96+
// selectableChildren, // new component so everyone except yourself is available
97+
// history,
98+
// historyIndex,
99+
// future,
100+
// };
101+
// };
120102

121103
//reducer function to add component or HTML child to currently focused component
122104
export const addChild = (

0 commit comments

Comments
 (0)