testing delete elements

Author: john lim

app/src/components/left/HTMLItem.tsx

@@ -56,14 +56,14 @@ const HTMLItem: React.FC<{
 
   // creates modal that asks if user wants to clear workspace
   // if user clears their workspace, then their components are removed from state and the modal is closed
-  const deleteAllInstances = (id: number) => {
+  const deleteAllInstances = (deleteID: number) => {
     // set modal options
     const children = (
       <List className="export-preference">
         <ListItem
           key={'clear'}
           button
-          onClick={() => handleDelete(id)}
+          onClick={() => handleDelete(deleteID)}
           style={{
             border: '1px solid #3f51b5',
             marginBottom: '2%',

app/src/reducers/componentReducer.ts

@@ -143,24 +143,24 @@ const reducer = (state: State, action: Action) => {
     return roots;
   };
 
-  const checkChildren = child => {
-    child.forEach(el => {
-      if (el.children.length) {
-        const arr = [];
-        for (let i = 0; i < el.children.length; i++) {
-          if (el.children[i].name !== name) {
-            arr.push(el.children[i]);
-          }
-        }
-        el.children = arr;
-        checkChildren(el.children);
-      }
-    });
-  };
-
   const deleteById = (id: number): Component[] => {
     const name: string = state.components[id - 1].name;
     // console.log('name: ', name);
+
+    const checkChildren = child => {
+      child.forEach(el => {
+        if (el.children.length) {
+          const arr = [];
+          for (let i = 0; i < el.children.length; i++) {
+            if (el.children[i].name !== name) {
+              arr.push(el.children[i]);
+            }
+          }
+          el.children = arr;
+          checkChildren(el.children);
+        }
+      });
+    };
     const copyComp = [...state.components];
     console.log('before check children', copyComp);
     if (copyComp.length) {
@@ -570,18 +570,36 @@ const reducer = (state: State, action: Action) => {
     }
 
     case 'DELETE ELEMENT': {
-      const HTMLTypes = [...state.HTMLTypes];
-      const components = [...state.components];
-      deleteById(action.payload);
-      for (let i = 0; i < HTMLTypes.length; i += 1) {
-        if (HTMLTypes[i].id === action.payload) {
-          HTMLTypes.splice(i, 1);
+      let name: string = '';
+      const HTMLTypes = [...state.HTMLTypes].filter(el => {
+        if (el.id === action.payload) {
+          name = el.name;
         }
-      }
+        return el.id !== action.payload;
+      });
 
+      const deleteElements = compCopy => {
+        compCopy.forEach(child => {
+          if (child.children.length) {
+            const arr = [];
+            for (let i = 0; i < child.children.length; i+=1) {
+              if (child.name !== name) {
+                arr.push(child.children[i]);
+              }
+              child.children = arr;
+              deleteElements(child.children);
+            }
+          }
+        })
+      }
+      const components = [...state.components];
+      console.log("components in delete element: ", components);
+      deleteElements(components);
+      console.log("components in delete element after deleteElements: ", components);
       return {
         ...state,
-        HTMLTypes
+        HTMLTypes,
+        components
       };
     }
 

package.json

@@ -111,6 +111,7 @@
     "cookie-parser": "^1.4.5",
     "cors": "^2.8.5",
     "d3": "^6.2.0",
+    "dotenv": "^8.2.0",
     "electron-debug": "^3.1.0",
     "electron-devtools-installer": "^2.2.4",
     "electron-splashscreen": "^1.0.0",
@@ -157,7 +158,6 @@
     "cross-env": "^5.2.1",
     "csp-html-webpack-plugin": "^4.0.0",
     "css-loader": "^2.1.1",
-    "dotenv": "^8.2.0",
     "dotenv-webpack": "^5.0.1",
     "electron": "^9.1.0",
     "electron-builder": "^22.7.0",