currentUser now cannot be null

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,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 currentUserUuid: string = useAppSelector(selectMe)!;
+  const currentUser: UserLite | undefined = useAppSelector((state) =>
-  const currentUser: UserLite = useAppSelector((state) =>
+    selectUser(state, currentUserUuid)
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    selectUser(state, currentUserUuid)!
   );
   const teamUuids: string[] = useAppSelector(selectTeam);
   const team: UserLite[] = useAppSelector((state) =>
@@ -47,22 +59,20 @@ const CalendarPage: React.FC = () => {
   );
   const meetings: CalendarEvent[] = useAppSelector((state) =>
     selectMeetings(state)
-  ).map(m => 
+  ).map((m) => ({
-    ({
+    meetingId: m.meetingId,
-      meetingId: m.meetingId,
+    liveParticipantIds: m.liveParticipantIds,
-      liveParticipantIds: m.liveParticipantIds,
+    registrantIds: m.registrantIds,
-      registrantIds: m.registrantIds,
+    startIso: m.start,
-      startIso: m.start,
+    duration: m.duration,
-      duration: m.duration,
+    timezone: m.timezone,
-      timezone: m.timezone,
+    joinUrl: m.joinUrl,
-      joinUrl: m.joinUrl,
+    topic: m.topic,
-      topic: m.topic,
+    // fields needed by calendar
-      // fields needed by calendar
+    title: m.topic,
-      title: m.topic,
+    start: new Date(Date.parse(m.start)), // Turns the ISO String into a date object
-      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={CalendarTaskView.ViewAll}>
-          <MenuItem value={currentUserUuid}>{currentUser.name + " (Me)"}</MenuItem>
+            View all team member meetings
-          {team.map(user => (
+          </MenuItem>
-            <MenuItem key={user.uuid} value={user.uuid}>{user.name}</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%" }}
       />
     </>
-    
   );
 };
 

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;
+  user: string;
-  manager: string | null;
+  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;

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 {