From 19906db3dae1754a53f590c2d68305e616fb4dea Mon Sep 17 00:00:00 2001 From: Taehee Choi Date: Sun, 20 Mar 2022 23:56:18 -0700 Subject: [PATCH] sidebar changes --- src/App.tsx | 3 +- src/ProtectedRoute.tsx | 34 +-------- src/components/contacts/Contacts.tsx | 14 ++-- src/components/contacts/Status.tsx | 8 -- src/components/contacts/Utils.tsx | 18 +---- .../contacts/contacts-components/Sidebar.tsx | 22 ++---- .../body-components/UpperBody.tsx | 12 +-- .../sidebar-components/ContactItem.tsx | 16 ++-- src/components/home/CallFavouritesDialog.tsx | 57 +++++++++----- src/components/home/Home.tsx | 18 +++-- src/components/home/ShortCuts.tsx | 29 ++++--- src/components/sidebar/GroupSelect.tsx | 39 ++++++---- src/components/sidebar/SettingsButton.tsx | 72 +++++++++++++++--- src/components/sidebar/Sidebar.tsx | 35 ++++++--- src/components/sidebar/SidebarUser.tsx | 76 +++++-------------- src/redux/slices/meetingDetailsOpenSlice.tsx | 1 + .../slices/meetingsAndUserStatusSlice.tsx | 19 +++++ src/redux/slices/usersSlice.tsx | 17 +++-- src/utils.tsx | 17 +++++ 19 files changed, 283 insertions(+), 224 deletions(-) delete mode 100644 src/components/contacts/Status.tsx create mode 100644 src/utils.tsx diff --git a/src/App.tsx b/src/App.tsx index 05975c4..bb1333a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,7 +22,8 @@ const App: React.FC = () => { } /> }> } /> - } /> + } /> + } /> } /> diff --git a/src/ProtectedRoute.tsx b/src/ProtectedRoute.tsx index 72167dd..55e2d26 100644 --- a/src/ProtectedRoute.tsx +++ b/src/ProtectedRoute.tsx @@ -1,42 +1,14 @@ -import {useLocation, Outlet, Navigate} from "react-router-dom"; +import { useLocation, Outlet, Navigate } from "react-router-dom"; import useAuth from "./hooks/useAuth"; import Navbar from "./components/navbar/Navbar"; import Sidebar from "./components/sidebar/Sidebar"; -import React, { useState } from "react"; -import { - MeetingStatus, - SidebarUserObj, -} from "./components/sidebar/SidebarUser"; import { Box } from "@mui/material"; const ProtectedRoute = () => { - const auth= useAuth(); + const auth = useAuth(); const location = useLocation(); /* Temporary data */ - const [sidebarUsers] = useState([ - { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.ONLINE }, - { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING }, - { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.OFFLINE }, - { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.AWAY }, - { id: 4, name: "Bob B.", meetingStatus: MeetingStatus.IN_MEETING }, - { id: 5, name: "Bob C.", meetingStatus: MeetingStatus.OFFLINE }, - { id: 6, name: "Bob D.", meetingStatus: MeetingStatus.ONLINE }, - { id: 7, name: "Bob E.", meetingStatus: MeetingStatus.AWAY }, - { id: 8, name: "Bob F.", meetingStatus: MeetingStatus.OFFLINE }, - { id: 9, name: "Bob G.", meetingStatus: MeetingStatus.ONLINE }, - { id: 10, name: "Bob H.", meetingStatus: MeetingStatus.AWAY }, - { id: 11, name: "Bob I.", meetingStatus: MeetingStatus.OFFLINE }, - { id: 12, name: "Bob J.", meetingStatus: MeetingStatus.AWAY }, - { id: 13, name: "Bob K.", meetingStatus: MeetingStatus.IN_MEETING }, - { id: 14, name: "Bob L.", meetingStatus: MeetingStatus.IN_MEETING }, - { id: 15, name: "Bob M.", meetingStatus: MeetingStatus.OFFLINE }, - { id: 16, name: "Bob N.", meetingStatus: MeetingStatus.OFFLINE }, - { id: 17, name: "Bob O.", meetingStatus: MeetingStatus.AWAY }, - { id: 18, name: "Bob P.", meetingStatus: MeetingStatus.AWAY }, - { id: 19, name: "Bob Q.", meetingStatus: MeetingStatus.ONLINE }, - { id: 20, name: "Bob R.", meetingStatus: MeetingStatus.ONLINE }, - ]); return auth?.isLoggedIn ? ( <> @@ -45,7 +17,7 @@ const ProtectedRoute = () => { - + diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx index e533db4..14c7844 100644 --- a/src/components/contacts/Contacts.tsx +++ b/src/components/contacts/Contacts.tsx @@ -4,18 +4,20 @@ import Body from "./contacts-components/Body"; import Sidebar from "./contacts-components/Sidebar"; import UserLite from "../../api-bodies/UserLite"; +import { useParams } from "react-router-dom"; +import { selectUser } from "../../redux/slices/usersSlice"; +import { useAppSelector } from "../../redux/hooks"; const Contacts: React.FC = () => { - const [contactSelected, setContactSelected] = React.useState( - null + const { uuid } = useParams(); + const uriContact: UserLite | undefined = useAppSelector((state) => + selectUser(state, uuid) ); return ( - - {contactSelected !== null ? ( - - ) : null} + + {uriContact ? : null} ); }; diff --git a/src/components/contacts/Status.tsx b/src/components/contacts/Status.tsx deleted file mode 100644 index be69dbd..0000000 --- a/src/components/contacts/Status.tsx +++ /dev/null @@ -1,8 +0,0 @@ -enum Status { - Online = "Online", - Offline = "Offline", - Away = "Away", - InMeeting = "In Meeting", -} - -export default Status; diff --git a/src/components/contacts/Utils.tsx b/src/components/contacts/Utils.tsx index 203f320..797a2f5 100644 --- a/src/components/contacts/Utils.tsx +++ b/src/components/contacts/Utils.tsx @@ -1,20 +1,4 @@ import DetailedMeeting from "../../api-bodies/DetailedMeeting"; -import Status from "./Status"; - -const returnStatusColor = ( - status: Status -): "success" | "disabled" | "warning" | "error" => { - switch (status) { - case Status.Online: - return "success"; - case Status.Offline: - return "disabled"; - case Status.Away: - return "warning"; - case Status.InMeeting: - return "error"; - } -}; const getUpcomingMeetingTime = (meeting: DetailedMeeting) => { const startDate = new Date(meeting.start); @@ -34,4 +18,4 @@ const getUpcomingMeetingTime = (meeting: DetailedMeeting) => { return `${startTime} - ${endTime}`; }; -export { returnStatusColor, getUpcomingMeetingTime }; +export { getUpcomingMeetingTime }; diff --git a/src/components/contacts/contacts-components/Sidebar.tsx b/src/components/contacts/contacts-components/Sidebar.tsx index 3358e18..2795687 100644 --- a/src/components/contacts/contacts-components/Sidebar.tsx +++ b/src/components/contacts/contacts-components/Sidebar.tsx @@ -13,15 +13,10 @@ import ContactItem from "./sidebar-components/ContactItem"; import { useAppSelector } from "../../../redux/hooks"; import { selectUsers, selectTeam } from "../../../redux/slices/usersSlice"; import { selectFavorites } from "../../../redux/slices/favoritesSlice"; -import UserLite from "../../../api-bodies/UserLite"; - -interface Props { - setContactSelected: (contactInfo: UserLite) => void; -} const sidebarWidth = 240; -const Sidebar: React.FC = (props) => { +const Sidebar: React.FC = () => { const [favoritesOpen, setFavoritesOpen] = React.useState(true); const [teamOpen, setTeamOpen] = React.useState(false); @@ -29,7 +24,8 @@ const Sidebar: React.FC = (props) => { const favorites = useAppSelector((state) => selectUsers(state, favoritesUuids) ); - const team = useAppSelector(selectTeam); + const teamUuids = useAppSelector(selectTeam); + const team = useAppSelector((state) => selectUsers(state, teamUuids)); return ( = (props) => { {favorites.map((favorite, i) => ( - + ))} @@ -74,11 +66,7 @@ const Sidebar: React.FC = (props) => { {team.map((member, i) => ( - + ))} diff --git a/src/components/contacts/contacts-components/body-components/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx index d34ca7f..64121a5 100644 --- a/src/components/contacts/contacts-components/body-components/UpperBody.tsx +++ b/src/components/contacts/contacts-components/body-components/UpperBody.tsx @@ -4,7 +4,6 @@ import PhoneIcon from "@mui/icons-material/Phone"; import VideocamIcon from "@mui/icons-material/Videocam"; import GroupsIcon from "@mui/icons-material/Groups"; import AddIcon from "@mui/icons-material/Add"; -import Status from "../../Status"; import UserLite from "../../../../api-bodies/UserLite"; import UserStatus from "../../../../api-bodies/UserStatus"; import { useAppSelector, useAppDispatch } from "../../../../redux/hooks"; @@ -18,6 +17,7 @@ import { removeFavorite, } from "../../../../redux/slices/favoritesSlice"; import RemoveIcon from "@mui/icons-material/Remove"; +import { MeetingStatus } from "../../../../utils"; interface Props { contactInfo: UserLite; @@ -25,15 +25,17 @@ interface Props { const UpperBody: React.FC = (props) => { const dispatch = useAppDispatch(); - const userStatus: UserStatus | null = useAppSelector((state) => + const userStatus: UserStatus = useAppSelector((state) => selectUserStatus(state, props.contactInfo.uuid) ); const favoritesUuids = useAppSelector(selectFavorites); const detailedMeeting = useAppSelector((state) => selectMeeting(state, userStatus.meetingID) ); - const status: Status = - userStatus && userStatus.inMeeting ? Status.Online : Status.Offline; + const meetingStatus: MeetingStatus = + userStatus && userStatus.inMeeting + ? MeetingStatus.IN_MEETING + : MeetingStatus.NOT_IN_MEETING; return ( = (props) => { - {status} + {meetingStatus} {detailedMeeting ? ( {detailedMeeting.topic} ) : null} diff --git a/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx b/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx index 9204fd0..304d7e4 100644 --- a/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx +++ b/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx @@ -2,28 +2,30 @@ import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import React from "react"; import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; import CircleIcon from "@mui/icons-material/Circle"; -import { returnStatusColor } from "../../Utils"; import UserLite from "../../../../api-bodies/UserLite"; -import Status from "../../Status"; +import { MeetingStatus, getStatusColor } from "../../../../utils"; import { useAppSelector } from "../../../../redux/hooks"; import { selectUserStatus } from "../../../../redux/slices/meetingsAndUserStatusSlice"; import UserStatus from "../../../../api-bodies/UserStatus"; +import { useNavigate } from "react-router-dom"; interface Props { contactInfo: UserLite; - setContactSelected: (contactInfo: UserLite) => void; } const ContactItem: React.FC = (props) => { + const navigate = useNavigate(); const userStatus: UserStatus | null = useAppSelector((state) => selectUserStatus(state, props.contactInfo.uuid) ); - const status: Status = - userStatus && userStatus.inMeeting ? Status.Online : Status.Offline; + const status: MeetingStatus = + userStatus && userStatus.inMeeting + ? MeetingStatus.IN_MEETING + : MeetingStatus.NOT_IN_MEETING; return ( { - props.setContactSelected(props.contactInfo); + navigate(`/contacts/${props.contactInfo.uuid}`); }} > @@ -34,7 +36,7 @@ const ContactItem: React.FC = (props) => { secondary={status} sx={{ flexGrow: 1 }} /> - + ); }; diff --git a/src/components/home/CallFavouritesDialog.tsx b/src/components/home/CallFavouritesDialog.tsx index 61c97ee..75eeb23 100644 --- a/src/components/home/CallFavouritesDialog.tsx +++ b/src/components/home/CallFavouritesDialog.tsx @@ -1,44 +1,63 @@ -import { Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, FormGroup, Typography } from "@mui/material"; -import { SidebarUserObj } from "../sidebar/SidebarUser"; +import { + Button, + Checkbox, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + FormControlLabel, + FormGroup, + Typography, +} from "@mui/material"; +import { SidebarUserObj } from "./Home"; interface Props { - open: boolean; - selectedValue: SidebarUserObj; - onClose: (value: SidebarUserObj) => void; - users: SidebarUserObj[]; + open: boolean; + selectedValue: SidebarUserObj; + onClose: (value: SidebarUserObj) => void; + users: SidebarUserObj[]; } -const CallFavouritesDialog: React.FC = ({ open, selectedValue, onClose, users }: Props) => { +const CallFavouritesDialog: React.FC = ({ + open, + selectedValue, + onClose, + users, +}: Props) => { const handleClose = () => { onClose(selectedValue); }; - + return ( - + Select who to call: - } label="Select everyone" /> + } + label="Select everyone" + /> {users.map((user) => ( - } label={user.name} /> + } + label={user.name} + /> ))} - + ); }; -export default CallFavouritesDialog; \ No newline at end of file +export default CallFavouritesDialog; diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index 43829b6..7fa09d6 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -2,22 +2,26 @@ import MeetingsPanel from "./MeetingsPanel"; import ShortCuts from "./ShortCuts"; import Container from "@mui/material/Container"; import Grid from "@mui/material/Grid"; -import { MeetingStatus, SidebarUserObj } from "../sidebar/SidebarUser"; +import { MeetingStatus } from "../../utils"; import { useState } from "react"; -const Home: React.FC = () => { +export interface SidebarUserObj { + id: number; + name: string; + meetingStatus: MeetingStatus; +} +const Home: React.FC = () => { /* Temporary data - this is the same as what's in ProtectedRoute.tsx so it should not be duplicated like this in the future (Route components were being weird when I tried to pass it down from App.tsx) */ const [mockUsers] = useState([ - { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.ONLINE }, + { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.NOT_IN_MEETING }, { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING }, - { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.OFFLINE }, - { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.AWAY } + { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.IN_MEETING }, + { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.NOT_IN_MEETING }, ]); - return ( @@ -25,7 +29,7 @@ const Home: React.FC = () => { - + diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx index b631d4c..7404a87 100644 --- a/src/components/home/ShortCuts.tsx +++ b/src/components/home/ShortCuts.tsx @@ -5,7 +5,7 @@ import CircleIcon from "@mui/icons-material/Circle"; import Button from "@mui/material/Button"; import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; -import { SidebarUserObj } from "../sidebar/SidebarUser"; +import { SidebarUserObj } from "./Home"; import CallFavouritesDialog from "./CallFavouritesDialog"; import { useState } from "react"; @@ -27,19 +27,23 @@ const ShortCuts: React.FC = ({ users }: Props) => { }; return ( -
+
- New Meeting + + New Meeting + - Join + + Join + @@ -47,22 +51,27 @@ const ShortCuts: React.FC = ({ users }: Props) => { - - Call Favourites + users={users} + /> + + Call Favourites + - Recordings + + Recordings +
); }; - -export default ShortCuts; \ No newline at end of file + +export default ShortCuts; diff --git a/src/components/sidebar/GroupSelect.tsx b/src/components/sidebar/GroupSelect.tsx index 92f7d61..7b100e1 100644 --- a/src/components/sidebar/GroupSelect.tsx +++ b/src/components/sidebar/GroupSelect.tsx @@ -1,14 +1,25 @@ -import { FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, Typography } from "@mui/material"; -import { useState } from "react"; +import { + FormControl, + InputLabel, + MenuItem, + Select, + SelectChangeEvent, + Typography, +} from "@mui/material"; +import React from "react"; // TODO: change MenuItem values to something meaningful -const GroupSelect: React.FC = () => { +interface Props { + group: string; + setGroup: (group: string) => void; +} - const [group, setGroup] = useState(""); +const groups = ["Favorites", "Team"]; - const handleChange = (event: SelectChangeEvent) => { - setGroup(event.target.value); +const GroupSelect: React.FC = ({ group, setGroup }) => { + const handleChange = (e: SelectChangeEvent) => { + setGroup(e.target.value); }; return ( @@ -23,18 +34,14 @@ const GroupSelect: React.FC = () => { label="Group" onChange={handleChange} > - - Favourites - - - Contacts - - - Office - + {groups.map((group, i) => ( + + {group} + + ))} ); }; -export default GroupSelect; \ No newline at end of file +export default GroupSelect; diff --git a/src/components/sidebar/SettingsButton.tsx b/src/components/sidebar/SettingsButton.tsx index 2116d1d..8d970ac 100644 --- a/src/components/sidebar/SettingsButton.tsx +++ b/src/components/sidebar/SettingsButton.tsx @@ -1,12 +1,31 @@ import { Settings } from "@mui/icons-material"; import { IconButton, Menu, MenuItem } from "@mui/material"; import { useState } from "react"; +import UserLite from "../../api-bodies/UserLite"; +import UserStatus from "../../api-bodies/UserStatus"; +import { useAppDispatch, useAppSelector } from "../../redux/hooks"; +import { + selectFavorites, + addFavorite, + removeFavorite, +} from "../../redux/slices/favoritesSlice"; +import { open as openMeetingDetails } from "../../redux/slices/meetingDetailsOpenSlice"; +import { selectMeeting } from "../../redux/slices/meetingsAndUserStatusSlice"; +import { useNavigate } from "react-router-dom"; +interface Props { + user: UserLite; + status: UserStatus; +} - -const SettingsButton: React.FC = () => { - +const SettingsButton: React.FC = ({ user, status }: Props) => { + const navigate = useNavigate(); const [anchorEl, setAnchorEl] = useState(null); + const favoritesUuids = useAppSelector(selectFavorites); + const meeting = useAppSelector((state) => + selectMeeting(state, status.meetingID) + ); + const dispatch = useAppDispatch(); const open = Boolean(anchorEl); const handleClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); @@ -14,7 +33,7 @@ const SettingsButton: React.FC = () => { const handleClose = () => { setAnchorEl(null); }; - + return (
{ aria-controls={open ? "context-menu" : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} - onClick={handleClick}> + onClick={handleClick} + > { onClose={handleClose} MenuListProps={{ "aria-labelledby": "basic-button" }} > - Remove from Favourites - View current meeting - View upcoming meetings + {favoritesUuids.includes(user.uuid) ? ( + { + handleClose(); + dispatch(removeFavorite(user.uuid)); + }} + > + Remove from Favorites + + ) : ( + { + handleClose(); + dispatch(addFavorite(user.uuid)); + }} + > + Add to Favorites + + )} + {status.inMeeting ? ( + { + handleClose(); + dispatch(openMeetingDetails(meeting)); + }} + > + View current meeting + + ) : null} + { + handleClose(); + navigate(`../contacts/${user.uuid}`); + }} + > + View upcoming meetings + Create meeting
); }; -export default SettingsButton; \ No newline at end of file +export default SettingsButton; diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 8a544bb..ea49f48 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -6,18 +6,35 @@ import { ListSubheader, Toolbar, } from "@mui/material"; +import { useState } from "react"; +import { useAppSelector } from "../../redux/hooks"; +import { selectFavorites } from "../../redux/slices/favoritesSlice"; +import { selectUserStatuses } from "../../redux/slices/meetingsAndUserStatusSlice"; +import { selectTeam, selectUsers } from "../../redux/slices/usersSlice"; import GroupSelect from "./GroupSelect"; -import SidebarUser, { SidebarUserObj } from "./SidebarUser"; +import SidebarUser from "./SidebarUser"; // TODO: toolbar on top of sidebar since it goes under the navbar const drawerWidth = 200; -interface Props { - users: SidebarUserObj[]; -} +const Sidebar: React.FC = () => { + const [group, setGroup] = useState("Favorites"); + + const favoritesUuids = useAppSelector(selectFavorites); + const teamUuids = useAppSelector(selectTeam); + + const groupMembersUuids: string[] = + group === "Favorites" ? favoritesUuids : teamUuids; + const groupMembers = useAppSelector((state) => + selectUsers(state, groupMembersUuids) + ); + const groupMemberStatuses = useAppSelector((state) => + selectUserStatuses(state, groupMembersUuids) + ); + + console.log(group); -const Sidebar: React.FC = ({ users }: Props) => { return ( = ({ users }: Props) => { - + - {users.map((user) => ( - - + {groupMembers.map((user, i) => ( + + ))} diff --git a/src/components/sidebar/SidebarUser.tsx b/src/components/sidebar/SidebarUser.tsx index cfc14bc..e917235 100644 --- a/src/components/sidebar/SidebarUser.tsx +++ b/src/components/sidebar/SidebarUser.tsx @@ -1,70 +1,36 @@ import { Box, Typography } from "@mui/material"; +import UserLite from "../../api-bodies/UserLite"; +import UserStatus from "../../api-bodies/UserStatus"; import SettingsButton from "./SettingsButton"; - -export interface SidebarUserObj { - id: number, - name: string, - meetingStatus: MeetingStatus; -} - -export const enum MeetingStatus { - OFFLINE = 0, - ONLINE = 1, - AWAY = 2, - IN_MEETING = 3 -} - -const getMeetingStatusText = (ms: MeetingStatus): string => { - switch (ms) { - case MeetingStatus.OFFLINE: { - return "Offline"; - } - case MeetingStatus.ONLINE: { - return "Online"; - } - case MeetingStatus.AWAY: { - return "Away"; - } - case MeetingStatus.IN_MEETING: { - return "In meeting"; - } - } -}; - -const getStatusColor = (ms: MeetingStatus): string => { - switch (ms) { - case MeetingStatus.OFFLINE: { - return "#b8b8b8"; - } - case MeetingStatus.ONLINE: { - return "#70ff70"; - } - case MeetingStatus.AWAY: { - return "#ff7070"; - } - case MeetingStatus.IN_MEETING: { - return "#e8da46"; - } - } -}; +import { MeetingStatus, getStatusColor } from "../../utils"; interface Props { - user: SidebarUserObj; + user: UserLite; + status: UserStatus; } -const SidebarUser: React.FC = ({ user }: Props) => { +const SidebarUser: React.FC = ({ user, status }: Props) => { return ( - + {user.name} - {getMeetingStatusText(user.meetingStatus)} + + {status.inMeeting + ? MeetingStatus.IN_MEETING + : MeetingStatus.NOT_IN_MEETING} + - + ); }; -export default SidebarUser; \ No newline at end of file +export default SidebarUser; diff --git a/src/redux/slices/meetingDetailsOpenSlice.tsx b/src/redux/slices/meetingDetailsOpenSlice.tsx index 7b6e6ca..9ee00fc 100644 --- a/src/redux/slices/meetingDetailsOpenSlice.tsx +++ b/src/redux/slices/meetingDetailsOpenSlice.tsx @@ -19,6 +19,7 @@ export const meetingDetailsOpenSlice = createSlice({ open: (state, action) => { state.open = true; state.meeting = action.payload; + console.log(action.payload); }, close: (state) => { state.open = false; diff --git a/src/redux/slices/meetingsAndUserStatusSlice.tsx b/src/redux/slices/meetingsAndUserStatusSlice.tsx index c2aa309..1298b62 100644 --- a/src/redux/slices/meetingsAndUserStatusSlice.tsx +++ b/src/redux/slices/meetingsAndUserStatusSlice.tsx @@ -75,4 +75,23 @@ export const selectUserStatus = ( }; } }; +export const selectUserStatuses = ( + state: RootState, + uuids: string[] +): UserStatus[] => { + const userStatuses: UserStatus[] = []; + uuids.forEach((uuid) => { + const userStatus = state.meetingsAndUserStatuses.userStatuses[uuid]; + if (userStatus) { + userStatuses.push(userStatus); + } else { + userStatuses.push({ + uuid: uuid, + inMeeting: false, + meetingID: null, + }); + } + }); + return userStatuses; +}; export default meetingsAndUserStatusSlice.reducer; diff --git a/src/redux/slices/usersSlice.tsx b/src/redux/slices/usersSlice.tsx index f07db6e..a1b68ac 100644 --- a/src/redux/slices/usersSlice.tsx +++ b/src/redux/slices/usersSlice.tsx @@ -48,19 +48,22 @@ export const fetchUsers = createAsyncThunk( } ); +export const selectUser = ( + state: RootState, + uuid: string | undefined +): UserLite | undefined => { + return uuid ? state.users.users[uuid] : undefined; +}; export const selectUsers = (state: RootState, uuids: string[]): UserLite[] => { const users: UserLite[] = []; uuids.forEach((uuid) => users.push(state.users.users[uuid])); return users; }; export const selectTeam = (state: RootState) => { - const team: UserLite[] = []; - if (state.users.team.manager !== null) - team.push(state.users.users[state.users.team.manager]); - state.users.team.sameManager.forEach((u) => team.push(state.users.users[u])); - state.users.team.directReports.forEach((u) => - team.push(state.users.users[u]) - ); + const team: string[] = []; + if (state.users.team.manager !== null) 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 default usersSlice.reducer; diff --git a/src/utils.tsx b/src/utils.tsx new file mode 100644 index 0000000..452a892 --- /dev/null +++ b/src/utils.tsx @@ -0,0 +1,17 @@ +const enum MeetingStatus { + NOT_IN_MEETING = "Not in meeting", + IN_MEETING = "In meeting", +} + +const getStatusColor = (ms: MeetingStatus): string => { + switch (ms) { + case MeetingStatus.NOT_IN_MEETING: { + return "#70ff70"; + } + case MeetingStatus.IN_MEETING: { + return "#ff7070"; + } + } +}; + +export { MeetingStatus, getStatusColor };