added changeComponentFocusChild to reducers

Author: ChristianEdwardPadilla

src/actionTypes/index.js

@@ -1,27 +1,28 @@
-export const LOAD_INIT_DATA = "LOAD_INIT_DATA";
-export const ADD_COMPONENT = "ADD_COMPONENT";
-export const ADD_CHILD = "ADD_CHILD";
-export const DELETE_CHILD = "DELETE_CHILD";
-export const UPDATE_COMPONENT = "UPDATE_COMPONENT";
-export const DELETE_COMPONENT = "DELETE_COMPONENT";
-export const CHANGE_FOCUS_COMPONENT = "CHANGE_FOCUS_COMPONENT";
-export const CHANGE_FOCUS_CHILD = "CHANGE_FOCUS_CHILD";
-export const UPDATE_CHILDREN = "UPDATE_CHILDREN";
-export const REASSIGN_PARENT = "REASSIGN_PARENT";
-export const SET_SELECTABLE_PARENTS = "SET_SELECTABLE_PARENTS";
-export const EXPORT_FILES = "EXPORT_FILES";
-export const EXPORT_FILES_SUCCESS = "EXPORT_FILES_SUCCESS";
-export const EXPORT_FILES_ERROR = "EXPORT_FILES_ERROR";
-export const HANDLE_CLOSE = "HANDLE_CLOSE";
-export const HANDLE_TRANSFORM = "HANDLE_TRANSFORM";
-export const CREATE_APPLICATION = "CREATE_APPLICATION";
-export const CREATE_APPLICATION_SUCCESS = "CREATE_APPLICATION_SUCCESS";
-export const CREATE_APPLICATION_ERROR = "CREATE_APPLICATION_ERROR";
-export const TOGGLE_DRAGGING = "TOGGLE_DRAGGING";
-export const MOVE_TO_BOTTOM = "MOVE_TO_BOTTOM";
-export const MOVE_TO_TOP = "MOVE_TO_TOP";
-export const OPEN_EXPANSION_PANEL = "OPEN_EXPANSION_PANEL";
-export const DELETE_PROP = "DELETE_PROP";
-export const ADD_PROP = "ADD_PROP";
-export const DELETE_ALL_DATA = "DELETE_ALL_DATA";
-export const CHANGE_IMAGE_PATH = "CHANGE_IMAGE_PATH";
+export const LOAD_INIT_DATA = 'LOAD_INIT_DATA';
+export const ADD_COMPONENT = 'ADD_COMPONENT';
+export const ADD_CHILD = 'ADD_CHILD';
+export const DELETE_CHILD = 'DELETE_CHILD';
+export const UPDATE_COMPONENT = 'UPDATE_COMPONENT';
+export const DELETE_COMPONENT = 'DELETE_COMPONENT';
+export const CHANGE_FOCUS_COMPONENT = 'CHANGE_FOCUS_COMPONENT';
+export const CHANGE_COMPONENT_FOCUS_CHILD = 'CHANGE_COMPONENT_FOCUS_CHILD';
+export const CHANGE_FOCUS_CHILD = 'CHANGE_FOCUS_CHILD';
+export const UPDATE_CHILDREN = 'UPDATE_CHILDREN';
+export const REASSIGN_PARENT = 'REASSIGN_PARENT';
+export const SET_SELECTABLE_PARENTS = 'SET_SELECTABLE_PARENTS';
+export const EXPORT_FILES = 'EXPORT_FILES';
+export const EXPORT_FILES_SUCCESS = 'EXPORT_FILES_SUCCESS';
+export const EXPORT_FILES_ERROR = 'EXPORT_FILES_ERROR';
+export const HANDLE_CLOSE = 'HANDLE_CLOSE';
+export const HANDLE_TRANSFORM = 'HANDLE_TRANSFORM';
+export const CREATE_APPLICATION = 'CREATE_APPLICATION';
+export const CREATE_APPLICATION_SUCCESS = 'CREATE_APPLICATION_SUCCESS';
+export const CREATE_APPLICATION_ERROR = 'CREATE_APPLICATION_ERROR';
+export const TOGGLE_DRAGGING = 'TOGGLE_DRAGGING';
+export const MOVE_TO_BOTTOM = 'MOVE_TO_BOTTOM';
+export const MOVE_TO_TOP = 'MOVE_TO_TOP';
+export const OPEN_EXPANSION_PANEL = 'OPEN_EXPANSION_PANEL';
+export const DELETE_PROP = 'DELETE_PROP';
+export const ADD_PROP = 'ADD_PROP';
+export const DELETE_ALL_DATA = 'DELETE_ALL_DATA';
+export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';

src/actions/components.js

