Context update after actions

src/component/Calendar.jsx

@@ -8,7 +8,7 @@ import '../styles/calender.css'
 
 function MyCalendar() {
   const localizer = dayjsLocalizer(dayjs);
-  const { teams, members } = useContext(TeamDataContext);
+  const { teams, members, refreshTeamData } = useContext(TeamDataContext);
   const [events, setEvents] = useState([]);
   const [selectedEvent, setSelectedEvent] = useState(null);
 
@@ -43,6 +43,7 @@ function MyCalendar() {
         });
 
         setEvents(formattedEvents);
+        refreshTeamData()
       } catch (error) {
         console.error("Error fetching events:", error);
       }

src/component/Context.jsx

@@ -7,9 +7,13 @@ const TeamDataProvider = ({ children }) => {
   const [teams, setTeams] = useState([]);
   const [members, setMembers] = useState([]);
   const [timeOff, setTimeOff] = useState([]);
+  const [dataIsOld, setDataIsOld] = useState(false);
 
-  useEffect(() => {
-    const fetchData = async () => {
+  const refreshTeamData = () => {
+    setDataIsOld(true)
+  }
+
+  const fetchData = async () => {
       try {
         const [teamsResponse, membersResponse, timeOffResponse] = await Promise.all([
           fetch(apiPath('/teams')),
@@ -28,12 +32,20 @@ const TeamDataProvider = ({ children }) => {
         console.error('Error fetching data:', error);
       }
     };
-
+
+  useEffect(() => { 
     fetchData();
   }, []); 
 
+  useEffect(() => {
+    if(dataIsOld) {
+      fetchData();
+      setDataIsOld(false)
+    }
+  }, [dataIsOld]); 
+
   return (
-    <TeamDataContext.Provider value={{ teams, members, timeOff }}>
+    <TeamDataContext.Provider value={{ teams, members, timeOff, setMembers, refreshTeamData }}>
       {children}
     </TeamDataContext.Provider>
   );

src/component/CreateMember.jsx

@@ -1,25 +1,24 @@
 import { useState, useEffect, useContext } from "react";
 import { useParams } from "react-router-dom";
-import { apiPath } from '../api';
-import { TeamDataContext } from '../component/Context';
-import '../styles/createMember.css'
+import { apiPath } from "../api";
+import { TeamDataContext } from "../component/Context";
+import "../styles/createMember.css";
 
 function CreateMember() {
-  const { code } = useParams(); 
-  const contextData = useContext(TeamDataContext);
-  const teams = contextData.teams;
+  const { code } = useParams();
+  const { teams, refreshTeamData } = useContext(TeamDataContext);
 
   const [teamId, setTeamId] = useState(null);
   const [memberData, setMemberData] = useState({
     first_name: "",
     last_name: "",
     email: "",
     color: "#000000",
-    allowed_dayoff: 0, 
+    allowed_dayoff: 0,
   });
 
   useEffect(() => {
-    const team = teams.find(team => team.team_code === code);
+    const team = teams.find((team) => team.team_code === code);
     if (team) {
       setTeamId(team.id);
     } else {
@@ -31,21 +30,28 @@ function CreateMember() {
     e.preventDefault();
 
     try {
-      const response = await fetch(apiPath('/members'), {
+      const response = await fetch(apiPath("/members"), {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
           ...memberData,
           team_id: teamId,
-          assigned_dayoff: 0, 
+          assigned_dayoff: 0,
         }),
       });
 
       if (response.ok) {
         alert("Member created successfully!");
-        setMemberData({ first_name: "", last_name: "", email: "", color: "#000000", allowed_dayoff: 0 });
+        refreshTeamData();
+        setMemberData({
+          first_name: "",
+          last_name: "",
+          email: "",
+          color: "#000000",
+          allowed_dayoff: 0,
+        });
       } else {
         const data = await response.json();
         alert(data.error || "Failed to create member. Please try again.");
@@ -58,7 +64,7 @@ function CreateMember() {
 
   const handleChange = (e) => {
     const { name, value } = e.target;
-    setMemberData(prevState => ({
+    setMemberData((prevState) => ({
       ...prevState,
       [name]: value,
     }));

src/component/DeleteMember.jsx

@@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom';
 import '../styles/deleteMember.css';
 
 const DeleteMember = () => {
-  const { members, teams } = useContext(TeamDataContext);
+  const { members, teams, setMembers } = useContext(TeamDataContext);
   const [selectedMember, setSelectedMember] = useState('');
   const [filteredMembers, setFilteredMembers] = useState([]);
   const { code } = useParams(); 
@@ -48,9 +48,10 @@ const DeleteMember = () => {
         });
 
         if (response.ok) {
-          const updatedMembers = filteredMembers.filter(member => member.id !== selectedMember);
+          const updatedMembers = filteredMembers.filter(member => member.id !== Number(selectedMember));
           setFilteredMembers(updatedMembers);
           alert('Member deleted successfully');
+          setMembers(updatedMembers)
         } else {
           alert('Failed to delete member. Please try again.');
         }