UBC/Alley-HSBC-Frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

move everything into one file

Browse Source
This commit is contained in:
mbalsdon 2022-03-25 09:55:20 -07:00
parent dcff2d70ef
commit 7b9ed5e313
2 changed files with 77 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/calendar/CalendarPage.tsx
View File

@ -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 (
<>
<Toolbar />
<UserCalendar />
<Divider sx={{ my: 1 }} />
<Calendar
events={meetings}
views={["month", "week", "day"]}
defaultView={Views.WEEK}
onSelectEvent={handleSelectEvent}
step={60}
showMultiDayTimes
localizer={momentLocalizer(moment)}
style={{ height: "90%" }}
/>
</>
);
};
export default CalendarPage;
export default CalendarPage;

89
src/components/calendar/UserCalendar.tsx
View File

@ -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 (
<>
<Divider sx={{ my: 1 }} />
<Calendar
events={meetings}
views={["month", "week", "day"]}
defaultView={Views.WEEK}
onSelectEvent={handleSelectEvent}
step={60}
showMultiDayTimes
localizer={momentLocalizer(moment)}
style={{ height: "90%" }}
/>
</>
);
};
export default UserCalendar;