+
- 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}
>
-
-
-
+ {groups.map((group, i) => (
+
+ ))}
);
};
-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}
+ >
);
};
-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 };