testing app

Author: john lim

app/src/components/left/HTMLItem.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import createModal from '../right/createModal';
 
 const buttonClasses =
 'MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-button-12 MuiButton-textPrimary';
@@ -34,7 +38,7 @@ const HTMLItem: React.FC<{
   handleDelete: (id: number) => void;
 }> = ({ name, id, Icon, handleDelete }) => {
   const classes = useStyles();
-
+  const [modal, setModal] = useState(null);
   const [{ isDragging }, drag] = useDrag({
     item: {
       type: ItemTypes.INSTANCE,
@@ -48,6 +52,64 @@ const HTMLItem: React.FC<{
     })
   });
 
+  const closeModal = () => setModal(null);
+
+  // 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) => {
+    // set modal options
+    const children = (
+      <List className="export-preference">
+        <ListItem
+          key={'clear'}
+          button
+          onClick={() => handleDelete(id)}
+          style={{
+            border: '1px solid #3f51b5',
+            marginBottom: '2%',
+            marginTop: '5%'
+          }}
+        >
+          <ListItemText
+            primary={'Yes, delete all instances'}
+            style={{ textAlign: 'center' }}
+            onClick={closeModal}
+          />
+        </ListItem>
+        <ListItem
+          key={'close'}
+          button
+          onClick={closeModal}
+          style={{
+            border: '1px solid #3f51b5',
+            marginBottom: '2%',
+            marginTop: '5%'
+          }}
+        >
+          <ListItemText
+            primary={'No, do not delete element'}
+            style={{ textAlign: 'center' }}
+            onClick={closeModal}
+          />
+        </ListItem>
+      </List>
+    );
+
+    // create modal
+    setModal(
+      createModal({
+        closeModal,
+        children,
+        message: 'Deleting this element will delete all instances of this element within the application.\nDo you still wish to proceed?',
+        primBtnLabel: null,
+        primBtnAction: null,
+        secBtnAction: null,
+        secBtnLabel: null,
+        open: true
+      })
+    );
+  };
+
   return (
     <Grid item xs={5} key={`html-${name}`}>
       <div ref={drag} className={classes.HTMLPanelItem}>
@@ -62,8 +124,9 @@ const HTMLItem: React.FC<{
           {Icon && <Icon />}
         </span>
         {id > 11 &&
-        <button className={buttonClasses} onClick={() => { handleDelete(id) }} > X </button> }
+        <button className={buttonClasses} onClick={() => deleteAllInstances(id)} > X </button> }
       </div>
+      {modal}
     </Grid>
   );
 }

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) {
@@ -571,11 +571,14 @@ 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);
         }
       }
+
       return {
         ...state,
         HTMLTypes