From 7b9ed5e313b8703a763a588ecfaf1a0b92d4cc44 Mon Sep 17 00:00:00 2001 From: mbalsdon Date: Fri, 25 Mar 2022 09:55:20 -0700 Subject: [PATCH] move everything into one file --- src/components/calendar/CalendarPage.tsx | 81 +++++++++++++++++++-- src/components/calendar/UserCalendar.tsx | 89 ------------------------ 2 files changed, 77 insertions(+), 93 deletions(-) delete mode 100644 src/components/calendar/UserCalendar.tsx 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