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

Author: ChristianEdwardPadilla

src/actions/components.js

@@ -77,7 +77,7 @@ 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) => {
+    parent.childrenArray.filter(child => child.childComponentId === componentId).forEach((child) => {
       dispatch({
         type: DELETE_CHILD,
         payload: {

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.jsx

@@ -10,7 +10,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;
   }
 
@@ -25,7 +25,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 = {
@@ -127,7 +127,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.jsx

@@ -196,7 +196,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.js

@@ -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: {
@@ -115,7 +114,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) {
@@ -144,7 +143,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,
@@ -207,19 +206,19 @@ 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,
+    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;
   }
 
@@ -347,7 +346,7 @@ export const deleteComponent = (state, { componentId }) => {
   //   ...state.components.slice(0, index),
   //   ...state.components.slice(index + 1)
   // ];
-  if (componentId == 1) {
+  if (componentId === 1) {
     return {
       ...state,
     };
@@ -380,7 +379,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,
+      child => child.childId === newFocusComp.focusChildId,
     );
   }
 
@@ -430,9 +429,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],
@@ -599,7 +598,7 @@ export const addProp = (state, {
     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,
@@ -633,18 +632,18 @@ export const deleteProp = (state, propId) => {
   }
   // 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),
+    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 {
@@ -665,15 +664,15 @@ export const updateHtmlAttr = (state, { 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),
+    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;