UBC/Alley-HSBC-Frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'main' into cochrane

Browse Source
This commit is contained in:
Jincheng Lu 2022-03-11 01:29:56 -08:00 committed by GitHub
commit e0013d15f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 398 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.tsx
View File

@ -14,9 +14,15 @@ import Theme from "./Theme";
import "./style/App.css"; import "./style/App.css";
import Sidebar from "./components/sidebar/Sidebar"; import Sidebar from "./components/sidebar/Sidebar";
import { MeetingStatus, SidebarUserObj } from "./components/sidebar/SidebarUser"; import {
MeetingStatus,
SidebarUserObj,
} from "./components/sidebar/SidebarUser";
import MeetingDetails from "./components/meeting-details/MeetingDetails";
import { Box } from "@mui/material";
const App: React.FC = () => { const App: React.FC = () => {
const [meetingInfoOpen, setMeetingInfoOpen] = useState(false);
/* Temporary data */ /* Temporary data */
const [sidebarUsers] = useState<SidebarUserObj[]>([ const [sidebarUsers] = useState<SidebarUserObj[]>([
@ -45,17 +51,27 @@ const App: React.FC = () => {
return ( return (
<ThemeProvider theme={Theme}> <ThemeProvider theme={Theme}>
<Sidebar users={sidebarUsers} />
<Router> <Router>
<Navbar /> <Navbar />
<Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
<Box sx={{ flexGrow: 1 }}>
<Routes> <Routes>
<Route path="/login" element={<Login />} /> <Route path="/login" element={<Login />} />
<Route element={<ProtectedRoute />}> <Route element={<ProtectedRoute />}>
<Route path="/" element={<Home />} /> <Route path="/" element={<Home />} />
<Route path="/contacts" element={<Contacts />} /> <Route
path="/contacts"
element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
/>
<Route path="/calendar" element={<Calendar />} /> <Route path="/calendar" element={<Calendar />} />
</Route> </Route>
</Routes> </Routes>
</Box>
<Box>
<Sidebar users={sidebarUsers} />
</Box>
</Box>
<MeetingDetails open={meetingInfoOpen} setOpen={setMeetingInfoOpen} />
</Router> </Router>
</ThemeProvider> </ThemeProvider>
); );

12
src/api-bodies/DetailedMeeting.tsx Normal file
View File

@ -0,0 +1,12 @@
interface DetailedMeeting {
meetingId: string; // primary key
liveParticipantIds: string[];
registrantIds: string[];
start: string;
duration: number;
timezone: string;
joinUrl: string;
topic: string;
}
export default DetailedMeeting;

10
src/api-bodies/NewMeeting.tsx Normal file
View File

@ -0,0 +1,10 @@
interface NewMeeting {
uuid: string;
startTime: string;
duration: number;
timezone: string;
topic: string;
registrantsIds: string[];
}
export default NewMeeting;

9
src/api-bodies/UserFull.tsx Normal file
View File

@ -0,0 +1,9 @@
import UserLite from "./UserLite";
interface UserFull {
userInfo: UserLite;
manager: UserLite;
directReports: UserLite[];
}
export default UserFull;

8
src/api-bodies/UserLite.tsx Normal file
View File

@ -0,0 +1,8 @@
interface UserLite {
uuid: string;
emailAddress: string;
name: string;
role: string;
}
export default UserLite;

15
src/components/contacts/Contacts.tsx
View File

@ -1,11 +1,15 @@
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import React from "react"; import React from "react";
import Body from "./Body"; import Body from "./contacts-components/Body";
import ContactInfo from "./ContactInfo"; import ContactInfo from "./ContactInfo";
import Sidebar from "./Sidebar"; import Sidebar from "./contacts-components/Sidebar";
const Contacts: React.FC = () => { interface Props {
setMeetingInfoOpen: (open: boolean) => void;
}
const Contacts: React.FC<Props> = (props) => {
const [contactSelected, setContactSelected] = const [contactSelected, setContactSelected] =
React.useState<ContactInfo | null>(null); React.useState<ContactInfo | null>(null);
@ -13,7 +17,10 @@ const Contacts: React.FC = () => {
<Box sx={{ display: "flex", height: "100%" }}> <Box sx={{ display: "flex", height: "100%" }}>
<Sidebar setContactSelected={setContactSelected} /> <Sidebar setContactSelected={setContactSelected} />
{contactSelected !== null ? ( {contactSelected !== null ? (
<Body contactSelected={contactSelected} /> <Body
contactSelected={contactSelected}
setMeetingInfoOpen={props.setMeetingInfoOpen}
/>
) : null} ) : null}
</Box> </Box>
); );

12
src/components/contacts/Body.tsx → src/components/contacts/contacts-components/Body.tsx
View File

@ -1,11 +1,12 @@
import { Box, Toolbar } from "@mui/material"; import { Box, Toolbar } from "@mui/material";
import React from "react"; import React from "react";
import UpperBody from "./UpperBody"; import UpperBody from "./body-components/UpperBody";
import LowerBody from "./LowerBody"; import LowerBody from "./body-components/LowerBody";
import ContactInfo from "./ContactInfo"; import ContactInfo from "../ContactInfo";
interface Props { interface Props {
contactSelected: ContactInfo; contactSelected: ContactInfo;
setMeetingInfoOpen: (open: boolean) => void;
} }
const Body: React.FC<Props> = (props) => { const Body: React.FC<Props> = (props) => {
@ -20,7 +21,10 @@ const Body: React.FC<Props> = (props) => {
> >
<Toolbar /> <Toolbar />
<UpperBody contactInfo={props.contactSelected} /> <UpperBody contactInfo={props.contactSelected} />
<LowerBody contactInfo={props.contactSelected} /> <LowerBody
contactInfo={props.contactSelected}
setMeetingInfoOpen={props.setMeetingInfoOpen}
/>
</Box> </Box>
); );
}; };

6
src/components/contacts/Sidebar.tsx → src/components/contacts/contacts-components/Sidebar.tsx
View File

@ -9,9 +9,9 @@ import {
} from "@mui/material"; } from "@mui/material";
import React from "react"; import React from "react";
import { ExpandLess, ExpandMore } from "@mui/icons-material"; import { ExpandLess, ExpandMore } from "@mui/icons-material";
import ContactInfo from "./ContactInfo"; import ContactInfo from "../ContactInfo";
import Status from "./Status"; import Status from "../Status";
import ContactItem from "./ContactItem"; import ContactItem from "./sidebar-components/ContactItem";
const contacts: ContactInfo[] = [ const contacts: ContactInfo[] = [
{ name: "Taehee ...", status: Status.Online }, { name: "Taehee ...", status: Status.Online },

19
src/components/contacts/LowerBody.tsx → src/components/contacts/contacts-components/body-components/LowerBody.tsx
View File

@ -1,6 +1,6 @@
import { Box, List, Typography } from "@mui/material"; import { Box, Button, List, Typography } from "@mui/material";
import React from "react"; import React from "react";
import ContactInfo from "./ContactInfo"; import ContactInfo from "../../ContactInfo";
const meetings: { name: string; duration: string }[] = [ const meetings: { name: string; duration: string }[] = [
{ name: "Kanban Meeting", duration: "10:45 am - 11:45 am" }, { name: "Kanban Meeting", duration: "10:45 am - 11:45 am" },
@ -12,9 +12,10 @@ const meetings: { name: string; duration: string }[] = [
interface Props { interface Props {
contactInfo: ContactInfo; contactInfo: ContactInfo;
setMeetingInfoOpen: (open: boolean) => void;
} }
const LowerBody: React.FC<Props> = () => { const LowerBody: React.FC<Props> = (props) => {
return ( return (
<Box <Box
sx={{ sx={{
@ -23,7 +24,7 @@ const LowerBody: React.FC<Props> = () => {
border: 1, border: 1,
borderRadius: 2, borderRadius: 2,
width: "70%", width: "70%",
height: "70%", height: "60%",
alignSelf: "center", alignSelf: "center",
}} }}
> >
@ -43,8 +44,14 @@ const LowerBody: React.FC<Props> = () => {
}} }}
key={i} key={i}
> >
<Typography sx={{ pt: "12px" }}>{meeting.name}</Typography> <Button
<Typography sx={{ pt: "12px" }}>{meeting.duration}</Typography> variant="text"
color="info"
onClick={() => props.setMeetingInfoOpen(true)}
>
{meeting.name}
</Button>
<Typography sx={{ pt: 1.5 }}>{meeting.duration}</Typography>
</Box> </Box>
))} ))}
</List> </List>

34
src/components/contacts/UpperBody.tsx → src/components/contacts/contacts-components/body-components/UpperBody.tsx
View File

@ -3,7 +3,8 @@ import React from "react";
import PhoneIcon from "@mui/icons-material/Phone"; import PhoneIcon from "@mui/icons-material/Phone";
import VideocamIcon from "@mui/icons-material/Videocam"; import VideocamIcon from "@mui/icons-material/Videocam";
import GroupsIcon from "@mui/icons-material/Groups"; import GroupsIcon from "@mui/icons-material/Groups";
import ContactInfo from "./ContactInfo"; import ContactInfo from "../../ContactInfo";
import AddIcon from "@mui/icons-material/Add";
interface Props { interface Props {
contactInfo: ContactInfo; contactInfo: ContactInfo;
@ -26,40 +27,45 @@ const UpperBody: React.FC<Props> = (props) => {
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
justifyContent: "space-evenly", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
mx: 4,
}} }}
> >
<Typography variant="h3">{props.contactInfo.name}</Typography> <Typography variant="h3">{props.contactInfo.name}</Typography>
<Button variant="outlined" color="success" startIcon={<AddIcon />}>
favorites
</Button>
</Box> </Box>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "space-between",
my: 2, my: 2,
mx: 4,
}} }}
> >
<Box <Box>
sx={{ <IconButton
ml: "5%", sx={{ border: 1, mr: 1, backgroundColor: "secondary" }}
}} size="large"
color="secondary"
> >
<IconButton sx={{ border: 1, mr: 1 }} size="large">
<PhoneIcon fontSize="large" /> <PhoneIcon fontSize="large" />
</IconButton> </IconButton>
<IconButton sx={{ border: 1, mr: 1 }} size="large"> <IconButton sx={{ border: 1, mr: 1 }} size="large" color="secondary">
<VideocamIcon fontSize="large" /> <VideocamIcon fontSize="large" />
</IconButton> </IconButton>
<IconButton sx={{ border: 1, mr: 1 }} size="large"> <IconButton sx={{ border: 1, mr: 1 }} size="large" color="secondary">
<GroupsIcon fontSize="large" /> <GroupsIcon fontSize="large" />
</IconButton> </IconButton>
<Button variant="outlined" color="success">
Add to favorites
</Button>
</Box> </Box>
<Box sx={{ display: "flex", flexDirection: "column", ml: "10%" }}> <Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography>{props.contactInfo.status}</Typography> <Typography sx={{ textAlign: "right" }}>
{props.contactInfo.status}
</Typography>
<Typography>MeetingName-1372</Typography> <Typography>MeetingName-1372</Typography>
</Box> </Box>
</Box> </Box>

4
src/components/contacts/ContactItem.tsx → src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx
View File

@ -2,8 +2,8 @@ import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import React from "react"; import React from "react";
import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
import CircleIcon from "@mui/icons-material/Circle"; import CircleIcon from "@mui/icons-material/Circle";
import ContactInfo from "./ContactInfo"; import ContactInfo from "../../ContactInfo";
import { returnStatusColor } from "./Utils"; import { returnStatusColor } from "../../Utils";
interface Props { interface Props {
contactInfo: ContactInfo; contactInfo: ContactInfo;

11
src/components/home/Meeting.tsx
View File

@ -1,6 +1,11 @@
function Meeting(props: any) { interface Props {
return ( meetingName: string;
meetingTime: string;
meetingMembers: string
}
function Meeting(props: Props) {
return (
<div className="row meeting"> <div className="row meeting">
<div className="col-12"> <div className="col-12">
<div className="row"> <div className="row">
@ -15,6 +20,6 @@ function Meeting(props: any) {
</div> </div>
</div> </div>
); );
}; }
export default Meeting; export default Meeting;

8
src/components/home/ShortCuts.tsx
View File

@ -1,7 +1,7 @@
import PeopleIcon from '@mui/icons-material/People'; import PeopleIcon from "@mui/icons-material/People";
import AddIcon from '@mui/icons-material/Add'; import AddIcon from "@mui/icons-material/Add";
import PhoneEnabledIcon from '@mui/icons-material/PhoneEnabled'; import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
import CircleIcon from '@mui/icons-material/Circle'; import CircleIcon from "@mui/icons-material/Circle";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";

8
src/components/login/Login.tsx
View File

@ -1,4 +1,4 @@
import { useRef, useState, useEffect, useContext } from 'react'; import { useRef, useState, useEffect, useContext } from "react";
import { useLocation, Link, useNavigate } from "react-router-dom"; import { useLocation, Link, useNavigate } from "react-router-dom";
import { Stack } from "@mui/material"; import { Stack } from "@mui/material";
import Container from "@mui/material/Container"; import Container from "@mui/material/Container";
@ -6,7 +6,7 @@ import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import hsbcLogo from "../../assets/logo-png.png"; import hsbcLogo from "../../assets/logo-png.png";
import zoomLogo from "../../assets/zoom.png"; import zoomLogo from "../../assets/zoom.png";
import LoginIcon from '@mui/icons-material/Login'; import LoginIcon from "@mui/icons-material/Login";
import useAuth from "../../hooks/useAuth"; import useAuth from "../../hooks/useAuth";
const Login: React.FC = () => { const Login: React.FC = () => {
@ -17,8 +17,8 @@ const Login: React.FC = () => {
const location: any = useLocation(); const location: any = useLocation();
const from = location.state?.from?.pathname || "/"; const from = location.state?.from?.pathname || "/";
const [username, setUsername] = useState(''); const [username, setUsername] = useState("");
const [password, setPassword] = useState(''); const [password, setPassword] = useState("");
// const [errMsg, setErrMsg] = useState(''); // const [errMsg, setErrMsg] = useState('');
// const userRef = useRef(); // const userRef = useRef();

20
src/components/meeting-details/MeetingDetails.tsx Normal file
View File

@ -0,0 +1,20 @@
import { Dialog } from "@mui/material";
import React from "react";
import Body from "./meeting-details-components/Body";
import Header from "./meeting-details-components/Header";
interface Props {
open: boolean;
setOpen: (open: boolean) => void;
}
const MeetingDetails: React.FC<Props> = (props) => {
return (
<Dialog fullScreen open={props.open} onClose={() => props.setOpen(false)}>
<Header setOpen={props.setOpen} />
<Body />
</Dialog>
);
};
export default MeetingDetails;

74
src/components/meeting-details/meeting-details-components/Body.tsx Normal file
View File

@ -0,0 +1,74 @@
import {
Box,
List,
ListItem,
ListItemIcon,
ListItemText,
Typography,
} from "@mui/material";
import React from "react";
import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
const Body: React.FC = () => {
return (
<Box
sx={{
display: "flex",
flexDirection: "row",
width: "80%",
alignSelf: "center",
mt: 2,
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "70%",
height: "100%",
}}
>
<Typography>Feb 10, 2022 10:45 am - 11:00 am</Typography>
<Typography>Status: Live</Typography>
<Typography>
Topic: Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industrys standard
dummy text ever since the 1500s. Topic: Lorem Ipsum is simply dummy
text of the printing and typesetting industry. Lorem Ipsum has been
the industrys standard dummy text ever since the 1500s.
</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
flexGrow: 1,
borderLeft: 1,
ml: 4,
}}
>
<List>
<ListItem sx={{ borderBottom: 1 }}>
<ListItemText primary="Invited" />
</ListItem>
<ListItem>
<ListItemIcon>
<PersonOutlineIcon />
</ListItemIcon>
<ListItemText primary="Taehee Choi" />
</ListItem>
</List>
<List>
<ListItem>
<ListItemIcon>
<PersonOutlineIcon />
</ListItemIcon>
<ListItemText primary="Taehee Choi" />
</ListItem>
</List>
</Box>
</Box>
);
};
export default Body;

36
src/components/meeting-details/meeting-details-components/Header.tsx Normal file
View File

@ -0,0 +1,36 @@
import { AppBar, Button, IconButton, Toolbar, Typography } from "@mui/material";
import React from "react";
import CloseIcon from "@mui/icons-material/Close";
interface Props {
setOpen: (open: boolean) => void;
}
const Header: React.FC<Props> = (props) => {
return (
<AppBar sx={{ position: "relative" }}>
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
Kanban Meeting
</Typography>
<Button variant="contained" color="secondary">
Join
</Button>
<Button variant="contained" color="secondary" sx={{ ml: 1 }}>
Recording
</Button>
<IconButton
edge="start"
color="inherit"
aria-label="close"
onClick={() => props.setOpen(false)}
sx={{ ml: 1 }}
>
<CloseIcon />
</IconButton>
</Toolbar>
</AppBar>
);
};
export default Header;

16
src/components/sidebar/Sidebar.tsx
View File

@ -1,13 +1,20 @@
import { Divider, Drawer, List, ListItem, ListSubheader } from "@mui/material"; import {
Divider,
Drawer,
List,
ListItem,
ListSubheader,
Toolbar,
} from "@mui/material";
import GroupSelect from "./GroupSelect"; import GroupSelect from "./GroupSelect";
import SidebarUser, { SidebarUserObj } from "./SidebarUser"; import SidebarUser, { SidebarUserObj } from "./SidebarUser";
// TODO: toolbar on top of sidebar since it goes under the navbar // TODO: toolbar on top of sidebar since it goes under the navbar
const drawerWidth = 240; const drawerWidth = 200;
interface Props { interface Props {
users: SidebarUserObj[], users: SidebarUserObj[];
} }
const Sidebar: React.FC<Props> = ({ users }: Props) => { const Sidebar: React.FC<Props> = ({ users }: Props) => {
@ -15,15 +22,14 @@ const Sidebar: React.FC<Props> = ({ users }: Props) => {
<Drawer <Drawer
sx={{ sx={{
width: drawerWidth, width: drawerWidth,
flexShrink: 0,
"& .MuiDrawer-paper": { "& .MuiDrawer-paper": {
width: drawerWidth, width: drawerWidth,
boxSizing: "border-box",
}, },
}} }}
variant="permanent" variant="permanent"
anchor="right" anchor="right"
> >
<Toolbar />
<List disablePadding sx={{ height: "80%", overflow: "auto" }}> <List disablePadding sx={{ height: "80%", overflow: "auto" }}>
<ListSubheader disableGutters> <ListSubheader disableGutters>
<GroupSelect /> <GroupSelect />