From c4841eb12754fff8747e1fad448516ce2827120a Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Tue, 1 Mar 2022 10:36:07 -0800
Subject: [PATCH 1/3] add sidebar boilerplate

---
 src/App.tsx                            | 31 ++++++++++++-
 src/components/sidebar/GroupSelect.tsx |  8 ++++
 src/components/sidebar/Sidebar.tsx     | 21 +++++++--
 src/components/sidebar/SidebarUser.tsx | 64 ++++++++++++++++++++++++++
 4 files changed, 120 insertions(+), 4 deletions(-)
 create mode 100644 src/components/sidebar/GroupSelect.tsx
 create mode 100644 src/components/sidebar/SidebarUser.tsx

diff --git a/src/App.tsx b/src/App.tsx
index b0d9eb2..638d685 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import "./styles.css";
 
@@ -11,10 +11,39 @@ import { ThemeProvider } from "@emotion/react";
 import Theme from "./Theme";
 
 import "./style/App.css";
+import Sidebar from "./components/sidebar/Sidebar";
+import { MeetingStatus, SidebarUserObj } from "./components/sidebar/SidebarUser";
 
 const App: React.FC = () => {
+
+  /* Temporary data */
+  const [sidebarUsers] = useState<SidebarUserObj[]>([
+    { 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 (
     <ThemeProvider theme={Theme}>
+      <Sidebar users={sidebarUsers} />
       <Router>
         <Navbar />
         <Routes>
diff --git a/src/components/sidebar/GroupSelect.tsx b/src/components/sidebar/GroupSelect.tsx
new file mode 100644
index 0000000..a57d622
--- /dev/null
+++ b/src/components/sidebar/GroupSelect.tsx
@@ -0,0 +1,8 @@
+
+const GroupSelect: React.FC = () => {
+  return (
+    <div>GroupSelect</div>
+  );
+};
+
+export default GroupSelect;
\ No newline at end of file
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index f6a1642..c6c1565 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -1,5 +1,20 @@
-const Sidebar: React.FC = () => {
-  return <span>Sidebar</span>;
+import { Box } from "@mui/material";
+import SidebarUser, { SidebarUserObj } from "./SidebarUser";
+
+interface Props {
+  users: SidebarUserObj[],
+}
+
+const Sidebar: React.FC<Props> = ({ users }: Props) => {
+  return (
+    <Box>
+      {users.map((user) => (
+        <div key={user.id}>
+          <SidebarUser user={user} />
+        </div>
+      ))}
+    </Box>
+  );
 };
 
-export default Sidebar;
+export default Sidebar;
\ No newline at end of file
diff --git a/src/components/sidebar/SidebarUser.tsx b/src/components/sidebar/SidebarUser.tsx
new file mode 100644
index 0000000..b259ff3
--- /dev/null
+++ b/src/components/sidebar/SidebarUser.tsx
@@ -0,0 +1,64 @@
+import { Box } from "@mui/material";
+
+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 "#baba34";
+    }
+  }
+};
+
+interface Props {
+  user: SidebarUserObj;
+}
+
+const SidebarUser: React.FC<Props> = ({ user }: Props) => {
+  return (
+    <Box>
+      {user.name}
+      {getStatusColor(user.meetingStatus)}
+      {getMeetingStatusText(user.meetingStatus)}
+    </Box>
+  );
+};
+
+export default SidebarUser;
\ No newline at end of file

From 1d0a0bf210d7f58bf0ea3af5fe245402e1627085 Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Tue, 1 Mar 2022 11:56:49 -0800
Subject: [PATCH 2/3] complete most of the non-functional sidebar components

---
 src/components/sidebar/GroupSelect.tsx | 34 ++++++++++++++++++++++-
 src/components/sidebar/Sidebar.tsx     | 38 ++++++++++++++++++++------
 src/components/sidebar/SidebarUser.tsx | 20 ++++++++++----
 3 files changed, 77 insertions(+), 15 deletions(-)

diff --git a/src/components/sidebar/GroupSelect.tsx b/src/components/sidebar/GroupSelect.tsx
index a57d622..92f7d61 100644
--- a/src/components/sidebar/GroupSelect.tsx
+++ b/src/components/sidebar/GroupSelect.tsx
@@ -1,7 +1,39 @@
+import { FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, Typography } from "@mui/material";
+import { useState } from "react";
+
+// TODO: change MenuItem values to something meaningful
 
 const GroupSelect: React.FC = () => {
+
+  const [group, setGroup] = useState("");
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setGroup(event.target.value);
+  };
+
   return (
-    <div>GroupSelect</div>
+    <FormControl variant="filled" fullWidth>
+      <InputLabel id="group-select-label">
+        <Typography color="black">Group</Typography>
+      </InputLabel>
+      <Select
+        labelId="group-select-label"
+        id="group-select"
+        value={group}
+        label="Group"
+        onChange={handleChange}
+      >
+        <MenuItem value={0}>
+          <Typography color="black">Favourites</Typography>
+        </MenuItem>
+        <MenuItem value={1}>
+          <Typography color="black">Contacts</Typography>
+        </MenuItem>
+        <MenuItem value={2}>
+          <Typography color="black">Office</Typography>
+        </MenuItem>
+      </Select>
+    </FormControl>
   );
 };
 
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index c6c1565..c6ad669 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -1,19 +1,41 @@
-import { Box } from "@mui/material";
+import { Divider, Drawer, List, ListItem, ListSubheader } from "@mui/material";
+import GroupSelect from "./GroupSelect";
 import SidebarUser, { SidebarUserObj } from "./SidebarUser";
 
+// TODO: SidebarUser icon button context menu
+
+const drawerWidth = 240;
+
 interface Props {
   users: SidebarUserObj[],
 }
 
 const Sidebar: React.FC<Props> = ({ users }: Props) => {
   return (
-    <Box>
-      {users.map((user) => (
-        <div key={user.id}>
-          <SidebarUser user={user} />
-        </div>
-      ))}
-    </Box>
+    <Drawer
+      sx={{
+        width: drawerWidth,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width: drawerWidth,
+          boxSizing: "border-box",
+        },
+      }}
+      variant="permanent"
+      anchor="right"
+    >
+      <List disablePadding sx={{ height: "90%", overflow: "auto" }}>
+        <ListSubheader disableGutters>
+          <GroupSelect />
+        </ListSubheader>
+        {users.map((user) => (
+          <ListItem disablePadding key={user.id}>
+            <SidebarUser user={user} /> 
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+    </Drawer>
   );
 };
 
diff --git a/src/components/sidebar/SidebarUser.tsx b/src/components/sidebar/SidebarUser.tsx
index b259ff3..8b84767 100644
--- a/src/components/sidebar/SidebarUser.tsx
+++ b/src/components/sidebar/SidebarUser.tsx
@@ -1,4 +1,5 @@
-import { Box } from "@mui/material";
+import { Settings } from "@mui/icons-material";
+import { Box, IconButton, Typography } from "@mui/material";
 
 export interface SidebarUserObj {
   id: number,
@@ -42,7 +43,7 @@ const getStatusColor = (ms: MeetingStatus): string => {
       return "#ff7070";
     }
     case MeetingStatus.IN_MEETING: {
-      return "#baba34";
+      return "#e8da46";
     }
   }
 };
@@ -53,10 +54,17 @@ interface Props {
 
 const SidebarUser: React.FC<Props> = ({ user }: Props) => {
   return (
-    <Box>
-      {user.name}
-      {getStatusColor(user.meetingStatus)}
-      {getMeetingStatusText(user.meetingStatus)}
+    <Box sx={{ display: "flex", flexDirection: "row", p: 1 }}>
+      <Box 
+        bgcolor={getStatusColor(user.meetingStatus)}
+        sx={{ p: 1 }} />
+      <Box sx={{ display: "flex", flexDirection: "column", ml: 1 }}>
+        <Typography variant="h6">{user.name}</Typography>
+        <Typography variant="caption">{getMeetingStatusText(user.meetingStatus)}</Typography>
+      </Box>
+      <IconButton sx={{ position: "absolute", right: 0 }}>
+        <Settings />
+      </IconButton>
     </Box>
   );
 };

From c296241841e34b647d895ac25d8dec25c867055f Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Thu, 3 Mar 2022 18:23:17 -0800
Subject: [PATCH 3/3] add settings button context menu (nonfunctional parts)

---
 src/components/sidebar/SettingsButton.tsx | 44 +++++++++++++++++++++++
 src/components/sidebar/Sidebar.tsx        |  4 +--
 src/components/sidebar/SidebarUser.tsx    |  8 ++---
 3 files changed, 49 insertions(+), 7 deletions(-)
 create mode 100644 src/components/sidebar/SettingsButton.tsx

diff --git a/src/components/sidebar/SettingsButton.tsx b/src/components/sidebar/SettingsButton.tsx
new file mode 100644
index 0000000..2116d1d
--- /dev/null
+++ b/src/components/sidebar/SettingsButton.tsx
@@ -0,0 +1,44 @@
+import { Settings } from "@mui/icons-material";
+import { IconButton, Menu, MenuItem } from "@mui/material";
+import { useState } from "react";
+
+
+
+const SettingsButton: React.FC = () => {
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  
+  return (
+    <div>
+      <IconButton
+        sx={{ position: "absolute", right: 0 }}
+        aria-controls={open ? "context-menu" : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? "true" : undefined}
+        onClick={handleClick}>
+        <Settings />
+      </IconButton>
+      <Menu
+        id="context-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{ "aria-labelledby": "basic-button" }}
+      >
+        <MenuItem onClick={handleClose}>Remove from Favourites</MenuItem>
+        <MenuItem onClick={handleClose}>View current meeting</MenuItem>
+        <MenuItem onClick={handleClose}>View upcoming meetings</MenuItem>
+        <MenuItem onClick={handleClose}>Create meeting</MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+export default SettingsButton;
\ No newline at end of file
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index c6ad669..08cb47b 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -2,7 +2,7 @@ import { Divider, Drawer, List, ListItem, ListSubheader } from "@mui/material";
 import GroupSelect from "./GroupSelect";
 import SidebarUser, { SidebarUserObj } from "./SidebarUser";
 
-// TODO: SidebarUser icon button context menu
+// TODO: toolbar on top of sidebar since it goes under the navbar
 
 const drawerWidth = 240;
 
@@ -24,7 +24,7 @@ const Sidebar: React.FC<Props> = ({ users }: Props) => {
       variant="permanent"
       anchor="right"
     >
-      <List disablePadding sx={{ height: "90%", overflow: "auto" }}>
+      <List disablePadding sx={{ height: "80%", overflow: "auto" }}>
         <ListSubheader disableGutters>
           <GroupSelect />
         </ListSubheader>
diff --git a/src/components/sidebar/SidebarUser.tsx b/src/components/sidebar/SidebarUser.tsx
index 8b84767..cfc14bc 100644
--- a/src/components/sidebar/SidebarUser.tsx
+++ b/src/components/sidebar/SidebarUser.tsx
@@ -1,5 +1,5 @@
-import { Settings } from "@mui/icons-material";
-import { Box, IconButton, Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
+import SettingsButton from "./SettingsButton";
 
 export interface SidebarUserObj {
   id: number,
@@ -62,9 +62,7 @@ const SidebarUser: React.FC<Props> = ({ user }: Props) => {
         <Typography variant="h6">{user.name}</Typography>
         <Typography variant="caption">{getMeetingStatusText(user.meetingStatus)}</Typography>
       </Box>
-      <IconButton sx={{ position: "absolute", right: 0 }}>
-        <Settings />
-      </IconButton>
+      <SettingsButton />
     </Box>
   );
 };