Added Toast and ContactModal in ContactList

nirmal1064 · Feb 24, 2023 · 718aef7 · 718aef7
1 parent 8a04b86
commit 718aef7
Showing 1 changed file with 37 additions and 1 deletion.
diff --git a/src/pages/ContactList.jsx b/src/pages/ContactList.jsx
@@ -1,8 +1,44 @@
+import { useState } from "react";
 import { Button } from "react-bootstrap";
+import ContactModal from "../components/ContactModal";
 
 const ContactList = () => {
+  const { msg, setMsg, errorMsg, setErrorMsg } = useContacts();
+  const [showContactModal, setShowContactModal] = useState(false);
+  const [type, setType] = useState("");
+  const [activeContact, setActiveContact] = useState({});
+
+  const closeContactModal = () => {
+    setActiveContact({});
+    setShowContactModal(false);
+    setType("");
+  };
+
+  const handleAdd = () => {
+    setType("Add");
+    setShowContactModal(true);
+  };
+
   return (
     <div>
+      <ToastMessage
+        type="Success"
+        show={msg ? true : false}
+        message={msg}
+        handleClose={() => setMsg("")}
+      />
+      <ToastMessage
+        type="Error"
+        show={errorMsg ? true : false}
+        message={errorMsg}
+        handleClose={() => setErrorMsg("")}
+      />
+      <ContactModal
+        show={showContactModal}
+        handleClose={closeContactModal}
+        type={type}
+        contact={activeContact}
+      />
       <div
         style={{
           display: "flex",
@@ -12,7 +48,7 @@ const ContactList = () => {
           marginBottom: "10px"
         }}>
         <h2 className="text-center">Contact List</h2>
-        <Button>Add Contact</Button>
+        <Button onClick={handleAdd}>Add Contact</Button>
       </div>
     </div>
   );