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) => {
-    try
-    {
-      debugger
-      const resp = await DirectoryRepository.CreateContact(data)
+  const submitContact = async (data) => {
+    try {
+      let response;
+      let updatedContacts;
       const contacts_cache = getCachedData("contacts") || [];
-      const updated_contacts = [...contacts_cache, resp.data];
 
-      setContactList(updated_contacts);
-      showToast(resp.message || "Contact created successfully", "success");
-      setLoading(false);
-      reset();
-      setIsOpenModal(false);
+      if (selectedContact) {
+        setSelectedContact(null);
+        response = await DirectoryRepository.UpdateContact(data.id, data);
+        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">
-          <ManageDirectory
-            submitContact={submitContact}
-            onCLosed={closedModel}
-          />
+        <GlobalModel
+          isOpen={isOpenModal}
+          closeModal={() => setIsOpenModal(false)}
+          size="lg"
+        >
+          {selectedContact ? (
+            <UpdateContact
+              existingContact={selectedContact}
+              submitContact={submitContact}
+              onCLosed={closedModel}
+            />
+          ) : (
+            <ManageDirectory
+              submitContact={submitContact}
+              onCLosed={closedModel}
+            />
+          )}
         </GlobalModel>
       )}
 
@@ -93,7 +119,7 @@ const Directory = () => {
                     <span>Name</span>
                   </div>
                 </th>
-                <th  className="px-2 text-start">
+                <th className="px-2 text-start">
                   <div className="d-flex text-center align-items-center gap-1 justify-content-start">
                     <IconButton
                       size={12}
@@ -169,21 +195,22 @@ 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>
-             )}
+              )}
               {!loading &&
                 ContatList.map((contact) => (
                   <ListViewDirectory
                     contact={contact}
-                    submitContact={submitContact}
+                    setSelectedContact={setSelectedContact}
+                    setIsOpenModal={setIsOpenModal}
                   />
                 ))}
             </tbody>