Design delete address modal screen

Author: kkamara

frontend/src/components/pages/adminDashboard/products/DeleteProductModal.jsx

@@ -17,10 +17,13 @@ const customStyles = {
   },
 }
 
+const defaultModalIsOpenValue = false
 const defaultChoiceValue = "0"
 
 export default function DeleteProductModal() {
-  const [modalIsOpen, setIsOpen] = React.useState(false)
+  const [modalIsOpen, setModalIsOpen] = useState(
+    defaultModalIsOpenValue
+  )
   const dispatch = useDispatch()
   const state = useSelector(state => ({
     adminProduct: state.adminProduct,
@@ -34,25 +37,25 @@ export default function DeleteProductModal() {
       false === state.adminDeleteProduct.loading &&
       true === state.adminDeleteProduct.data
     ) {
-      setIsOpen(false)
+      setModalIsOpen(false)
       navigate("/admin/products")
     }
   }, [state.adminDeleteProduct])
 
   function openModal() {
-    setIsOpen(true)
+    setModalIsOpen(true)
   }
 
   function closeModal() {
     setChoice(defaultChoiceValue)
-    setIsOpen(false)
+    setModalIsOpen(false)
   }
 
   function handleSubmit(e) {
     e.preventDefault()
     setChoice(defaultChoiceValue)
     if ("0" === choice) {
-      setIsOpen(false)
+      setModalIsOpen(false)
     } else {
       dispatch(deleteAdminProduct(
         state.adminProduct.data.slug,

frontend/src/components/pages/deliveryAddresses/DeleteDeliveryAddressModal.jsx

@@ -0,0 +1,99 @@
+import React, { useState, } from "react"
+import Modal from "react-modal"
+
+import "./DeleteDeliveryAddressModal.scss"
+
+const customStyles = {
+  content: {
+    top: "46%",
+    left: "50%",
+    right: "auto",
+    bottom: "auto",
+    marginRight: "-50%",
+    transform: "translate(-50%, -50%)",
+  },
+}
+
+const defaultModalIsOpenValue = false
+const defaultChoiceValue = "0"
+
+export default function DeleteDeliveryAddressModal({
+  onSuccess,
+  data,
+}) {
+  const [modalIsOpen, setModalIsOpen] = React.useState(
+    defaultModalIsOpenValue
+  )
+  const [choice, setChoice] = useState(defaultChoiceValue)
+  
+  function closeModal() {
+    setChoice(defaultChoiceValue)
+    setModalIsOpen(false)
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault()
+    setChoice(defaultChoiceValue)
+    if ("0" === choice) {
+      setModalIsOpen(false)
+    } else {
+      onSuccess()
+    }
+  }
+
+  function handleChoiceChange(e) {
+    setChoice(e.target.value)
+  }
+
+  function openModal() {
+    setModalIsOpen(true)
+  }
+
+  return (
+    <>
+      <button
+        className="btn btn-danger"
+        onClick={openModal}
+      >
+        Delete
+      </button>
+      <Modal
+        isOpen={modalIsOpen}
+        onRequestClose={closeModal}
+        style={customStyles}
+        contentLabel="Delete User Address Modal"
+      >
+        <div className="delete-user-address-modal">
+          <h2>
+            Are you sure you want to delete&nbsp;
+            {data.addressLine1}, {data.zipCode}?
+          </h2>
+          <form
+            className="delete-user-address-form"
+            onSubmit={handleSubmit}
+          >
+            <select
+              name="option"
+              className="form-control admin-delete-product-option-select-input"
+              value={choice}
+              onChange={handleChoiceChange}
+            >
+              <option value="0">No</option>
+              <option value="1">Yes</option>
+            </select>
+            <input
+              type="submit"
+              className="btn btn-success"
+            />
+            <button
+              onClick={closeModal}
+              className="btn btn-default"
+            >
+              Close
+            </button>
+          </form>
+        </div>
+      </Modal>
+    </>
+  )
+}

frontend/src/components/pages/deliveryAddresses/DeleteDeliveryAddressModal.scss

@@ -0,0 +1,9 @@
+.delete-user-address-form * {
+  display: inline-block;
+}
+
+.delete-user-address-form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

frontend/src/components/pages/deliveryAddresses/DeliveryAddressesComponent.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, } from "react"
 import { Helmet, } from "react-helmet"
 import { useSelector, useDispatch } from "react-redux"
 import { getUserAddresses } from "../../../redux/actions/userAddressesActions"
+import DeleteDeliveryAddressModal from "./DeleteDeliveryAddressModal"
 
 import "./DeliveryAddressesComponent.scss"
 
@@ -15,6 +16,10 @@ export default function DeliveryAddressesComponent() {
     dispatch(getUserAddresses())
   }, [])
 
+  const handleDeleteAddress = () => {
+
+  }
+
   if (state.userAddresses.loading) {
     return (
       <div className="container delivery-addresses-container text-center">
@@ -61,11 +66,10 @@ export default function DeliveryAddressesComponent() {
                 >
                   Edit
                 </button>
-                <button
-                  className="btn btn-danger"
-                >
-                  Delete
-                </button>
+                <DeleteDeliveryAddressModal
+                  onSuccess={handleDeleteAddress}
+                  data={address}
+                />
               </div>
             </div>
           </div>