Commented component reducer in utils half way

Author: tonyito

src/components/KonvaStage.tsx

@@ -54,17 +54,21 @@ class KonvaStage extends Component<PropsInt, StateInt> {
     };
   }
 
+  //makes a copy of the array of children plus the parent component pushed onto it
   getDirectChildrenCopy(focusComponent: ComponentInt) {
+    //assign component to the docused component
     const component = this.props.components.find(
       (comp: ComponentInt) => comp.id === focusComponent.id
     );
-
+    //assign childrenArr to an array of all the children of focused component
     const childrenArr = component.childrenArray.filter(
       (child: ChildInt) => child.childId !== -1
     );
 
+    //deep clone of childrenArr so addition of parent doesn't mutate the children saved in the state
     let childrenArrCopy = cloneDeep(childrenArr);
 
+    //adds a pseudochild witrh the parent component's property to the copied children array
     const pseudoChild = {
       childId: -1,
       childComponentId: component.id,
@@ -79,6 +83,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
       color: component.color
     };
     childrenArrCopy = childrenArrCopy.concat(pseudoChild); // could just use push here, concat needlessly generate new array
+    //returns that new childrenArr + parent component
     return childrenArrCopy;
   }
 
@@ -221,6 +226,8 @@ class KonvaStage extends Component<PropsInt, StateInt> {
             }}
           >
             {this.state.grid}
+            {/* {The logic hereis that it creates a new rectangle or each component that belongs to this parent component, plus the parent component.
+            The parent component is rendered last. It renders based on the values in the return value of getDirectChildrenCopy. } */}
             {!isEmpty(focusComponent) && this.getDirectChildrenCopy(focusComponent) 
               .map((child: ChildInt, i: number) => (
                 <Rectangle

src/components/Rectangle.tsx

@@ -38,9 +38,7 @@ class Rectangle extends Component<PropsInt> {
   }
 
   //this grabs the component ID of the child component when in the parent component's display mode
-  //mysteriously name pseudochild although it is the true child of the component currently rendered on the stage...
-  //maybe some poeple don't consider children to be real children, kind of how my grandmother treated me better than 
-  //she treated my mother
+  //named pseudochild because it isn't saved as a child in the childrenArray.
   getPseudoChild() {
     return this.props.components.find(
       (comp: ComponentInt) => comp.id === this.props.childComponentId
@@ -158,7 +156,7 @@ class Rectangle extends Component<PropsInt> {
           stroke={
             childType === 'COMP'
               ? this.getComponentColor(childComponentId)
-              : '#000000' //sets the parent component color to black, this logic actually doesn't need to exist at the level of this component
+              : '#000000' //sets the parent component color to black
           }
           onTransformEnd={event =>
             this.handleResize(componentId, childId, event.target, blockSnapSize)

src/utils/componentReducer.util.ts

@@ -5,12 +5,14 @@ import cloneDeep from './cloneDeep';
 import {
   ComponentInt,
   ApplicationStateInt,
-  ChildrenInt,
+  //ChildrenInt, //unused import//
   ChildInt,
   ComponentsInt,
   PropInt
 } from './Interfaces';
 
+//this is the default values for any component added to the app.
+
 const initialComponentState: ComponentInt = {
   id: 0,
   stateful: false,
@@ -58,9 +60,12 @@ export const addComponent = (
     };
   }
 
+  //chooses a color for the component from the random color generator
   const componentColor = getColor();
+  //assigns the componentID to whatever issupposed to be next
   const componentId = state.nextId;
 
+  //creates a newcomponent and prepares it to be added to an array of components in the store
   const newComponent: ComponentInt = {
     ...initialComponentState,
     title: strippedTitle,
@@ -71,16 +76,21 @@ export const addComponent = (
 
   const components = [...state.components, newComponent];
 
+  //increments both total components and the nextID
   const totalComponents = state.totalComponents + 1;
   const nextId = state.nextId + 1;
 
+
+  //creates an array of component IDs that can be added as children to this newly created component.
+  //the newly created component and the App component are never selectable.
   const selectableChildren = state.components
     .map((comp: ComponentInt) => comp.id)
     .filter((id: number) => id !== newComponent.id);
 
   const ancestors: Array<number> = [];
 
-  // reset focused child
+  // reset focused child to null values so when focused component is assigned to the newly created component, 
+  //child from previously focused component doesn;t show up
   const newFocusChild = cloneDeep(state.initialApplicationFocusChild);
   return {
     ...state,
@@ -94,6 +104,7 @@ export const addComponent = (
   };
 };
 
+//reducer function to add component or HTML child to currently focused component
 export const addChild = (
   state: ApplicationStateInt,
   {
@@ -104,10 +115,12 @@ export const addChild = (
 ) => {
   const strippedTitle = title;
 
+  //is this warning even possible to trigger witht he current flow?
   if (!childType) {
     window.alert('addChild Error! no type specified');
   }
 
+  //weird use of a ternary operator, could've wrapped it in one if statement
   const htmlElement = childType !== 'COMP' ? childType : null;
   if (childType !== 'COMP') {
     childType = 'HTML';
@@ -138,14 +151,17 @@ export const addChild = (
   if (childType === 'HTML') {
     htmlElemPosition = getSize(htmlElement);
     // if above function doesnt reutn anything, it means html element is not in our database
+    //looks like the group that originally worked on this app planend to have a back end that accessed a DB with element types.
+    //I don't think this error does anything anymore either. 
     if (!htmlElemPosition.width) {
       console.log(
         `Did not add html child: ${htmlElement} the GetSize function indicated that it isnt in our DB`
       );
       return;
     }
   }
-
+  //intersting how they decided to offset the next child to be placed on the stage by multiplying
+  //the next child ID by 16. I mean I guess it makes sense. 
   const newPosition =
     childType === 'COMP'
       ? {
@@ -160,7 +176,7 @@ export const addChild = (
           width: htmlElemPosition.width,
           height: htmlElemPosition.height
         };
-
+  
   const newChild: ChildInt = {
     childId: view.nextChildId,
     childSort: view.nextChildId,
@@ -174,7 +190,9 @@ export const addChild = (
   };
 
   const compsChildrenArr = [...view.childrenArray, newChild];
+  
 
+  //values to put into the focus component so it is updated along with the components array
   const component = {
     ...view,
     childrenArray: compsChildrenArr,
@@ -261,13 +279,18 @@ export const deleteChild = (
   };
 };
 
+//Simple function that changes the imageSource in the global state.
+//Should be refactored to also store image data not just source,
+//since currently HTML image lives in a local state of AppContainer ( a big no-no)
+//and if a user clicks on 'clear workspace', the button doesn't reset
 export const deleteImage = (state: ApplicationStateInt) => {
   return {
     ...state,
     imageSource: ''
   };
 };
 
+//the function that handles the transformation of all children in the stage
 export const handleTransform = (
   state: ApplicationStateInt,
   {
@@ -291,6 +314,8 @@ export const handleTransform = (
     const component = state.components.find(
       (comp: ComponentInt) => comp.id === componentId
     );
+
+    //first check if changed, if falsy then assign the original values 
     const transformedComponent = {
       ...component,
       position: {
@@ -301,6 +326,7 @@ export const handleTransform = (
       }
     };
 
+    //return state with updated component values
     const components = [
       ...state.components.filter((comp: ComponentInt) => {
         if (comp.id !== componentId) return comp;