added update contact modal

src/pages/Directory/Directory.jsx

@@ -8,35 +8,49 @@ import { useDirectory } from "../../hooks/useDirectory";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import { getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
+import UpdateContact from "../../components/Directory/UpdateContact";
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
-  const closedModel = () => setIsOpenModal(false);
+  const [selectedContact, setSelectedContact] = useState(null);
   const [ContatList, setContactList] = useState([]);
 
   const { contacts, loading } = useDirectory();
-  const submitContact = async (data, setLoading, reset) => {
+  const submitContact = async (data) => {
-    try
+    try {
-    {
+      let response;
-      debugger
+      let updatedContacts;
-      const resp = await DirectoryRepository.CreateContact(data)
       const contacts_cache = getCachedData("contacts") || [];
-      const updated_contacts = [...contacts_cache, resp.data];
 
-      setContactList(updated_contacts);
+      if (selectedContact) {
-      showToast(resp.message || "Contact created successfully", "success");
+        setSelectedContact(null);
-      setLoading(false);
+        response = await DirectoryRepository.UpdateContact(data.id, data);
-      reset();
+        updatedContacts = contacts_cache.map((contact) =>
+          contact.id === data.id ? response.data : contact
+        );
+        showToast("Contact updated successfully", "success");
         setIsOpenModal(false);
+      } else {
+        response = await DirectoryRepository.CreateContact(data);
+        updatedContacts = [...contacts_cache, response.data];
+        showToast("Contact created successfully", "success");
+        setIsOpenModal(false);
+      }
+
+      setContactList(updatedContacts);
     } catch (error) {
       const msg =
-        error.response.data.message ||
+        error.response?.data?.message ||
         error.message ||
-        "Error Occured during api calling !";
+        "Error occurred during API call!";
       showToast(msg, "error");
     }
   };
 
+  const closedModel = () => {
+    setIsOpenModal(false);
+    setSelectedContact(null);
+  };
   useEffect(() => {
     setContactList(contacts);
   }, [contacts]);
@@ -50,11 +64,23 @@ const Directory = () => {
       ></Breadcrumb>
 
       {isOpenModal && (
-        <GlobalModel isOpen={isOpenModal} closeModal={()=>setIsOpenModal(false)} size="lg">
+        <GlobalModel
+          isOpen={isOpenModal}
+          closeModal={() => setIsOpenModal(false)}
+          size="lg"
+        >
+          {selectedContact ? (
+            <UpdateContact
+              existingContact={selectedContact}
+              submitContact={submitContact}
+              onCLosed={closedModel}
+            />
+          ) : (
             <ManageDirectory
               submitContact={submitContact}
               onCLosed={closedModel}
             />
+          )}
         </GlobalModel>
       )}
 
@@ -169,12 +195,12 @@ const Directory = () => {
               </tr>
             </thead>
             <tbody className="table-border-bottom-0 overflow-auto ">
-              {(loading && ContatList.length === 0) && (
+              {loading && ContatList.length === 0 && (
                 <tr>
                   <td colSpan={10}>Loading...</td>
                 </tr>
               )}
-              {(!loading && contacts.length == 0 && ContatList.length === 0) && (
+              {!loading && contacts.length == 0 && ContatList.length === 0 && (
                 <tr>
                   <td colSpan={10}>No Contact Found</td>
                 </tr>
@@ -183,7 +209,8 @@ const Directory = () => {
                 ContatList.map((contact) => (
                   <ListViewDirectory
                     contact={contact}
-                    submitContact={submitContact}
+                    setSelectedContact={setSelectedContact}
+                    setIsOpenModal={setIsOpenModal}
                   />
                 ))}
             </tbody>