@@ -7,6 +7,7 @@ import {
   DELETE_COMPONENT,
   CHANGE_FOCUS_COMPONENT,
   CHANGE_FOCUS_CHILD,
+  CHANGE_COMPONENT_FOCUS_CHILD,
   UPDATE_CHILDREN,
   REASSIGN_PARENT,
   SET_SELECTABLE_PARENTS,
@@ -133,6 +134,10 @@ export const changeFocusChild = ({ title, childId }) => (dispatch) => {
   dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
 };
 
+export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {
+  dispatch({ type: CHANGE_COMPONENT_FOCUS_CHILD, payload: { componentId, childId } });
+};
+
 // export const exportFiles = ({ components, path }) => (dispatch) => {
 //   dispatch({
 //     type: EXPORT_FILES,

src/components/KonvaStage.jsx

@@ -59,6 +59,10 @@ class KonvaStage extends Component {
     const rectChildId = e.target.attrs.childId;
     console.log('e.target : ', rectChildId);
     this.props.changeFocusChild({ childId: rectChildId });
+    this.props.changeComponentFocusChild({
+      componentId: this.props.focusComponent.id,
+      childId: rectChildId,
+    });
     //  put individual component's focus child logic here
   };
 
@@ -73,6 +77,7 @@ class KonvaStage extends Component {
       focusComponent,
       focusChild,
       changeFocusChild,
+      changeComponentFocusChild,
     } = this.props;
     const { selectedShapeName } = this.state;
 

src/components/Rectangle.jsx

@@ -117,7 +117,7 @@ class Rectangle extends Component {
               color={grandchild.color}
             />
           ))}
-        {focusChild.childId === childId && draggable ? (
+        {focusChild && focusChild.childId === childId && draggable ? (
           <TransformerComponent focusChild={focusChild} />
         ) : (
           <Label />

src/containers/MainContainer.jsx

@@ -12,6 +12,7 @@ import {
   openExpansionPanel,
   handleTransform,
   changeFocusChild,
+  changeComponentFocusChild,
   deleteChild,
   deleteComponent,
 } from '../actions/components';
@@ -36,6 +37,7 @@ const mapDispatchToProps = dispatch => ({
   toggleComponentDragging: status => dispatch(toggleDragging(status)),
   openPanel: component => dispatch(openExpansionPanel(component)),
   changeFocusChild: ({ title, childId }) => dispatch(changeFocusChild({ title, childId })),
+  changeComponentFocusChild: ({ componentId, childId }) => dispatch(changeComponentFocusChild({ componentId, childId })),
   deleteChild: ({}) => dispatch(deleteChild({})), // if u send no prms, function will delete focus child.
   deleteComponent: ({ componentId, stateComponents }) => dispatch(deleteComponent({ componentId, stateComponents })),
 });
@@ -85,6 +87,7 @@ class MainContainer extends Component {
       focusComponent,
       focusChild,
       changeFocusChild,
+      changeComponentFocusChild,
       deleteChild,
       deleteComponent,
       stateComponents,
@@ -124,6 +127,7 @@ class MainContainer extends Component {
               focusComponent={focusComponent}
               focusChild={focusChild}
               changeFocusChild={changeFocusChild}
+              changeComponentFocusChild={changeComponentFocusChild}
               deleteChild={deleteChild}
             />
           </div>

src/reducers/componentReducer.js

@@ -7,6 +7,7 @@ import {
   DELETE_COMPONENT,
   CHANGE_FOCUS_COMPONENT,
   CHANGE_FOCUS_CHILD,
+  CHANGE_COMPONENT_FOCUS_CHILD,
   UPDATE_CHILDREN,
   REASSIGN_PARENT,
   SET_SELECTABLE_PARENTS,
@@ -34,6 +35,7 @@ import {
   updateComponent,
   deleteComponent,
   changeFocusComponent,
+  changeComponentFocusChild,
   changeFocusChild,
   updateChildren,
   reassignParent,
@@ -139,6 +141,8 @@ const componentReducer = (state = initialApplicationState, action) => {
       return changeFocusComponent(state, action.payload);
     case CHANGE_FOCUS_CHILD:
       return changeFocusChild(state, action.payload);
+    case CHANGE_COMPONENT_FOCUS_CHILD:
+      return changeComponentFocusChild(state, action.payload);
     case UPDATE_CHILDREN:
       return updateChildren(state, action.payload);
     case REASSIGN_PARENT:

src/utils/componentReducer.util.js

@@ -100,6 +100,7 @@ export const addChild = (state, { title }) => {
   const component = {
     ...view,
     childrenArray: compsChildrenArr,
+    focusChildId: newChild.childId,
     nextChildId: view.nextChildId + 1,
   };
 
@@ -306,6 +307,16 @@ export const changeFocusChild = (state, { title, childId }) => {
   };
 };
 
+export const changeComponentFocusChild = (state, { componentId, childId }) => {
+  const component = state.components.find(comp => comp.id == componentId);
+  component.focusChildId = childId;
+  const components = state.components.filter(comp => comp.id != componentId);
+  return {
+    ...state,
+    components: [component, ...components],
+  };
+};
+
 // Add or remove children
 export const updateChildren = (state, { parentIds, childId }) => {
   const components = state.components.map((component) => {