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}
>
-
-
- {team.map(user => (
-
+
+ {currentUser ? (
+
+ ) : null}
+ {team.map((user) => (
+
))}
-
+
{
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 {