Edit contact UI updated

nirmal1064 · Feb 24, 2023 · 690f7e0 · 690f7e0
1 parent 0b1dff8
commit 690f7e0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/components/ContactModal.jsx b/src/components/ContactModal.jsx
@@ -7,7 +7,7 @@ const ContactModal = ({ show, handleClose, type, contact }) => {
   const nameRef = useRef(null);
   const phoneRef = useRef(null);
   const addressRef = useRef(null);
-  const { addContact, setErrorMsg } = useContacts();
+  const { addContact, setErrorMsg, editContact } = useContacts();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -28,7 +28,7 @@ const ContactModal = ({ show, handleClose, type, contact }) => {
         address: addressRef.current.value
       };
       if (type === "Edit") {
-        // Yet to implement
+        await editContact(contactToSave, contact.id);
       } else {
         await addContact(contactToSave);
       }

diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,3 @@
+.icon {
+  cursor: pointer;
+}
diff --git a/src/pages/ContactList.jsx b/src/pages/ContactList.jsx
@@ -70,7 +70,13 @@ const ContactList = () => {
               <td>{contact.phone}</td>
               <td>{contact.address}</td>
               <td className="d-flex flex-row justify-content-around">
-                <i className="bi bi-pencil-square"></i>
+                <i
+                  className="bi bi-pencil-square icon"
+                  onClick={() => {
+                    setActiveContact(contact);
+                    setType("Edit");
+                    setShowContactModal(true);
+                  }}></i>
                 <i className="bi bi-trash3"></i>
               </td>
             </tr>