currentUser now cannot be null

This commit is contained in:
Taehee Choi 2022-03-25 11:51:33 -07:00
parent c654985e45
commit 364c920f77
3 changed files with 60 additions and 42 deletions

View File

@ -2,10 +2,24 @@ 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,17 +43,15 @@ 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) =>
@ -47,8 +59,7 @@ const CalendarPage: React.FC = () => {
);
const meetings: CalendarEvent[] = useAppSelector((state) =>
selectMeetings(state)
).map(m =>
({
).map((m) => ({
meetingId: m.meetingId,
liveParticipantIds: m.liveParticipantIds,
registrantIds: m.registrantIds,
@ -60,9 +71,8 @@ const CalendarPage: React.FC = () => {
// 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
})
);
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,10 +121,18 @@ const CalendarPage: React.FC = () => {
label="User"
onChange={handleUserChange}
>
<MenuItem value={CalendarTaskView.ViewAll}>View all team member meetings</MenuItem>
<MenuItem value={currentUserUuid}>{currentUser.name + " (Me)"}</MenuItem>
{team.map(user => (
<MenuItem key={user.uuid} value={user.uuid}>{user.name}</MenuItem>
<MenuItem value={CalendarTaskView.ViewAll}>
View all team member meetings
</MenuItem>
{currentUser ? (
<MenuItem value={currentUserUuid}>
{currentUser.name + " (Me)"}
</MenuItem>
) : null}
{team.map((user) => (
<MenuItem key={user.uuid} value={user.uuid}>
{user.name}
</MenuItem>
))}
</Select>
</FormControl>
@ -132,7 +150,6 @@ const CalendarPage: React.FC = () => {
style={{ height: "83%" }}
/>
</>
);
};

View File

@ -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,7 +61,7 @@ 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;

View File

@ -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 {