diff --git a/src/components/calendar/CalendarPage.tsx b/src/components/calendar/CalendarPage.tsx index a2a600c..4e78494 100644 --- a/src/components/calendar/CalendarPage.tsx +++ b/src/components/calendar/CalendarPage.tsx @@ -1,11 +1,25 @@ -import { Calendar, momentLocalizer, Views } from "react-big-calendar"; +import { Calendar, momentLocalizer, Views } from "react-big-calendar"; import moment from "moment"; import "react-big-calendar/lib/css/react-big-calendar.css"; -import { Divider, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, Toolbar, Typography } from "@mui/material"; +import { + Divider, + FormControl, + InputLabel, + MenuItem, + Select, + SelectChangeEvent, + Toolbar, + Typography, +} from "@mui/material"; import { selectMeetings } from "../../redux/slices/meetingsAndUserStatusSlice"; import { useAppDispatch, useAppSelector } from "../../redux/hooks"; -import { selectMe, selectTeam, selectUser, selectUsers } from "../../redux/slices/usersSlice"; +import { + selectMe, + selectTeam, + selectUser, + selectUsers, +} from "../../redux/slices/usersSlice"; import { open } from "../../redux/slices/meetingDetailsOpenSlice"; import DetailedMeeting from "../../api-bodies/DetailedMeeting"; import { useState } from "react"; @@ -29,40 +43,36 @@ interface CalendarEvent { } enum CalendarTaskView { - ViewAll = "VIEWALL" + ViewAll = "VIEWALL", } const CalendarPage: React.FC = () => { const dispatch = useAppDispatch(); - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const currentUserUuid: string = useAppSelector(selectMe)!; - const currentUser: UserLite = useAppSelector((state) => - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - selectUser(state, currentUserUuid)! + const currentUserUuid: string = useAppSelector(selectMe); + const currentUser: UserLite | undefined = useAppSelector((state) => + selectUser(state, currentUserUuid) ); const teamUuids: string[] = useAppSelector(selectTeam); const team: UserLite[] = useAppSelector((state) => selectUsers(state, teamUuids) ); - const meetings: CalendarEvent[] = useAppSelector((state) => + const meetings: CalendarEvent[] = useAppSelector((state) => selectMeetings(state) - ).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 - }) - ); + ).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 [selectedUserUuid, setSelectedUserUuid] = useState(currentUserUuid); @@ -88,12 +98,12 @@ const CalendarPage: React.FC = () => { // filter the meetings based on the uuid const getUserMeetings = (uuid: string): CalendarEvent[] => { - if (uuid == CalendarTaskView.ViewAll) { // "View all team member meetings" option + if (uuid == CalendarTaskView.ViewAll) { + // "View all team member meetings" option return meetings; } else { - return meetings.filter(meeting => meeting.registrantIds.includes(uuid)); + return meetings.filter((meeting) => meeting.registrantIds.includes(uuid)); } - }; return ( @@ -111,16 +121,24 @@ const CalendarPage: React.FC = () => { label="User" onChange={handleUserChange} > - View all team member meetings - {currentUser.name + " (Me)"} - {team.map(user => ( - {user.name} + + View all team member meetings + + {currentUser ? ( + + {currentUser.name + " (Me)"} + + ) : null} + {team.map((user) => ( + + {user.name} + ))} - + { style={{ height: "83%" }} /> - ); }; -export default CalendarPage; \ No newline at end of file +export default CalendarPage; diff --git a/src/redux/slices/usersSlice.tsx b/src/redux/slices/usersSlice.tsx index 6df583d..c8ffd1d 100644 --- a/src/redux/slices/usersSlice.tsx +++ b/src/redux/slices/usersSlice.tsx @@ -4,8 +4,8 @@ import { userLites, team } from "../../api-bodies/MockData"; import UserLite from "../../api-bodies/UserLite"; interface TeamState { - user: string | null; - manager: string | null; + user: string; + manager: string; sameManager: string[]; directReports: string[]; } @@ -17,7 +17,7 @@ interface UsersState { const initialState: UsersState = { users: {}, - team: { user: null, manager: null, sameManager: [], directReports: [] }, + team: { user: "", manager: "", sameManager: [], directReports: [] }, }; export const usersSlice = createSlice({ @@ -61,11 +61,11 @@ export const selectUsers = (state: RootState, uuids: string[]): UserLite[] => { }; export const selectTeam = (state: RootState) => { const team: string[] = []; - if (state.users.team.manager !== null) team.push(state.users.team.manager); + if (state.users.team.manager) team.push(state.users.team.manager); state.users.team.sameManager.forEach((u) => team.push(u)); state.users.team.directReports.forEach((u) => team.push(u)); return team; }; export const selectMe = (state: RootState) => state.users.team.user; -export default usersSlice.reducer; \ No newline at end of file +export default usersSlice.reducer; diff --git a/src/utils.tsx b/src/utils.tsx index 6dbb3d5..3e2ad36 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -17,7 +17,8 @@ const getStatusColor = (ms: MeetingStatus): string => { const formatTimeFromDate = (date: Date): string => { let hour = date.getHours(); let ampm = ""; - let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : "" + date.getMinutes(); + const minutes = + date.getMinutes() < 10 ? "0" + date.getMinutes() : "" + date.getMinutes(); if (hour < 12) { ampm = "am"; } else {