reverted back and added delete HTML functionality

Author: john lim

app/electron/menu.js

@@ -31,10 +31,9 @@ var MenuBuilder = function(mainWindow, appName) {
         devTools: false
       }
     });
-    console.log(process.env.NODE_ENV);
     if (process.env.NODE_ENV === 'development') {
       tutorial.loadURL(`http://localhost:8080/#/tutorial`);}
-    else {
+    else if (process.env.NODE_ENV === 'production'){
       tutorial.loadURL(`${Protocol.scheme}://rse/index-prod.html#/tutorial`);
     }
     tutorial.show();

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,8 +52,66 @@ 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 = (deleteID: number) => {
+    // set modal options
+    const children = (
+      <List className="export-preference">
+        <ListItem
+          key={`clear${deleteID}`}
+          button
+          onClick={() => handleDelete(deleteID)}
+          style={{
+            border: '1px solid #3f51b5',
+            marginBottom: '2%',
+            marginTop: '5%'
+          }}
+        >
+          <ListItemText
+            primary={'Yes, delete all instances'}
+            style={{ textAlign: 'center' }}
+            onClick={closeModal}
+          />
+        </ListItem>
+        <ListItem
+          key={`close${deleteID}`}
+          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}`}>
+    <Grid item xs={5} key={`html-g${name}`}>
       <div ref={drag} className={classes.HTMLPanelItem}>
         <h3>{name}</h3>
         <span
@@ -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>
   );
 }

package.json

@@ -32,6 +32,7 @@
     "postinstall": "ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=true electron-builder install-app-deps",
     "dev-server": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack.development.js",
     "dev": "concurrently --success first \"npm run dev-server\" \"cross-env NODE_ENV=development electron .\" \"cross-env NODE_ENV=development npm run server\" -k",
+    "p": "concurrently --success first \"npm run dev-server\" \"cross-env NODE_ENV=production electron .\" \"cross-env NODE_ENV=production npm run server\" -k",
     "prod-build": "cross-env NODE_ENV=production npx webpack --mode=production --config ./webpack.production.js",
     "prod": "npm run prod-build && electron .",
     "pack": "electron-builder --dir",