implement contact deletion with confirmation and toast feedback

src/components/Directory/CardViewDirectory.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Avatar from "../common/Avatar";
 
-const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen_contact,setIsOpenModalNote }) => {
+const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted }) => {
   return (
     <div className="card text-start border-1">
       <div className="card-body  px-1 py-2 pb-0">
@@ -48,7 +48,7 @@ const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen
                   </a>
                 </li>
                 <li>
-                  <a className="dropdown-item  px-2 py-0">
+                  <a className="dropdown-item  px-2 py-0" onClick={()=> IsDeleted(contact.id)}>
                     <i className="bx bx-trash bx-xs me-2"></i>
                     <span className="align-left small-text">Delete</span>
                   </a>

src/components/Directory/ListViewDirectory.jsx

@@ -3,9 +3,9 @@ import Avatar from '../common/Avatar';
 
 const getEmailIcon = (type) => {
   switch (type) {
-    case 'work': return "bx bx-briefcase me-1 " ;
+    case 'Work': return "bx bx-briefcase me-1 " ;
-    case 'personal': return "bx bx-user me-1";
+    case 'Personal': return "bx bx-user me-1";
-    case 'support': return "bxr headphone-mic me-1";
+    case 'support': return "bx headphone-mic me-1";
     case 'billing': return "bx bx-receipt me-1";
     default: return "bx bx-envelope me-1";
   }
@@ -13,21 +13,21 @@ const getEmailIcon = (type) => {
 
 const getPhoneIcon = (type) => {
   switch (type) {
-    case 'business': return "bx bx-briefcase me-1 ";
+    case 'Business': return "bx bx-phone me-1 ";
-    case 'home': return "bx bx-mobile me-1 ";
+    case 'Personal': return "bx bx-mobile me-1 ";
-    case 'personal': return "bx bx-user me-1 ";
+    case 'Office': return "bx bx-phone me-1 ";
-    case 'landline': return "bx bx-phone me-1 ";
-    case 'fax': return "bx bx-printer me-1";
-    case 'whatsapp': return "bxl-whatsapp me-1";
-    case 'emergency': return "bx bx-error-circle me-1";
     default: return "bx bx-phone me-1";
   }
 };
 
-const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
+const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
   return (
     <tr  >
-      <td className="text-start" style={{width: '18%'}} colSpan={2}>
+      <td className="text-start cursor-pointer" style={{width: '18%'}} colSpan={2} onClick={() =>
+      {
+         setIsOpenModalNote(true)
+        setOpen_contact(contact)
+      }}>
      <div className="d-flex align-items-center">
   <Avatar
   size="xs"
@@ -81,7 +81,7 @@ const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
           setSelectedContact( contact )
           setIsOpenModal(true)
         }}></i>
-         <i className='bx bx-trash bx-sm text-danger cursor-pointer'></i>
+         <i className='bx bx-trash bx-sm text-danger cursor-pointer' onClick={()=> IsDeleted(contact.id)}></i>
       </td>
     </tr>
   );

src/pages/Directory/Directory.jsx

@@ -6,7 +6,7 @@ import ManageDirectory from "../../components/Directory/ManageDirectory";
 import ListViewDirectory from "../../components/Directory/ListViewDirectory";
 import { useBuckets, useDirectory } from "../../hooks/useDirectory";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
-import { getCachedData } from "../../slices/apiDataManager";
+import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
 import UpdateContact from "../../components/Directory/UpdateContact";
 import CardViewDirectory from "../../components/Directory/CardViewDirectory";
@@ -14,6 +14,7 @@ import { useContactCategory } from "../../hooks/masterHook/useMaster";
 import usePagination from "../../hooks/usePagination";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
+import ConfirmModal from "../../components/common/ConfirmModal";
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
@@ -24,7 +25,9 @@ const Directory = () => {
   const [contactCategories, setContactCategories] = useState([]);
   const [searchText, setSearchText] = useState("");
   const [listView, setListView] = useState(false);
-  const [selectedBucketIds, setSelectedBucketIds] = useState([]);
+  const [ selectedBucketIds, setSelectedBucketIds ] = useState( [] );
+  const [deleteContact,setDeleteContact] = useState(null)
+  const[IsDeleting,setIsDeletng] = useState(false)
 
   const { contacts, loading } = useDirectory();
   const { contactCategory, loading: contactCategoryLoading } =
@@ -61,6 +64,29 @@ const Directory = () => {
     }
   };
 
+  const handleDeleteContact = async() =>
+  {
+    try
+    {  setIsDeletng(true)
+      const contacts_cache = getCachedData( "contacts" ) || [];
+
+      const response = await DirectoryRepository.DeleteContact( deleteContact );
+      const updatedContacts = ContactList.filter((c) => c.id !== deleteContact); 
+      setContactList( updatedContacts ); 
+      cacheData("Contacts",updatedContacts)
+      showToast("Contact deleted successfully", "success");
+      setDeleteContact( null )
+      
+     setIsDeletng(false)
+    } catch ( error )
+    {
+      const msg  = error.response.data.message || error.message || "Error occured during API calling"
+      showToast( msg, "error" )
+      setIsDeletng(false)
+  }
+    
+  }
+
   const closedModel = () => {
     setIsOpenModal(false);
     setSelectedContact(null);
@@ -179,6 +205,29 @@ const Directory = () => {
           )}
         </GlobalModel>
       )}
+      {deleteContact && (
+
+        <div
+          className={`modal fade  ${deleteContact ? "show" : ""}`}
+          tabIndex="-1"
+          role="dialog"
+          style={{
+            display: deleteContact ? "block" : "none",
+            backgroundColor: deleteContact ? "rgba(0,0,0,0.5)" : "transparent",
+          }}
+          aria-hidden="false"
+        >
+        <ConfirmModal
+          type={"delete"}
+            header={"Delete Contact"}
+            message={"Are you sure you want delete?"}
+            onSubmit={handleDeleteContact}
+            onClose={() => setDeleteContact(null)}
+            loading={IsDeleting}
+          />
+          </div>
+    )}
+
       <div className="card p-2">
         <div className="row mx-0 px-0 align-items-center">
           <div className="col-12 col-md-4 mb-2 px-1 d-flex align-items-center ">
@@ -369,6 +418,9 @@ const Directory = () => {
                       contact={contact}
                       setSelectedContact={setSelectedContact}
                       setIsOpenModal={setIsOpenModal}
+                       setOpen_contact={setOpen_contact}
+                  setIsOpenModalNote={setIsOpenModalNote}
+                  IsDeleted={setDeleteContact}
                     />
                   ))}
               </tbody>
@@ -387,6 +439,7 @@ const Directory = () => {
                   setIsOpenModal={setIsOpenModal}
                   setOpen_contact={setOpen_contact}
                   setIsOpenModalNote={setIsOpenModalNote}
+                  IsDeleted={setDeleteContact}
                 />
               </div>
             ))}