add component and add child is broken down into two within redux files. focus component is also fixed

Author: Tolga Mizrakci

src/actions/components.js

@@ -27,8 +27,8 @@ import {
 
 import { loadState } from '../localStorage';
 
-import createFiles from '../utils/createFiles.util';
-import createApplicationUtil from '../utils/createApplication.util';
+// import createFiles from '../utils/createFiles.util';
+// import createApplicationUtil from '../utils/createApplication.util';
 
 export const loadInitData = () => (dispatch) => {
   loadState()
@@ -60,11 +60,11 @@ export const parentReassignment = (({ index, id, parentIds }) => ({
 
 export const addComponent = ({ title }) => (dispatch) => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
-  dispatch({ type: SET_SELECTABLE_PARENTS });
+  // dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
 export const addChild = ({ title }) => (dispatch) => {
-  dispatch({ type: ADD_CHILD, payload: { title } });
+  dispatch({ type: ADD_CHILD, payload: { title, view } });
   // dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
@@ -167,10 +167,10 @@ export const toggleDragging = status => ({
 //   payload: componentId,
 // });
 
-// export const openExpansionPanel = component => ({
-//   type: OPEN_EXPANSION_PANEL,
-//   payload: { component },
-// });
+export const openExpansionPanel = component => ({
+  type: OPEN_EXPANSION_PANEL,
+  payload: { component },
+});
 
 // export const deleteAllData = () => ({
 //   type: DELETE_ALL_DATA,

src/containers/LeftContainer.tsx

@@ -25,7 +25,7 @@ const mapDispatchToProps = dispatch => ({
   // }) => dispatch(actions.deleteComponent({ index, id, parentIds })),
   // moveToBottom: componentId => dispatch(actions.moveToBottom(componentId)),
   // moveToTop: componentId => dispatch(actions.moveToTop(componentId)),
-  // openExpansionPanel: component => dispatch(actions.openExpansionPanel(component)),
+  openExpansionPanel: component => dispatch(actions.openExpansionPanel(component)),
   // deleteAllData: () => dispatch(actions.deleteAllData()),
 });
 

src/utils/componentReducer.util.js

@@ -19,8 +19,23 @@ const initialComponentState = {
     width: 50,
     height: 50,
   },
+
+  childrenArray: [],
+  nextChildId: 1,
+  focusChild: null,
 };
 
+const initialChildState = {
+  childId: null,
+  componentName: null,
+  position: {
+    x: 110,
+    y: 120,
+    width: 50,
+    height: 50,
+  }
+}
+
 export const addComponent = (state, { title }) => {
   const strippedTitle = title
     .replace(/[a-z]+/gi,
@@ -50,32 +65,46 @@ export const addComponent = (state, { title }) => {
   };
 };
 
+// get title (aka the class associated with the new child)
+// get the focus component (aka the component were adding the child to)
+
 export const addChild = (state, { title }) => {
   const strippedTitle = title
     .replace(/[a-z]+/gi,
       word => word[0].toUpperCase() + word.slice(1))
     .replace(/[-_\s0-9\W]+/gi, '');
-  const newComponent = {
-    ...initialComponentState,
-    title: strippedTitle,
-    id: state.nextId.toString(),
-    color: getColor(),
+  
+  const newChild = {
+    childId: state.components.nextChildId.toString(),
+    componentName: strippedTitle,
+    position: {
+      x: 110,
+      y: 120,
+      width: 50,
+      height: 50,
+    }
+  };
+
+  let view = state.focusComponent;
+
+  const compsChildrenArr = [
+    ...state.components.view.childrenArray,
+    newChild
+  ]
+
+  const component = {
+    ...state.components.view,
+    childrenArray: compsChildrenArr,
   };
 
   const components = [
     ...state.components,
-    newComponent,
+    component,
   ];
 
-  const totalComponents = state.totalComponents + 1;
-  const nextId = state.nextId + 1;
-
   return {
     ...state,
-    totalComponents,
-    nextId,
     components,
-    focusComponent: newComponent,
   };
 };