From 2281580c4b876d4b3d7d92864906f29c49d3cc84 Mon Sep 17 00:00:00 2001 From: Camille Moussu Date: Wed, 9 Jul 2025 11:53:53 +0200 Subject: [PATCH] [#30] Load data for the current month --- src/components/Calendar/Calendar.tsx | 52 +++++++++++++++---------- src/features/Calendars/CalendarApi.ts | 9 ++++- src/features/Calendars/CalendarSlice.ts | 10 +++-- src/utils/dateUtils.ts | 29 ++++++++++++++ 4 files changed, 74 insertions(+), 26 deletions(-) create mode 100644 src/utils/dateUtils.ts diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index 32eed06..061cc2e 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/src/components/Calendar/Calendar.tsx @@ -14,6 +14,10 @@ import { CalendarEvent } from "../../features/Events/EventsTypes"; import CalendarSelection from "./CalendarSelection"; import { getCalendarDetailAsync } from "../../features/Calendars/CalendarSlice"; import ImportAlert from "../../features/Events/ImportAlert"; +import { + formatDateToYYYYMMDDTHHMMSS, + getCalendarRange, +} from "../../utils/dateUtils"; export default function CalendarApp() { const calendarRef = useRef(null); @@ -40,12 +44,17 @@ export default function CalendarApp() { const isEmpty = events.length === 0; const notFetched = !fetchedIdsRef.current.has(id); + const calendarRange = getCalendarRange(selectedDate); if (isEmpty && notFetched && !pending) { dispatch( getCalendarDetailAsync({ access_token: tokens.access_token, calId: id, + match: { + start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start), + end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end), + }, }) ); fetchedIdsRef.current.add(id); @@ -53,23 +62,6 @@ export default function CalendarApp() { }); }, [selectedCalendars, calendars, pending, tokens.access_token, dispatch]); - const [date, setDate] = useState(new Date()); - - const months = [ - "January", - "February", - "March", - "April", - "May", - "June", - "July", - "August", - "September", - "October", - "November", - "December", - ]; - const [anchorEl, setAnchorEl] = useState(null); const [anchorElCal, setAnchorElCal] = useState(null); const [selectedRange, setSelectedRange] = useState( @@ -92,25 +84,39 @@ export default function CalendarApp() {
- {months[date.getMonth()]} {date.getFullYear()} + {selectedDate.toLocaleDateString("us-us", { + month: "long", + year: "numeric", + })}
@@ -163,6 +169,12 @@ export default function CalendarApp() { minute: "2-digit", hour12: false, }} + datesSet={(arg) => { + const today = new Date(); + setSelectedDate( + today > arg.start && today < arg.end ? today : arg.start + ); + }} dayHeaderContent={(arg) => { const date = arg.date.getDate(); const weekDay = arg.date diff --git a/src/features/Calendars/CalendarApi.ts b/src/features/Calendars/CalendarApi.ts index 422f987..881c0b5 100644 --- a/src/features/Calendars/CalendarApi.ts +++ b/src/features/Calendars/CalendarApi.ts @@ -14,7 +14,12 @@ export async function getCalendars(userId: string, opaque_token: string) { return calendars; } -export async function getCalendar(id: string, opaque_token: string) { +export async function getCalendar( + id: string, + opaque_token: string, + match: { start: string; end: string } +) { + console.log(match) const response = await fetch( `${(window as any).CALENDAR_BASE_URL}/dav/calendars/${id}.json`, { @@ -24,7 +29,7 @@ export async function getCalendar(id: string, opaque_token: string) { Authorization: `Bearer ${opaque_token}`, }, body: JSON.stringify({ - match: { start: "20250525T000000", end: "20250708T000000" }, + match, }), } ); diff --git a/src/features/Calendars/CalendarSlice.ts b/src/features/Calendars/CalendarSlice.ts index 3a79bd4..21ed44f 100644 --- a/src/features/Calendars/CalendarSlice.ts +++ b/src/features/Calendars/CalendarSlice.ts @@ -32,9 +32,9 @@ export const getCalendarsListAsync = createAsyncThunk< export const getCalendarDetailAsync = createAsyncThunk< { calId: string; events: CalendarEvent[] }, // Return type - { access_token: string; calId: string } // Arg type ->("calendars/getCalendarDetails", async ({ access_token, calId }) => { - const calendar = await getCalendar(calId, access_token); + { access_token: string; calId: string; match: { start: string; end: string } } // Arg type +>("calendars/getCalendarDetails", async ({ access_token, calId, match }) => { + const calendar = await getCalendar(calId, access_token, match); const color = calendar["apple:color"]; const events: CalendarEvent[] = calendar._embedded["dav:item"].map( (eventdata: any) => { @@ -104,7 +104,9 @@ const CalendarSlice = createSlice({ events: [] as CalendarEvent[], } as Calendars; } - state.list[action.payload.calId].events = action.payload.events; + action.payload.events.forEach((event) => { + state.list[action.payload.calId].events.push(event); + }); state.list[action.payload.calId].events.forEach((event) => { event.color = state.list[action.payload.calId].color; }); diff --git a/src/utils/dateUtils.ts b/src/utils/dateUtils.ts new file mode 100644 index 0000000..ad84e15 --- /dev/null +++ b/src/utils/dateUtils.ts @@ -0,0 +1,29 @@ +export function formatDateToYYYYMMDDTHHMMSS(date: Date) { + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, "0"); + const day = String(date.getDate()).padStart(2, "0"); + return `${year}${month}${day}T000000`; +} + +export function getCalendarRange(date = new Date()) { + const year = date.getFullYear(); + const month = date.getMonth(); + + const firstOfMonth = new Date(year, month, 1); + const dayOfWeekStart = firstOfMonth.getDay(); + const diffToMonday = (dayOfWeekStart + 6) % 7; + const startDate = new Date(firstOfMonth); + startDate.setDate(firstOfMonth.getDate() - diffToMonday); + + const lastOfMonth = new Date(year, month + 1, 0); + const dayOfWeekEnd = lastOfMonth.getDay(); + + const diffToSunday = (7 - dayOfWeekEnd) % 7; + const endDate = new Date(lastOfMonth); + endDate.setDate(lastOfMonth.getDate() + diffToSunday); + + return { + start: startDate, + end: endDate, + }; +}