From 62e99cda98c7a5286d06daf4b183100fef857db8 Mon Sep 17 00:00:00 2001
From: George <georgie.george7@gmail.com>
Date: Thu, 7 Mar 2024 10:22:02 +0400
Subject: [PATCH] Add confirmation dialog for delete functionality and it's
 styling

---
 src/Components/DeletePlace.js | 28 +++++++++++++++++++++++++---
 src/DeleteItem.css            | 25 +++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/Components/DeletePlace.js b/src/Components/DeletePlace.js
index 74f538f..0a92020 100644
--- a/src/Components/DeletePlace.js
+++ b/src/Components/DeletePlace.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { deleteItem } from '../Redux/places/deleteItemSlice';
 import { fetchPlaces } from '../Redux/places/placesSlice';
@@ -10,17 +10,31 @@ const DeletePlace = () => {
   const status = useSelector((state) => state.deleteItem.status);
   const error = useSelector((state) => state.deleteItem.error);
 
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [itemIdToDelete, setItemIdToDelete] = useState(null);
+
   useEffect(() => {
     dispatch(fetchPlaces());
   }, [dispatch]);
 
   const handleDelete = (id) => {
-    dispatch(deleteItem(id))
+    setShowConfirmation(true);
+    setItemIdToDelete(id);
+  };
+
+  const confirmDelete = () => {
+    dispatch(deleteItem(itemIdToDelete))
       .then(() => {
         dispatch(fetchPlaces());
+        setShowConfirmation(false);
       });
   };
 
+  const cancelDelete = () => {
+    setShowConfirmation(false);
+    setItemIdToDelete(null);
+  };
+
   if (places.length === 0) {
     return <div>No places to delete</div>;
   }
@@ -41,12 +55,20 @@ const DeletePlace = () => {
   return (
     <div className="delete-place-container">
       <h1>Delete Place</h1>
+
       <ul className="delete-place-card">
         {places.map((place) => (
           <li key={place.id} className="card">
             <h3>{place.description}</h3>
             <img className="place-img" src={place.photo} alt={place.description} />
-            <button className="delete" type="submit" onClick={() => handleDelete(place.id)}>Delete</button>
+            <button className="delete" type="button" onClick={() => handleDelete(place.id)}>Delete</button>
+            {showConfirmation && (
+            <div className="confirmation-dialog">
+              <p>Are you sure?</p>
+              <button type="button" id="deleteyes" onClick={confirmDelete}>Yes</button>
+              <button type="button" id="deleteno" onClick={cancelDelete}>No</button>
+            </div>
+            )}
           </li>
         ))}
       </ul>
diff --git a/src/DeleteItem.css b/src/DeleteItem.css
index b11eb6e..f31221c 100644
--- a/src/DeleteItem.css
+++ b/src/DeleteItem.css
@@ -20,6 +20,31 @@
   margin: 10px;
 }
 
+.confirmation-dialog {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 10px;
+}
+
+#deleteyes {
+  background-color: hsl(0, 80%, 48%);
+  color: #fff;
+  border: none;
+  padding: 10px 25px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+#deleteno {
+  background-color: hsl(144, 80%, 48%);
+  color: #fff;
+  border: none;
+  padding: 10px 25px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
 @media screen and (max-width: 600px) {
   .delete-place-container {
     display: flex;