Feat:Added EditFarm MODAL From Flowbite for Farm deletion

2025-02-23 04:43:30 +05:30
parent 297b094de5
commit 86189b0f5b
1 changed files with 107 additions and 0 deletions
@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+
+const EditFarm = ({ _id, onDelete }) => {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  // This function will run when the "Yes, I'm sure" button is clicked.
+  const handleDeleteFarm = async () => {
+    try {
+      const response = await fetch(`http://localhost:8000/api/v1/farm/${_id}`, {
+        method: "DELETE",
+        credentials: "include",
+      });
+      const data = await response.json();
+      console.log("Delete response:", data);
+      if (data.success) {
+        // Notify the parent component to update its state
+        if (onDelete) onDelete(_id);
+      }
+      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;