handle delete bucket

src/components/Directory/ManageBucket1.jsx

@@ -10,6 +10,7 @@ import BucketList from "./BucketList";
 import BucketForm from "./BucketForm";
 import AssignEmployees from "./AssignedBucket";
 import AssignedBucket from "./AssignedBucket";
+import { useDirectoryContext } from "../../pages/Directory/DirectoryPage";
 
 const ManageBucket1 = () => {
   const { data, isError, isLoading, error } = useBucketList();
@@ -17,18 +18,21 @@ const ManageBucket1 = () => {
   const [action, setAction] = useState(null); // "create" | "edit" | null
   const [selectedBucket, setSelectedBucket] = useState(null);
   const [searchTerm, setSearchTerm] = useState("");
+  const { setContactOpen, setDeleteBucket } = useDirectoryContext();
 
-  const handleClose = ()=>{
+  const handleClose = () => {
-  setAction(null);
+    setAction(null);
     setSelectedBucket(null);
-  }
+    setDeleteId(null);
+  };
   const { mutate: createBucket, isPending: creating } = useCreateBucket(() => {
-    handleClose()
+    handleClose();
   });
   const { mutate: updateBucket, isPending: updating } = useUpdateBucket(() => {
-    handleClose()
+    handleClose();
   });
 
+
   const handleSubmit = (BucketPayload) => {
     if (selectedBucket) {
       updateBucket({
@@ -39,13 +43,13 @@ const ManageBucket1 = () => {
   };
 
 
-
   return (
     <div className="container m-0 p-0" style={{ minHeight: "00px" }}>
       <div className="d-flex justify-content-center">
         <p className="fs-5 fw-semibold m-0">Manage Buckets</p>
       </div>
-      {action ? (
+
+      {action == "create" ? (
         <>
           <BucketForm
             selectedBucket={selectedBucket}
@@ -58,7 +62,10 @@ const ManageBucket1 = () => {
             isPending={creating || updating}
           />
           {action === "edit" && selectedBucket && (
-            <AssignedBucket selectedBucket={selectedBucket} handleClose={handleClose} />
+            <AssignedBucket
+              selectedBucket={selectedBucket}
+              handleClose={handleClose}
+            />
           )}
         </>
       ) : (
@@ -84,11 +91,7 @@ const ManageBucket1 = () => {
             buckets={data}
             loading={isLoading}
             searchTerm={searchTerm}
-            onEdit={(bucket) => {
+            onDelete={(id) => setDeleteBucket({isOpen:true,bucketId:id})}
-              setSelectedBucket(bucket);
-              setAction("edit");
-            }}
-            onDelete={(id) => console.log("delete", id)}
           />
         </>
       )}

src/pages/Directory/DirectoryPage.jsx

@@ -8,7 +8,11 @@ import {
 } from "react";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import { useFab } from "../../Context/FabContext";
-import { useBucketList, useBuckets } from "../../hooks/useDirectory";
+import {
+  useBucketList,
+  useBuckets,
+  useDeleteBucket,
+} from "../../hooks/useDirectory";
 import ManageBucket1 from "../../components/Directory/ManageBucket1";
 import ManageContact from "../../components/Directory/ManageContact";
 import BucketList from "../../components/Directory/BucketList";
@@ -16,6 +20,7 @@ import { MainDirectoryPageSkeleton } from "../../components/Directory/DirectoryP
 import ContactProfile from "../../components/Directory/ContactProfile";
 import GlobalModel from "../../components/common/GlobalModel";
 import { exportToCSV } from "../../utils/exportUtils";
+import ConfirmModal from "../../components/common/ConfirmModal";
 
 const NotesPage = lazy(() => import("./NotesPage"));
 const ContactsPage = lazy(() => import("./ContactsPage"));
@@ -44,6 +49,10 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
     isOpen: false,
     contactId: null,
   });
+  const [deleteBucket, setDeleteBucket] = useState({
+    isOpen: false,
+    bucketId: null,
+  });
   const [showActive, setShowActive] = useState(true);
   const [contactOpen, setContactOpen] = useState({
     contact: null,
@@ -100,20 +109,29 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
     data,
     setManageContact,
     setContactOpen,
+    setDeleteBucket,
   };
 
+  const { mutate: DeleteBucket, isPending: Deleting } = useDeleteBucket(() => {
+    setDeleteBucket({isOpen:false,bucketId:null});
+  });
+  const handleDelete = (bucketId) => {
+    DeleteBucket(bucketId);
+  };
   if (isLoading) return <MainDirectoryPageSkeleton />;
   if (isError) return <div>{error.message}</div>;
   return (
     <>
       <DirectoryContext.Provider value={contextValues}>
         <div className={`${IsPage ? "container-fluid" : ""}`}>
-          {IsPage && (<Breadcrumb
+          {IsPage && (
-            data={[
+            <Breadcrumb
-              { label: "Home", link: "/dashboard" },
+              data={[
-              { label: "Directory", link: null },
+                { label: "Home", link: "/dashboard" },
-            ]}
+                { label: "Directory", link: null },
-          ></Breadcrumb>)}
+              ]}
+            ></Breadcrumb>
+          )}
           <div className="card">
             <div className="d-flex justify-content-between align-items-center mb-1 px-2">
               <ul className="nav nav-tabs">
@@ -121,7 +139,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                   <a
                     className={`nav-link ${
                       activeTab === "notes" ? "active" : ""
-                      } fs-6`}
+                    } fs-6`}
                     onClick={(e) => handleTabClick("notes", e)}
                   >
                     <i className="bx bx-note bx-sm me-1_5"></i>
@@ -132,7 +150,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                   <a
                     className={`nav-link ${
                       activeTab === "contacts" ? "active" : ""
-                      } fs-6`}
+                    } fs-6`}
                     onClick={(e) => handleTabClick("contacts", e)}
                   >
                     <i className="bx bxs-contact bx-sm me-1_5"></i>
@@ -190,7 +208,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                         <button
                           className={`btn btn-xs ${
                             !gridView ? "btn-primary" : "btn-outline-secondary"
-                            }`}
+                          }`}
                           onClick={() => setGridView(false)}
                         >
                           <i className="bx bx-list-ul"></i>
@@ -199,7 +217,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                         <button
                           className={`btn btn-xs ${
                             gridView ? "btn-primary" : "btn-outline-secondary"
-                            }`}
+                          }`}
                           onClick={() => setGridView(true)}
                         >
                           <i className="bx bx-grid-alt"></i>
@@ -218,7 +236,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                           className="form-check-label ms-2"
                           htmlFor="inactiveEmployeesCheckbox"
                         >
-                          {showActive ? "Active" : "Inactive" }
+                          {showActive ? "Active" : "Inactive"}
                         </label>
                       </div>
                     </div>
@@ -231,10 +249,18 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
           <div>
             <Suspense fallback={<MainDirectoryPageSkeleton />}>
               {activeTab === "notes" && (
-                <NotesPage projectId={projectId} searchText={searchNote} onExport={setNotesData} />
+                <NotesPage
+                  projectId={projectId}
+                  searchText={searchNote}
+                  onExport={setNotesData}
+                />
               )}
               {activeTab === "contacts" && (
-                <ContactsPage projectId={projectId} searchText={searchContact} onExport={setContactData} />
+                <ContactsPage
+                  projectId={projectId}
+                  searchText={searchContact}
+                  onExport={setContactData}
+                />
               )}
             </Suspense>
           </div>
@@ -274,6 +300,19 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
               />
             </GlobalModel>
           )}
+
+          {deleteBucket.isOpen && (
+            <ConfirmModal
+              isOpen={deleteBucket.isOpen}
+              type="delete"
+              header="Delete Bucket"
+              message="Are you sure you want delete?"
+              onSubmit={handleDelete}
+              onClose={() => setDeleteBucket({ isOpen: false, bucketId: null })}
+              loading={Deleting}
+              paramData={deleteBucket.bucketId}
+            />
+          )}
         </div>
       </DirectoryContext.Provider>
     </>