112 lines
4.3 KiB
React
112 lines
4.3 KiB
React
import React, { useState } from "react";
|
|
import { useDeleteFarmMutation } from "../../../store/api/farmApi";
|
|
|
|
const EditFarm = ({ _id, onDelete }) => {
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [deleteFarm] = useDeleteFarmMutation();
|
|
|
|
// This function will run when the "Yes, I'm sure" button is clicked.
|
|
const handleDeleteFarm = async () => {
|
|
try {
|
|
const res = await deleteFarm(_id);
|
|
// const response = await fetch(`http://localhost:8000/api/v1/farm/${_id}`, {
|
|
// method: "DELETE",
|
|
// credentials: "include",
|
|
// });
|
|
// const data = await response.json();
|
|
|
|
|
|
if (!res) {
|
|
return null;
|
|
}
|
|
|
|
setModalOpen(false); // Close the modal after the operation
|
|
} catch (error) {
|
|
console.error("Error deleting farm:", error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
onClick={() => setModalOpen(true)}
|
|
className="block text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
|
type="button"
|
|
>
|
|
Remove
|
|
</button>
|
|
|
|
{modalOpen && (
|
|
<div
|
|
id="popup-modal"
|
|
tabIndex="-1"
|
|
className="fixed inset-0 z-50 flex justify-center items-center overflow-y-auto overflow-x-hidden bg-black bg-opacity-50"
|
|
>
|
|
<div className="relative p-4 w-full max-w-md max-h-full">
|
|
<div className="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
|
|
<button
|
|
onClick={() => setModalOpen(false)}
|
|
type="button"
|
|
className="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
|
>
|
|
<svg
|
|
className="w-3 h-3"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 14 14"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
|
|
/>
|
|
</svg>
|
|
<span className="sr-only">Close modal</span>
|
|
</button>
|
|
<div className="p-4 md:p-5 text-center">
|
|
<svg
|
|
className="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
|
|
/>
|
|
</svg>
|
|
<h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
|
|
Are you sure you want to delete this product?
|
|
</h3>
|
|
<button
|
|
onClick={handleDeleteFarm}
|
|
type="button"
|
|
className="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center"
|
|
>
|
|
Yes, I'm sure
|
|
</button>
|
|
<button
|
|
onClick={() => setModalOpen(false)}
|
|
type="button"
|
|
className="py-2.5 px-5 ml-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
|
>
|
|
No, cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default EditFarm;
|