Merge pull request #66 from ChristianEdwardPadilla/development

major object interfaces added, small reducer changes, no more string ids

Author: ChristianEdwardPadilla

src/actions/components.js

@@ -78,18 +78,15 @@ export const deleteChild = ({}) => dispatch => {
 
 export const deleteComponent = ({ componentId, stateComponents }) => dispatch => {
   // find all places where the "to be delted" is a child and do what u gotta do
-  stateComponents.forEach(parent => {
-    parent.childrenArray
-      .filter(child => child.childComponentId == componentId)
-      .forEach(child => {
-        dispatch({
-          type: DELETE_CHILD,
-          payload: {
-            parentId: parent.id,
-            childId: child.childId,
-            calledFromDeleteComponent: true,
-          },
-        });
+  stateComponents.forEach((parent) => {
+    parent.childrenArray.filter(child => child.childComponentId === componentId).forEach((child) => {
+      dispatch({
+        type: DELETE_CHILD,
+        payload: {
+          parentId: parent.id,
+          childId: child.childId,
+          calledFromDeleteComponent: true,
+        },
       });
   });
 
@@ -135,8 +132,13 @@ export const changeFocusComponent = ({ title }) => dispatch => {
 };
 
 // make sure childId is being sent in
+<<<<<<< HEAD
 export const changeFocusChild = ({ title, childId }) => dispatch => {
   dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
+=======
+export const changeFocusChild = ({ childId }) => (dispatch) => {
+  dispatch({ type: CHANGE_FOCUS_CHILD, payload: { childId } });
+>>>>>>> c532596... reducer cleanup, working version
 };
 
 export const changeComponentFocusChild = ({ componentId, childId }) => dispatch => {

src/components/GrandchildRectangle.jsx

@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
 import { Rect, Group } from 'react-konva';
+// import findComponentById from '../utils/findComponentById.ts';
 
 class GrandchildRectangle extends Component {
   getComponentColor(componentId) {
-    const color = this.props.components.find(comp => comp.id == componentId).color;
+    // const color = findComponentById(componentId, this.props.components).color;
+    const color = this.props.components.find(comp => comp.id === componentId).color;
     return color;
   }
 
@@ -26,7 +28,6 @@ class GrandchildRectangle extends Component {
       height,
       focusChild,
       components,
-      childType,
     } = this.props;
 
     // the Group is responsible for dragging of all children
@@ -54,7 +55,7 @@ class GrandchildRectangle extends Component {
         {childType === 'COMP' &&
           components
             .find(comp => comp.title === childComponentName)
-            .childrenArray.filter(child => child.childId !== '-1')
+            .childrenArray.filter(child => child.childId !== -1)
             .map((grandchild, i) => (
               <GrandchildRectangle
                 key={i}

src/components/KonvaStage.tsx

@@ -19,12 +19,12 @@ class KonvaStage extends Component {
   getDirectChildrenCopy(focusComponent) {
     const component = this.props.components.find(comp => comp.id === focusComponent.id);
 
-    const childrenArr = component.childrenArray.filter(child => child.childId !== '-1');
+    const childrenArr = component.childrenArray.filter(child => child.childId !== -1);
 
     let childrenArrCopy = cloneDeep(childrenArr);
 
     const pseudoChild = {
-      childId: '-1',
+      childId: -1,
       childComponentId: component.id,
       componentName: component.title,
       position: {
@@ -182,7 +182,7 @@ class KonvaStage extends Component {
                   childComponentId={child.childComponentId}
                   childComponentName={child.componentName}
                   focusChild={focusChild}
-                  childId={child.childId} // '-1' for pseudoChild
+                  childId={child.childId} // -1 for pseudoChild
                   x={child.position.x}
                   y={child.position.y}
                   scaleX={1}

src/components/LeftColExpansionPanel.jsx

@@ -28,12 +28,12 @@ const LeftColExpansionPanel = (props) => {
 
   // show a string of all direct parents. SO the user can gaze at it.
   const directParents = components
-    .filter(comp => comp.childrenArray.some(kiddy => kiddy.childComponentId == id))
+    .filter(comp => comp.childrenArray.some(child => child.childComponentId === id))
     .map(comp => comp.title)
     .join(',');
 
   function isFocused() {
-    return focusComponent.id == id ? 'focused' : '';
+    return focusComponent.id === id ? 'focused' : '';
   }
 
   return (
@@ -67,7 +67,7 @@ const LeftColExpansionPanel = (props) => {
               </ListItem>
             </List>
           </Grid>
-          {id == 1 || !isFocused() ? (
+          {id === 1 || !isFocused() ? (
             <div />
           ) : (
             <Fragment>
@@ -134,7 +134,7 @@ const LeftColExpansionPanel = (props) => {
       </Grid>
 
       <Grid item xs={3}>
-        {id == 1 || isFocused() || !selectableChildren.includes(id) ? (
+        {id === 1 || isFocused() || !selectableChildren.includes(id) ? (
           <div />
         ) : (
           <IconButton aria-label="Add">

src/components/Rectangle.tsx

@@ -8,7 +8,7 @@ class Rectangle extends Component {
     if (componentId === '888') {
       return '#000000';
     }
-    const color = this.props.components.find(comp => comp.id == componentId).color;
+    const color = this.props.components.find(comp => comp.id === componentId).color;
     return color;
   }
 
@@ -23,7 +23,7 @@ class Rectangle extends Component {
       .find(comp => comp.id === this.props.componentId)
       .childrenArray.find(child => child.childId === childId);
 
-    if (childId == '-1') {
+    if (childId === -1) {
       focChild = this.props.components.find(comp => comp.id === this.props.componentId);
     }
     const transformation = {
@@ -110,8 +110,8 @@ class Rectangle extends Component {
           strokeWidth={4}
           strokeScaleEnabled={false}
           draggable={false}
-          fill={childId === '-1' ? 'white' : null}
-          shadowBlur={childId === '-1' ? 6 : null}
+          fill={childId === -1 ? 'white' : null}
+          shadowBlur={childId === -1 ? 6 : null}
           // dashEnabled={childId === "-1"} // dash line only enabled for pseudochild
           // dash={[10, 3]} // 10px dashes with 3px gaps
         />
@@ -120,19 +120,19 @@ class Rectangle extends Component {
             fontStyle={'bold'}
             fontVariant={'small-caps'}
             // pseudochild's label should look different than normal children:
-            text={childId === '-1' ? title.slice(0, title.length - 2) : title}
-            fill={childId === '-1' ? this.getComponentColor(childComponentId) : '#000000'}
-            fontSize={childId === '-1' ? 15 : 10}
+            text={childId === -1 ? title.slice(0, title.length - 2) : title}
+            fill={childId === -1 ? this.getComponentColor(childComponentId) : '#000000'}
+            fontSize={childId === -1 ? 15 : 10}
             x={4}
-            y={childId === '-1' ? -20 : -12}
+            y={childId === -1 ? -20 : -12}
           />
         </Label>
         {// for all children other than the pseudoChild, find their component's children array and recursively render the children found there
-        childId !== '-1' &&
-          childType == 'COMP' &&
+        childId !== -1 &&
+          childType === 'COMP' &&
           components
             .find(comp => comp.title === childComponentName)
-            .childrenArray.filter(child => child.childId !== '-1')
+            .childrenArray.filter(child => child.childId !== -1)
             // .sort((a, b) => parseInt(a.childId) - parseInt(b.childId)) // using i within map below, sorting by childId might be necessary
             .map((grandchild, i) => (
               <GrandchildRectangle

src/containers/LeftContainer.jsx

@@ -25,7 +25,7 @@ const mapDispatchToProps = dispatch => ({
     ),
   addChild: ({ title, childType, HTMLInfo }) => dispatch(actions.addChild({ title, childType, HTMLInfo })),
   changeFocusComponent: ({ title }) => dispatch(actions.changeFocusComponent({ title })),
-  changeFocusChild: ({ title, childId }) => dispatch(actions.changeFocusChild({ title, childId })),
+  changeFocusChild: ({ childId }) => dispatch(actions.changeFocusChild({ childId })),
   deleteComponent: ({ componentId, stateComponents }) =>
     dispatch(actions.deleteComponent({ componentId, stateComponents })),
 });

src/containers/MainContainer.tsx

@@ -34,7 +34,7 @@ const mapDispatchToProps = dispatch => ({
       }),
     ),
   openPanel: component => dispatch(openExpansionPanel(component)),
-  changeFocusChild: ({ title, childId }) => dispatch(changeFocusChild({ title, childId })),
+  changeFocusChild: ({ childId }) => dispatch(changeFocusChild({ childId })),
   changeComponentFocusChild: ({ componentId, childId }) =>
     dispatch(changeComponentFocusChild({ componentId, childId })),
   deleteChild: ({}) => dispatch(deleteChild({})), // if u send no prms, function will delete focus child.
@@ -205,7 +205,7 @@ class MainContainer extends Component {
     const directParents = !focusComponent.id
       ? 'Waiting for a focused component'
       : stateComponents
-          .filter(comp => comp.childrenArray.some(kiddy => kiddy.childComponentId == focusComponent.id))
+          .filter(comp => comp.childrenArray.some(kiddy => kiddy.childComponentId === focusComponent.id))
           .map(comp => comp.title)
           .join(',');
 

src/reducers/componentReducer.ts

@@ -71,15 +71,14 @@ interface Component {
 }
 
 const appComponent = {
-  id: '1',
+  id: 1,
   stateful: false,
   title: 'App',
   parentIds: [],
   color: '#FF6D00',
   draggable: true,
   childrenIds: [],
   selectableParents: [],
-  expanded: true,
   props: [],
   nextPropId: 1,
   position: {