feat: added modal to confirm shape deletion

Author: williamzhu17

components/core/DeleteShape.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+import Modal from "react-bootstrap/Modal";
+import Button from "react-bootstrap/Button";
+
+const DeleteShape = ({ show, setShow, shape }) => {
+    return(
+        <Modal
+            size="md"
+            show={ show }
+            onHide={() => setShow(false)}
+            centered
+        >
+            <Modal.Header closeButton>
+                <Modal.Title>
+                    Delete Shape
+                </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <p>Are you sure you want to delete this shape? </p>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button onClick={() => setShow(false)}>
+                    Cancel
+                </Button>
+                <Button>
+                    Yes
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}
+
+export default DeleteShape;

components/index.js

@@ -4,7 +4,8 @@ export { default as Landing } from "./core/Landing";
 export { default as SignInModal } from "./core/SignInModal";
 export { default as ExportShape } from "./core/ExportShape";
 export { default as CreateShape } from "./core/CreateShape";
-export {default as CopyShapeSource} from "./core/CopyShapeSource";
+export { default as CopyShapeSource } from "./core/CopyShapeSource";
+export { default as DeleteShape } from "./core/DeleteShape";
 
 // utils
 export { default as Header } from "./utils/Header";

components/utils/ShapeList.js

@@ -30,9 +30,12 @@ import { BsFillHeartFill, BsHeart} from "react-icons/bs";
 // Export Shape
 import { ExportShape, CopyShapeSource, NoShapeFound } from '..';
 
-// CreateShape to edit shape
+// CreateShape
 import { CreateShape } from "..";
 
+// DeleteShape
+import { DeleteShape } from "..";
+
 // misc unitless
 import { getShapeFileName, getShapeId } from '../../utils/misc';
 
@@ -231,6 +234,10 @@ const ShapeList = (
   const [showEditModal, setShowEditModal] = useState(false);
   const [shapeToEdit, setShapeToEdit] = useState();
 
+  // All about editing private shapes
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [shapeToDelete, setShapeToDelete] = useState();
+
   useEffect(() =>{
     const copy = [...shapes];
     if(sort === 'recent') {
@@ -295,6 +302,16 @@ const ShapeList = (
     setShowEditModal(false);
   }
 
+  /**
+   * Method to execute when user clicks on the delte shape
+   */
+   const performDelete = shape => {
+    // Set the shape details to edit
+    setShapeToDelete(shape);
+    // Show the export modal
+    setShowDeleteModal(true);
+  }
+
   /**
    * Method to execute when user clicks on the likes
    */
@@ -396,6 +413,12 @@ const ShapeList = (
           edit={true} />
         }
 
+        { shapeToDelete && <DeleteShape
+          show= { showDeleteModal }
+          setShow={ setShowDeleteModal }
+          shape= { shapeToDelete } />
+        }
+
         {
           filteredShape.length === 0 ? 
             <NoShapeFound 
@@ -452,6 +475,11 @@ const ShapeList = (
                       Edit
                     </Button> : null
                   }
+                  {shape.private ? 
+                    <Button title="Delete Shape" vairant="outline-light" onClick={() => {performDelete(shape); console.log(shape)}} className="btn-icon">
+                      Delete
+                    </Button> : null
+                  }
                   </ShapeActionsContainer>
                 </ShapeActions>
               </ShapeCardBody>