☘️ [Frontend] Integrate Add Team Member API with Frontend Fixed (#891)

* Add team member Fixed

* toast

frontend/src/pages/Admin/Components/About/About.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import style from "./about-us.module.scss";
 import { AiFillEdit } from "react-icons/ai";
 import { AiOutlinePlus } from "react-icons/ai";
-import { Link } from "react-router-dom";
 
 export function About(props) {
   return (
@@ -12,19 +11,19 @@ export function About(props) {
         <div className={style["card-item"]}>
           <div className={style["clickable-card"]}>
             <div className={style["card-title"]}>
-              <Link onClick={() => props.setTab(14)} style={{ color: "white" }}>
+              <div onClick={() => props.setTab(14)} style={{ color: "white" }}>
                 ADD TEAM MEMBER
-              </Link>
+              </div>
               <AiOutlinePlus className={style["add"]} />
             </div>
             <div className={style["card-content"]}>
               <p style={{ textAlign: "left" }}>To add a new team member</p>
               <p
                 style={{ color: "red", cursor: "pointer", textAlign: "left" }}
               >
-                <Link onClick={() => props.setTab(14)} style={{ color: "red" }}>
+                <div onClick={() => props.setTab(14)} style={{ color: "red" }}>
                   CLICK HERE
-                </Link>
+                </div>
               </p>
             </div>
           </div>

frontend/src/pages/Admin/Components/AddTeamMember/AddTeamMember.jsx

@@ -6,6 +6,7 @@ import MultiSelect from "react-multi-select-component";
 import { Button2 } from "../../../../components/util/Button/index";
 import { Grid } from "@material-ui/core";
 import { SimpleToast } from "./../../../../components/util/Toast/Toast";
+import { END_POINT } from "../../../../config/api";
 
 export function AddTeamMember() {
   const options = [
@@ -27,10 +28,12 @@ export function AddTeamMember() {
   const [formerrors, setFormErrors] = useState({});
   const [teamError, setTeamError] = useState();
   const [teams, setTeams] = useState([]);
+  const [selectTeam, setSelectTeam] = useState([]);
   const [picUrl, setPicUrl] = useState("./images/admin.png");
   const [pic, setPic] = useState();
-  const [openSuccess, setOpenSuccessToast] = React.useState(false);
-
+  const [toastStatus,setToastStatus] = useState(false);
+  const [toastMessage,setToastMessage] = useState("");
+  const [toastType,setToastType] = useState("")
   const schema = {
     fullName: Joi.string().required(),
     description: Joi.string().required(),
@@ -85,7 +88,7 @@ export function AddTeamMember() {
     if (reason === "clickaway") {
       return;
     }
-    setOpenSuccessToast(false);
+    setToastStatus(false);
   };
 
   const handleChange = (e) => {
@@ -101,9 +104,8 @@ export function AddTeamMember() {
     setFormErrors(errors);
   };
 
-  console.log("formerrors: ", formerrors);
 
-  const onSubmit = (e) => {
+  const onSubmit = async (e) => {
     e.preventDefault();
     const errors = validate();
     if (formdata["linkedin"] === "") {
@@ -131,7 +133,15 @@ export function AddTeamMember() {
       console.log(errors);
     } else {
       //Call the Server
-      console.log("Submitted");
+      const form = new FormData();
+      form.append("fullName", formdata?.fullName);
+      form.append("description", formdata?.description);
+      form.append("linkedinUrl", formdata?.linkedin);
+      form.append("githubUrl", formdata.github);
+      form.append("twitterUrl", formdata.twitter);
+      form.append("teams", selectTeam);
+      form.append("image", pic);
+      await addTeamMember(form)
       const temp = {
         fullName: "",
         description: "",
@@ -141,10 +151,29 @@ export function AddTeamMember() {
       };
       setFormData(temp);
       setTeams([]);
-      setOpenSuccessToast(true);
+      setPicUrl("./images/admin.png")
+      setToastType("success")
+      setToastMessage("User added Successfully!")
+      setToastStatus(true);
     }
     return pic;
   };
+  const addTeamMember = async (data) => {
+    try {
+      let url = `${END_POINT}/teamMember/addTeamMember`;
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+        body: data,
+      });
+    } catch (error) {
+      setToastMessage("Sorry! Error is adding team Member")
+      setToastType("error")
+      setToastStatus(true);
+    }
+  };
   return (
     <div className={styles["add-team-member-section"]}>
       <div className={styles["add-team-member-parent"]}>
@@ -288,7 +317,13 @@ export function AddTeamMember() {
               <MultiSelect
                 options={options} // Options to display in the dropdown
                 value={teams} // Preselected value to persist in dropdown
-                onChange={setTeams} // Function will trigger on change event
+                onChange={(selectedOptions) => {
+                  const selectedValues = selectedOptions.map(
+                    (option) => option.value
+                  );
+                  setSelectTeam(selectedValues);
+                  setTeams(selectedOptions);
+                }}
                 labelledBy={"Teams"} // Property name to display in the dropdown options
                 className={styles["dropdown"]}
               />
@@ -310,12 +345,13 @@ export function AddTeamMember() {
           </div>
         </div>
       </div>
-      <SimpleToast
-        open={openSuccess}
-        message="New member added successfully"
+
+      {toastStatus && <SimpleToast
+        open={toastStatus}
+        message={toastMessage}
         handleCloseToast={handleCloseToast}
-        severity="success"
-      />
+        severity={toastType}
+      />}
     </div>
   );
 }