Co-authored-by: BenCauffman <[email protected]>

Co-authored-by: Carly Jackson <[email protected]>

Author: tlukasiewicz89

app/src/components/main/Canvas.tsx

@@ -17,11 +17,8 @@ function Canvas(props): JSX.Element {
 
   useEffect(()=> {
     if (newComp) {
-      console.log('inside use effect', {state});
-      console.log('copiedComp', copiedComp.name)
       //find updated comp
       const copy = state.components.find(comp => comp.name === copiedComp.name)
-      console.log({copy})
       // make a array of copied children from the copied component
       if (copy.children.length){
         const masterArr = [];
@@ -31,25 +28,19 @@ function Canvas(props): JSX.Element {
             const child = children[i];
             let id = (parentId) ? parentId : null;
             if (child.typeId < 1000){
-              console.log({child})
               masterArr.push({
                 type: "HTML Element", 
                 typeId: child.typeId, 
                 childId: id
               })
               if (child.children.length) {
-                console.log('do a recursive call');
-                console.log('child.childrean array in recursion', child.children)
-                console.log('child.children.id', child.childId)
                 deepChildCopy(child.children, child.childId);
               } 
             }
           }
         }
         deepChildCopy(children, null);
-        console.log({masterArr})
         setCopiedChildrenArr(masterArr);
-        console.log('SADJBFSDJBFLJSHDBFJLDHS', copiedChildrenArr)
       }
 
       const components = state.components
@@ -68,31 +59,6 @@ function Canvas(props): JSX.Element {
     setNewComp(false)
   }, [newComp]) 
 
-  // useEffect(()=>{
-  //   const lastComp = state.components[state.components.length - 1];
-  //   if (copiedChildrenArr.length) {
-  //     console.log('setCopiedChildrenArr use effect running')
-  //     // copiedChildrenArr.forEach(com => console.log(com))
-  //     // console.log(copiedChildrenArr[0])
-  //     // console.log(copiedChildrenArr[1])
-  //     for (let i = 0; i < copiedChildrenArr.length; i++) {
-  //       dispatch({
-  //         type: 'ADD CHILD',
-  //         payload: {...copiedChildrenArr[i], copyId: lastComp.id}
-  //       });
-  //     }
-  //     // dispatch({
-  //     //   type: 'ADD CHILD',
-  //     //   payload: {...copiedChildrenArr[1], copyId: lastComp.id}
-  //     // });
-  //     // setCopiedChildrenArr(copiedChildrenArr.slice(1))
-  //     setCopiedChildrenArr([])
-  //   }
-    
-  // },[copiedChildrenArr])
-
-
-
   // Caret start
   Arrow.deleteLines();
   // find the current component to render on the canvas
@@ -154,7 +120,6 @@ function Canvas(props): JSX.Element {
             if (child.name === 'seperator') continue;
             // check if the item.instanceTypeId matches and child ID
             if (item.instanceTypeId === child.typeId) {
-              console.log('parent found', comp)
               // check if the name of the parent matches the canvas focus name
               // comp is the parent component
               // currentComponent is the canvas.focus component
@@ -163,7 +128,6 @@ function Canvas(props): JSX.Element {
                 break;
               } else {
                 // if false
-                console.log('different parent');
                 setCopiedComp(child);
                 hasDiffParent = true;
                 newChildName = child.name;
@@ -183,25 +147,23 @@ function Canvas(props): JSX.Element {
             }
           });
         } else {
+
+          // able to duplicate a component in dev only does not work for prod
           // create a new component
-          let name = prompt("Component already has a parent. \nDo you want to create a new component and import its elements?", "Enter component name here");
-          // console.log({newChildName}, 1)
-          while (components.some(comp => comp.name === name)) {
-            name = prompt(`${name} component already exists. \nPlease pick a new name.`);
-          }
-          if (name) {
-            dispatch({
-              type: 'ADD COMPONENT',
-              payload: { componentName: name, root: false }
-            });
+          
+          // let name = prompt("Component already has a parent. \nDo you want to create a new component and import its elements?", "Enter component name here");
+          // while (components.some(comp => comp.name === name)) {
+          //   name = prompt(`${name} component already exists. \nPlease pick a new name.`);
+          // }
+          // if (name) {
+          //   dispatch({
+          //     type: 'ADD COMPONENT',
+          //     payload: { componentName: name, root: false }
+          //   });
 
-            setNewComp(true);
-            console.log({newComp})
-           
-            // console.log({components})
-            // console.log({newId})
-            setNewComp(!newComp)
-          }
+          //   setNewComp(true);
+          //   setNewComp(!newComp)
+          // }
 
         }
 

app/src/reducers/componentReducer.ts

@@ -70,7 +70,6 @@ const reducer = (state: State, action: Action) => {
   const findChild = (component: Component, childId: number) => {
     if (childId === null) return component;
     const nodeArr = [...component.children];
-    console.log({nodeArr})
     // breadth first search through component tree to see if a child exists
     while (nodeArr.length > 0) {
       // shift off the first value and assign to an element
@@ -196,7 +195,6 @@ const reducer = (state: State, action: Action) => {
   };
   switch (action.type) {
     case 'ADD COMPONENT': {
-      console.log('adding component payload', action.payload)
       if (
         typeof action.payload.componentName !== 'string' ||
         action.payload.componentName === ''
@@ -247,7 +245,6 @@ const reducer = (state: State, action: Action) => {
     }
     // Add child to a given root component
     case 'ADD CHILD': {
-      console.log('add child started', action.payload)
       let parentComponentId: number;
       const {
         type,
@@ -263,7 +260,6 @@ const reducer = (state: State, action: Action) => {
       const components = [...state.components];
 
       const parentComponent = findComponent(components, parentComponentId);
-      console.log({parentComponent})
       let componentName: string = '';
       let componentChildren: Object[] = [];
       if (type === 'Component') {
@@ -327,15 +323,13 @@ const reducer = (state: State, action: Action) => {
       }
       // if there is a childId (childId here references the direct parent of the new child) find that child and a new child to its children array
       else {
-        console.log({childId})
-        console.log({directParent})
         directParent = findChild(parentComponent, childId);
+        //disable nesting a component inside a HTML element
         if (directParent.type === "HTML Element" && type === "HTML Element") {
           directParent.children.push(topSeparator);
           directParent.children.push(newChild);
         } else {
-          console.log('sorry cant drag comp into html bruh')
-          return state;
+          return { ...state };
         }
 
       }
@@ -933,7 +927,7 @@ const reducer = (state: State, action: Action) => {
           state.HTMLTypes
         );
       }
-
+      
       deletePassedInPropsChildren(parent);
       deletePassedInProps(currComponent);
 

package.json

@@ -229,7 +229,6 @@
     "jest-environment-jsdom": "^28.1.3",
     "mini-css-extract-plugin": "^0.9.0",
     "mongodb": "^3.5.9",
-
     "node-sass": "^7.0.1",
     "nodemon": "^2.0.19",
     "react": "^17.0.2",