diff --git a/src/components/calendar/CalendarPage.tsx b/src/components/calendar/CalendarPage.tsx
index 340e0fe..f3723d2 100644
--- a/src/components/calendar/CalendarPage.tsx
+++ b/src/components/calendar/CalendarPage.tsx
@@ -1,14 +1,87 @@
-import { Toolbar } from "@mui/material";
-import UserCalendar from "./UserCalendar";
+import { Calendar, momentLocalizer, Views } from "react-big-calendar";
+import moment from "moment";
+
+import "react-big-calendar/lib/css/react-big-calendar.css";
+import { Divider, Toolbar } from "@mui/material";
+import { selectUserUpcomingMeetings } from "../../redux/slices/meetingsAndUserStatusSlice";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
+import { selectMe } from "../../redux/slices/usersSlice";
+import { open } from "../../redux/slices/meetingDetailsOpenSlice";
+import DetailedMeeting from "../../api-bodies/DetailedMeeting";
+
+// TODO: per user calendar
+// TODO: full view (all teammates)
+// TODO: match the styles and themes
+
+// A superset of DetailedMeeting; contains fields required for the calendar to work
+interface CalendarEvent {
+ meetingId: string;
+ liveParticipantIds: string[];
+ registrantIds: string[];
+ startIso: string; // names overlap here; this is equivalent to "start" in DetailedMeeting
+ duration: number;
+ timezone: string;
+ joinUrl: string;
+ topic: string;
+ title: string;
+ start: Date;
+ end: Date;
+}
const CalendarPage: React.FC = () => {
+ const dispatch = useAppDispatch();
+ const currentUserUuid = useAppSelector(selectMe); // TODO: per-user
+ const meetings = useAppSelector((state) =>
+ selectUserUpcomingMeetings(state, currentUserUuid)
+ ).map(m =>
+ ({
+ meetingId: m.meetingId,
+ liveParticipantIds: m.liveParticipantIds,
+ registrantIds: m.registrantIds,
+ startIso: m.start,
+ duration: m.duration,
+ timezone: m.timezone,
+ joinUrl: m.joinUrl,
+ topic: m.topic,
+ // fields needed by calendar
+ title: m.topic,
+ start: new Date(Date.parse(m.start)), // Turns the ISO String into a date object
+ end: new Date(Date.parse(m.start) + m.duration*60000) // result of Date.parse() is milliseconds, and m.duration is given in minutes
+ })
+ );
+
+ const handleSelectEvent = (event: CalendarEvent) => {
+ const meeting: DetailedMeeting = {
+ meetingId: event.meetingId,
+ liveParticipantIds: event.liveParticipantIds,
+ registrantIds: event.registrantIds,
+ start: event.startIso,
+ duration: event.duration,
+ timezone: event.timezone,
+ joinUrl: event.joinUrl,
+ topic: event.topic,
+ };
+ dispatch(open(meeting));
+ };
+
return (
<>
-
+
+
>
+
);
};
-export default CalendarPage;
+export default CalendarPage;
\ No newline at end of file
diff --git a/src/components/calendar/UserCalendar.tsx b/src/components/calendar/UserCalendar.tsx
deleted file mode 100644
index 26497c7..0000000
--- a/src/components/calendar/UserCalendar.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Calendar, momentLocalizer, Views } from "react-big-calendar";
-import moment from "moment";
-
-import "react-big-calendar/lib/css/react-big-calendar.css";
-import { Divider } from "@mui/material";
-import { selectUserUpcomingMeetings } from "../../redux/slices/meetingsAndUserStatusSlice";
-import { useAppDispatch, useAppSelector } from "../../redux/hooks";
-import { selectMe } from "../../redux/slices/usersSlice";
-import { open } from "../../redux/slices/meetingDetailsOpenSlice";
-import DetailedMeeting from "../../api-bodies/DetailedMeeting";
-
-// clicking meetings opens view
-
-// per user calendar
-// full view (all teammates)
-// match the styles and themes
-// make an interface for events
-
-// A superset of DetailedMeeting; contains fields required for the calendar to work
-interface CalendarEvent {
- meetingId: string;
- liveParticipantIds: string[];
- registrantIds: string[];
- startIso: string; // names overlap here; this is equivalent to "start" in DetailedMeeting
- duration: number;
- timezone: string;
- joinUrl: string;
- topic: string;
- title: string;
- start: Date;
- end: Date;
-}
-
-const UserCalendar: React.FC = () => {
-
- const dispatch = useAppDispatch();
- const currentUserUuid = useAppSelector(selectMe); // TODO: per-user
- const meetings = useAppSelector((state) =>
- selectUserUpcomingMeetings(state, currentUserUuid)
- ).map(m =>
- ({
- meetingId: m.meetingId,
- liveParticipantIds: m.liveParticipantIds,
- registrantIds: m.registrantIds,
- startIso: m.start,
- duration: m.duration,
- timezone: m.timezone,
- joinUrl: m.joinUrl,
- topic: m.topic,
- // fields needed by calendar
- title: m.topic,
- start: new Date(Date.parse(m.start)), // Turns the ISO String into a date object
- end: new Date(Date.parse(m.start) + m.duration*60000) // result of Date.parse() is milliseconds, and m.duration is given in minutes
- })
- );
-
- const handleSelectEvent = (event: CalendarEvent) => {
- const meeting: DetailedMeeting = {
- meetingId: event.meetingId,
- liveParticipantIds: event.liveParticipantIds,
- registrantIds: event.registrantIds,
- start: event.startIso,
- duration: event.duration,
- timezone: event.timezone,
- joinUrl: event.joinUrl,
- topic: event.topic,
- };
- dispatch(open(meeting));
- };
-
- return (
- <>
-
-
- >
-
- );
-};
-
-export default UserCalendar;
\ No newline at end of file