duplicate component names no longer allowed

Author: ChristianEdwardPadilla

src/components/LeftColExpansionPanel.jsx

@@ -33,7 +33,7 @@ const LeftColExpansionPanel = (props) => {
     return focusComponent.title === title ? 'focused' : '';
   }
 
-  function isAncestor() {
+  function isAncestorOfFocused() {
     // add logic for determining if given component is an ancestor of focusedComponent
     return false;
   }
@@ -62,7 +62,7 @@ const LeftColExpansionPanel = (props) => {
               style={{ color }}
             />
             <ListItemSecondaryAction>
-              {isFocused() || isAncestor() ? (
+              {isFocused() || isAncestorOfFocused() ? (
                 <div />
               ) : (
                 <IconButton aria-label="Add">

src/components/Rectangle.jsx

@@ -36,6 +36,9 @@ class Rectangle extends Component {
       focusChild,
       focusComponent,
     } = this.props;
+
+    // the Group is responsible for dragging of all children
+    // the Rect emits changes to child width and height with help from Transformer
     return (
       <Group
         draggable={true}
@@ -66,17 +69,6 @@ class Rectangle extends Component {
           strokeWidth={4}
           strokeScaleEnabled={false}
           draggable={false}
-
-          // use dragBoundFunc to bind children within parents
-          // (but if only children are rendered/movable, and parent is size of canvas, won't need this anyways )
-          // dragBoundFunc={function dragBoundFunc(pos) {
-          //   const newY = pos.y < 200 ? 200 : pos.y;
-          //   const newX = pos.x < 200 ? 200 : pos.x;
-          //   return {
-          //     x: newX,
-          //     y: newY,
-          //   };
-          // }}
         />
         <Label>
           <Text text={title} fill={'white'} />

src/components/TransformerComponent.jsx

@@ -11,6 +11,7 @@ export default class TransformerComponent extends Component {
     this.checkNode();
   }
 
+  // this function makes sure the transformer follows along with the focusChild
   checkNode() {
     const stage = this.transformer.getStage();
     const { focusChild } = this.props;

src/utils/componentReducer.util.js

@@ -41,6 +41,13 @@ export const addComponent = (state, { title }) => {
   const strippedTitle = title
     .replace(/[a-z]+/gi, word => word[0].toUpperCase() + word.slice(1))
     .replace(/[-_\s0-9\W]+/gi, '');
+
+  if (state.components.find(comp => comp.title === strippedTitle)) {
+    // alert the user that duplicate component names are not allowed
+    return {
+      ...state,
+    };
+  }
   const newComponent = {
     ...initialComponentState,
     title: strippedTitle,