added interfaces of major state objects to findComponentById and removed loosely equal comparators

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,
+        },
       });
   });
 

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;
   }
 

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 = {
@@ -129,7 +129,7 @@ class Rectangle extends Component {
         </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' &&
+          childType === 'COMP' &&
           components
             .find(comp => comp.title === childComponentName)
             .childrenArray.filter(child => child.childId !== -1)

src/containers/MainContainer.tsx

@@ -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

@@ -79,7 +79,6 @@ const appComponent = {
   draggable: true,
   childrenIds: [],
   selectableParents: [],
-  expanded: true,
   props: [],
   nextPropId: 1,
   position: {

src/utils/componentReducer.util.js

@@ -13,7 +13,6 @@ const initialComponentState = {
   //draggable: true,
   childrenIds: [],
   selectableParents: [],
-  expanded: true,
   props: [],
   nextPropId: 1,
   position: {
@@ -111,7 +110,7 @@ export const addChild = (state, { title, childType = '', HTMLInfo = {} }) => {
   }
 
   let htmlElemPosition;
-  if (childType == 'HTML') {
+  if (childType === 'HTML') {
     htmlElemPosition = getSize(htmlElement);
     // if above function doesnt reutn anything, it means html element is not in our database
     if (!htmlElemPosition.width) {
@@ -139,7 +138,7 @@ export const addChild = (state, { title, childType = '', HTMLInfo = {} }) => {
   const newChild = {
     childId: view.nextChildId,
     childType,
-    childComponentId: childType == 'COMP' ? parentComponent.id : null, // only relevant fot children of type COMPONENT
+    childComponentId: childType === 'COMP' ? parentComponent.id : null, // only relevant fot children of type COMPONENT
     componentName: strippedTitle,
     position: newPosition,
     // draggable: true,
@@ -198,17 +197,17 @@ export const deleteChild = (
     return state;
   }
   // make a DEEP copy of the parent component (the one thats about to loose a child)
-  const parentComponentCopy = cloneDeep(state.components.find(c => c.id == parentId));
+  const parentComponentCopy = cloneDeep(state.components.find(c => c.id === parentId));
 
   // delete the  CHILD from the copied array
-  const indexToDelete = parentComponentCopy.childrenArray.findIndex(elem => elem.childId == childId);
+  const indexToDelete = parentComponentCopy.childrenArray.findIndex(elem => elem.childId === childId);
   if (indexToDelete < 0) {
     return window.alert('No such child component found');
   }
   parentComponentCopy.childrenArray.splice(indexToDelete, 1);
 
   // if deleted child is selected, reset it
-  if (parentComponentCopy.focusChildId == childId) {
+  if (parentComponentCopy.focusChildId === childId) {
     parentComponentCopy.focusChildId = 0;
   }
 
@@ -336,7 +335,7 @@ export const deleteComponent = (state, { componentId }) => {
   //   ...state.components.slice(0, index),
   //   ...state.components.slice(index + 1)
   // ];
-  if (componentId == 1) {
+  if (componentId === 1) {
     return {
       ...state,
     };
@@ -368,7 +367,7 @@ export const changeFocusComponent = (state, { title = state.focusComponent.title
 
   let newFocusChild; // check if the components has a child saved as a Focus child
   if (newFocusComp.focusChildId > 0) {
-    newFocusChild = newFocusComp.childrenArray.find(child => child.childId == newFocusComp.focusChildId);
+    newFocusChild = newFocusComp.childrenArray.find(child => child.childId === newFocusComp.focusChildId);
   }
 
   // if no docus child found .. reset
@@ -417,9 +416,9 @@ export const changeFocusChild = (state, { title, childId }) => {
 };
 
 export const changeComponentFocusChild = (state, { componentId, childId }) => {
-  const component = state.components.find(comp => comp.id == componentId);
+  const component = state.components.find(comp => comp.id === componentId);
   component.focusChildId = childId;
-  const components = state.components.filter(comp => comp.id != componentId);
+  const components = state.components.filter(comp => comp.id !== componentId);
   return {
     ...state,
     components: [component, ...components],
@@ -584,7 +583,7 @@ export const addProp = (state, { key, value = null, required, type }) => {
     return state;
   }
 
-  const selectedComponent = state.components.find(comp => comp.id == state.focusComponent.id);
+  const selectedComponent = state.components.find(comp => comp.id === state.focusComponent.id);
 
   const newProp = {
     id: selectedComponent.nextPropId,
@@ -617,17 +616,17 @@ export const deleteProp = (state, propId) => {
     return state;
   }
   // make a deep copy of focusCOmponent. we are gonne be modifying that copy
-  const modifiedComponent = cloneDeep(state.components.find(comp => comp.id == state.focusComponent.id));
+  const modifiedComponent = cloneDeep(state.components.find(comp => comp.id === state.focusComponent.id));
 
-  const indexToDelete = modifiedComponent.props.findIndex(prop => prop.id == propId);
+  const indexToDelete = modifiedComponent.props.findIndex(prop => prop.id === propId);
   if (indexToDelete < 0) {
     console.log(`Delete prop Error. Prop id:${propId} not found in ${modifiedComponent.title}`);
     return state;
   }
 
   modifiedComponent.props.splice(indexToDelete, 1);
 
-  const newComponentsArray = state.components.filter(comp => comp.id != modifiedComponent.id);
+  const newComponentsArray = state.components.filter(comp => comp.id !== modifiedComponent.id);
   newComponentsArray.push(modifiedComponent);
 
   return {
@@ -647,14 +646,14 @@ export const updateHtmlAttr = (state, { attr, value }) => {
   modifiedChild.HTMLInfo[attr] = value;
 
   // make a deep copy of focusCOmponent. we are gonne be modifying that copy
-  const modifiedComponent = cloneDeep(state.components.find(comp => comp.id == state.focusComponent.id));
+  const modifiedComponent = cloneDeep(state.components.find(comp => comp.id === state.focusComponent.id));
 
   modifiedComponent.childrenArray = modifiedComponent.childrenArray.filter(
-    child => child.childId != modifiedChild.childId,
+    child => child.childId !== modifiedChild.childId,
   );
   modifiedComponent.childrenArray.push(modifiedChild);
 
-  const newComponentsArray = state.components.filter(comp => comp.id != modifiedComponent.id);
+  const newComponentsArray = state.components.filter(comp => comp.id !== modifiedComponent.id);
   newComponentsArray.push(modifiedComponent);
 
   return {

src/utils/findComponentById.ts

@@ -1,10 +1,49 @@
+interface Prop {
+  id: number;
+  key: string;
+  value: string;
+  required: boolean;
+  type: string;
+}
+
+interface Position {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
 
-interface component{
-  id: string;
+interface Child {
+  childId: number;
+  childType: string;
+  childComponentId: number;
+  componentName: string;
+  position: Position;
+  color: string | null; // maybe optional instead, look up null vs undefined
+  htmlElement: string | null; // maybe should be optional instead
+  HTMLInfo: object; // replace with HTMLinfo specifics
 }
 
-function findComponentById(id: number, components: ){
+interface Component {
+  id: number;
+  stateful: boolean;
+  title: string;
+  parentIds: number[];
+  color: string;
+  draggable: boolean;
+  childrenIds: number[];
+  selectableParents?: any[]; // unused
+  expanded?: boolean; // unused
+  props: Prop[];
+  nextPropId: number;
+  position: Position;
+  childrenArray: Child[];
+  nextChildId: number;
+  focusChildId: number;
+}
 
+function findComponentById(id: number, components: Component[]) {
+  return components.find(comp => comp.id === id);
 }
 
-export default findComponentById
+export default findComponentById;