diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index 11ba3ce..1cbf940 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/src/components/Calendar/Calendar.tsx @@ -10,15 +10,20 @@ import { useRef, useState } from "react"; import { useAppSelector } from "../../app/hooks"; import EventPopover from "../../features/Events/EventModal"; import CalendarPopover from "../../features/Calendars/CalendarModal"; +import { CalendarEvent } from "../../features/Events/EventsTypes"; export default function CalendarApp() { const calendarRef = useRef(null); const [selectedDate, setSelectedDate] = useState(new Date()); const calendars = useAppSelector((state) => state.calendars); const [selectedCalendars, setSelectedCalendars] = useState( - Object.keys(calendars).map((id) => calendars[id].name) + Object.keys(calendars).map((id) => id) ); - const events = useAppSelector((state) => state.events); + + let filteredEvents: CalendarEvent[] = []; + selectedCalendars.forEach((id) => { + filteredEvents = filteredEvents.concat(calendars[id].events); + }); const handleCalendarToggle = (name: string) => { setSelectedCalendars((prev) => @@ -103,9 +108,9 @@ export default function CalendarApp() { @@ -132,7 +137,7 @@ export default function CalendarApp() { timeGridWeek: { titleFormat: { month: "long", year: "numeric" } }, }} dayMaxEvents={true} - events={events} + events={filteredEvents} weekNumbers weekNumberFormat={{ week: "long" }} slotDuration={"00:30:00"} diff --git a/src/features/Calendars/CalendarSlice.ts b/src/features/Calendars/CalendarSlice.ts index 25fa487..0d9e025 100644 --- a/src/features/Calendars/CalendarSlice.ts +++ b/src/features/Calendars/CalendarSlice.ts @@ -18,6 +18,10 @@ const CalendarSlice = createSlice({ state, action: PayloadAction<{ calendarUid: string; event: CalendarEvent }> ) => { + console.log(action.payload) + if (!state[action.payload.calendarUid].events) { + state[action.payload.calendarUid].events = []; + } state[action.payload.calendarUid].events.push(action.payload.event); }, removeEvent: ( diff --git a/src/features/Events/EventModal.tsx b/src/features/Events/EventModal.tsx index f9e212f..e90a4c0 100644 --- a/src/features/Events/EventModal.tsx +++ b/src/features/Events/EventModal.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { addEvent } from "./EventsSlice"; +import { addEvent } from "../Calendars/CalendarSlice"; import { CalendarEvent } from "./EventsTypes"; import { DateSelectArg } from "@fullcalendar/core"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; @@ -11,6 +11,7 @@ import { Typography, Select, MenuItem, + SelectChangeEvent, } from "@mui/material"; function EventPopover({ @@ -22,13 +23,13 @@ function EventPopover({ anchorEl: HTMLElement | null; open: boolean; onClose: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void; - selectedRange: any; + selectedRange: DateSelectArg | null; }) { const dispatch = useAppDispatch(); const organizer = useAppSelector((state) => state.user.organiserData); const calendars = useAppSelector((state) => state.calendars); - const [summary, setSummary] = useState(""); + const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [location, setLocation] = useState(""); const [start, setStart] = useState(""); @@ -44,9 +45,9 @@ function EventPopover({ const handleSave = () => { const newEvent: CalendarEvent = { - summary, - start: new Date(start), - end: new Date(end), + title, + start: new Date(start || ""), + end: new Date(end || ""), uid: Date.now().toString(36), description, location, @@ -62,13 +63,13 @@ function EventPopover({ }, ], transp: "OPAQUE", + color: calendars[calendarid].color, }; - dispatch(addEvent(newEvent)); - console.log(newEvent); + dispatch(addEvent({ calendarUid: calendarid, event: newEvent })); onClose({}, "backdropClick"); // Reset - setSummary(""); + setTitle(""); setDescription(""); setLocation(""); }; @@ -91,16 +92,18 @@ function EventPopover({ Create Event - setCalendarid(e.target.value)} + > {Object.keys(calendars).map((calendar) => ( {calendars[calendar].name} ))} setSummary(e.target.value)} + label="title" + value={title} + onChange={(e) => setTitle(e.target.value)} size="small" margin="dense" /> diff --git a/src/features/Events/EventsTypes.ts b/src/features/Events/EventsTypes.ts index 6a3dfdb..1ee80e5 100644 --- a/src/features/Events/EventsTypes.ts +++ b/src/features/Events/EventsTypes.ts @@ -7,11 +7,12 @@ export interface CalendarEvent { end?: Date; class?: string; x_openpass_videoconference?: unknown; - summary?: string; + title?: string; description?: string; location?: string; organizer: userOrganiser; attendee: userAttendee[]; stamp?: Date; sequence?: Number; + color?: string; }