[Refactor] Frontend API Calls should be kept under the Service folder for about

frontend/src/pages/About/About.jsx

@@ -6,9 +6,9 @@ import { MDBBadge } from "mdbreact";
 import teamData from "../../test_data/team-roles.json";
 import style from "./about.module.scss";
 import "./about.scss";
-import { END_POINT } from "../../config/api";
 import Loader from "../../components/util/Loader";
 import { SimpleToast } from "../../components/util/Toast/Toast";
+import { getTeamMembers } from "../../service/About";
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -35,44 +35,9 @@ export const About = (props) => {
   }, []);
   const getTeam = async () => {
     setIsLoaded(true);
-    try {
-      const url = `${END_POINT}/teamMember/getTeamMembers/`;
-      const response = await fetch(url);
-      const data = await response.json();
-      const _data = data.map((item) => {
-        return {
-          ...item,
-          teams: item.teams[0].split(","),
-        };
-      });
-      let _image = [];
-      await _data?.map((item) => {
-        let formattedPath = item.image?.replace(/\\/g, "/");
-        if (formattedPath?.startsWith("uploads/")) {
-          formattedPath = formattedPath.replace("uploads/", "");
-          if (formattedPath) {
-            formattedPath = `${END_POINT}/${formattedPath}`;
-          }
-        }
-        _image.push({ image: formattedPath, id: item._id });
-      });
-      setTeam(_data);
+      const {teamMembers, _image} = await getTeamMembers(setToast, toast);
+      setTeam(teamMembers);
       setImage(_image);
-      setToast({
-        ...toast,
-        toastMessage: "Successfully get Board Members",
-        toastStatus: true,
-        toastType: "success",
-      });
-    } catch (error) {
-      console.error(error);
-      setToast({
-        ...toast,
-        toastMessage: "Sorry! Unable to Board Members",
-        toastStatus: true,
-        toastType: "error",
-      });
-    }
     setIsLoaded(false);
   };
   const handleCloseToast = (event, reason) => {

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

@@ -7,6 +7,7 @@ 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";
+import { postTeamMember } from "../../../../service/About";
 
 export function AddTeamMember() {
   const options = [
@@ -24,16 +25,17 @@ export function AddTeamMember() {
     twitter: "",
     github: "",
   });
-
+  const [toast, setToast] = useState({
+    toastStatus: false,
+    toastType: "",
+    toastMessage: "",
+  });
   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 [toastStatus,setToastStatus] = useState(false);
-  const [toastMessage,setToastMessage] = useState("");
-  const [toastType,setToastType] = useState("")
   const schema = {
     fullName: Joi.string().required(),
     description: Joi.string().required(),
@@ -88,7 +90,7 @@ export function AddTeamMember() {
     if (reason === "clickaway") {
       return;
     }
-    setToastStatus(false);
+    setToast({ ...toast, toastStatus: false });
   };
 
   const handleChange = (e) => {
@@ -141,7 +143,7 @@ export function AddTeamMember() {
       form.append("twitterUrl", formdata.twitter);
       form.append("teams", selectTeam);
       form.append("image", pic);
-      await addTeamMember(form)
+      await postTeamMember(form,setToast,toast);
       const temp = {
         fullName: "",
         description: "",
@@ -151,29 +153,10 @@ export function AddTeamMember() {
       };
       setFormData(temp);
       setTeams([]);
-      setPicUrl("./images/admin.png")
-      setToastType("success")
-      setToastMessage("User added Successfully!")
-      setToastStatus(true);
+      setPicUrl("./images/admin.png");
     }
     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"]}>
@@ -346,12 +329,14 @@ export function AddTeamMember() {
         </div>
       </div>
 
-      {toastStatus && <SimpleToast
-        open={toastStatus}
-        message={toastMessage}
-        handleCloseToast={handleCloseToast}
-        severity={toastType}
-      />}
+      {toast.toastStatus && (
+        <SimpleToast
+          open={toast.toastStatus}
+          message={toast.toastMessage}
+          handleCloseToast={handleCloseToast}
+          severity={toast.toastType}
+        />
+      )}
     </div>
   );
 }

frontend/src/pages/Admin/Components/MangeTeams/ManageTeams.jsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useState } from "react";
 import style from "./manage-teams.module.scss";
-import { END_POINT } from "../../../../config/api";
 import { SimpleToast } from "../../../../components/util/Toast/Toast";
 import Loader from "../../../../components/util/Loader";
+import { deleteTeamMember, getTeamMembers } from "../../../../service/About";
 
 export function ManageTeams() {
   const [cards, setCards] = useState([]);
-  const [depend, setDepend] = useState(false);
   const [image, setImage] = useState([]);
   const [toast, setToast] = useState({
     toastStatus: false,
@@ -17,95 +16,34 @@ export function ManageTeams() {
 
   const getdata = async () => {
     setIsLoaded(true);
-    try {
-      const url = `${END_POINT}/teamMember/getTeamMembers/`;
-      const response = await fetch(url, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${localStorage.getItem("token")}`,
-        },
-      });
-      const res = await response.json();
-      let _image = [];
-      await res?.map((item) => {
-        let formattedPath = item.image?.replace(/\\/g, "/");
-        if (formattedPath?.startsWith("uploads/")) {
-          formattedPath = formattedPath.replace("uploads/", "");
-          if (formattedPath) {
-            formattedPath = `${END_POINT}/${formattedPath}`;
-          }
-        }
-        _image.push({ image: formattedPath, id: item._id });
-      });
-      setImage(_image);
-      setCards(res);
-      setToast({
-        ...toast,
-        toastMessage: "Successfully get Teams",
-        toastStatus: true,
-        toastType: "success",
-      });
-    } catch (error) {
-      console.log(error);
-      setToast({
-        ...toast,
-        toastMessage: "Sorry! Unable to get Teams",
-        toastStatus: true,
-        toastType: "error",
-      });
-    }
+    const {teamMembers, _image} = await getTeamMembers(setToast, toast);
+    setImage(_image);
+    setCards(teamMembers);
     setIsLoaded(false);
   };
 
   const handleDelete = async (id) => {
     setIsLoaded(true);
-    try {
-      const url = `${END_POINT}/teamMember/deleteTeamMember`;
-      const response = await fetch(url, {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${localStorage.getItem("token")}`,
-        },
-        body: JSON.stringify({ memberId: id }),
-      });
-
-      const data = await response.json();
-      setToast({
-        ...toast,
-        toastMessage: "Successfully deleted team",
-        toastStatus: true,
-        toastType: "success",
-      });
-      setDepend(!depend);
-    } catch (error) {
-      console.log(error);
-      setToast({
-        ...toast,
-        toastMessage: "Sorry! Unable to delete Team",
-        toastStatus: true,
-        toastType: "error",
-      });
-    }
+    await deleteTeamMember(id, setToast, toast);
+    await getdata();
+    setIsLoaded(false);
   };
 
-  useEffect(() => {
-    getdata();
-  }, [depend]);
-
   const handleCloseToast = (event, reason) => {
     if (reason === "clickaway") {
       return;
     }
     setToast({ ...toast, toastStatus: false });
   };
+  useEffect(() => {
+    getdata();
+  }, []);
 
   return (
     <div>
       <h1 className={style["head"]}>Teams</h1>
       {isLoaded ?<div className={style["data-loader"]}><Loader /></div>: <div className={style["manage-teams"]}>
-        {cards.map((d, index) => (
+        {cards?.map((d, index) => (
           <div className={style["crd"]} key={d.full_name}>
             <div
               style={{

frontend/src/service/About.jsx

@@ -0,0 +1,108 @@
+import { DELETE_FAIL, DELETE_SUCCESS, GET_FAIL, GET_SUCCESS, POST_FAIL, POST_SUCCUSS } from "../common/constants";
+import { END_POINT } from "../config/api";
+
+const getTeamMembers = async (setToast, toast) => {
+  try {
+    const response = await fetch(`${END_POINT}/teamMember/getTeamMembers/`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
+    const data = await response.json();
+    const _data = data.map((item) => {
+        return {
+          ...item,
+          teams: item.teams[0].split(","),
+        };
+      });
+      let _image = [];
+      await _data?.map((item) => {
+        let formattedPath = item.image?.replace(/\\/g, "/");
+        if (formattedPath?.startsWith("uploads/")) {
+          formattedPath = formattedPath.replace("uploads/", "");
+          if (formattedPath) {
+            formattedPath = `${END_POINT}/${formattedPath}`;
+          }
+        }
+        _image.push({ image: formattedPath, id: item._id });
+      });
+
+    setToast({
+      ...toast,
+      toastMessage: GET_SUCCESS,
+      toastStatus: true,
+      toastType: "success",
+    });
+    return { teamMembers: _data, _image: _image };
+  } catch (err) {
+    console.log(err);
+    setToast({
+      ...toast,
+      toastMessage: GET_FAIL,
+      toastStatus: true,
+      toastType: "error",
+    });
+  }
+};
+
+const postTeamMember = async (data,setToast,toast) => {
+  try {
+    const response = await fetch(`${END_POINT}/teamMember/addTeamMember`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+    const _data = await response.json();
+    setToast({
+      ...toast,
+      toastMessage: POST_SUCCUSS,
+      toastStatus: true,
+      toastType: "success",
+    });
+    return _data;
+  } catch (err) {
+    console.log(err);
+    setToast({
+      ...toast,
+      toastMessage: POST_FAIL,
+      toastStatus: true,
+      toastType: "error",
+    });
+  }
+};
+
+const deleteTeamMember = async (id, setToast, toast) => {
+  try {
+    const response = await fetch(`${END_POINT}/teamMember/deleteTeamMember`, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+      body: JSON.stringify({ memberId: id }),
+    });
+
+    const data = await response.json();
+    setToast({
+      ...toast,
+      toastMessage: DELETE_SUCCESS,
+      toastStatus: true,
+      toastType: "success",
+    });
+    return data;
+  } catch (err) {
+    console.log(err);
+    setToast({
+      ...toast,
+      toastMessage: DELETE_FAIL,
+      toastStatus: true,
+      toastType: "error",
+    });
+  }
+};
+
+export { getTeamMembers, postTeamMember, deleteTeamMember};