diff --git a/src/component/Calendar.jsx b/src/component/Calendar.jsx index 00e636f..3fe4e2f 100644 --- a/src/component/Calendar.jsx +++ b/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); } diff --git a/src/component/Context.jsx b/src/component/Context.jsx index 07fec3e..af6bc4e 100644 --- a/src/component/Context.jsx +++ b/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 ( - + {children} ); diff --git a/src/component/CreateMember.jsx b/src/component/CreateMember.jsx index 09b5c4d..70df033 100644 --- a/src/component/CreateMember.jsx +++ b/src/component/CreateMember.jsx @@ -1,13 +1,12 @@ 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({ @@ -15,11 +14,11 @@ function CreateMember() { 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,7 +30,7 @@ function CreateMember() { e.preventDefault(); try { - const response = await fetch(apiPath('/members'), { + const response = await fetch(apiPath("/members"), { method: "POST", headers: { "Content-Type": "application/json", @@ -39,13 +38,20 @@ function CreateMember() { 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, })); diff --git a/src/component/DeleteMember.jsx b/src/component/DeleteMember.jsx index 961347b..80d3159 100644 --- a/src/component/DeleteMember.jsx +++ b/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.'); }