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

meeting details page implemented and api bodies included

Browse Source
This commit is contained in:
Taehee Choi 2022-03-06 16:43:45 -08:00
parent 6865a55672
commit 82f0906124
14 changed files with 219 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.tsx
View File

@ -12,9 +12,14 @@ 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";
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[]>([
@ -43,14 +48,18 @@ const App: React.FC = () => {
return ( return (
<ThemeProvider theme={Theme}> <ThemeProvider theme={Theme}>
<Sidebar users={sidebarUsers} />
<Router> <Router>
<Sidebar users={sidebarUsers} />
<Navbar /> <Navbar />
<Routes> <Routes>
<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 />} />
</Routes> </Routes>
<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="secondary"
onClick={() => props.setMeetingInfoOpen(true)}
>
{meeting.name}
</Button>
<Typography sx={{ pt: 1.5 }}>{meeting.duration}</Typography>
</Box> </Box>
))} ))}
</List> </List>

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

@ -3,7 +3,7 @@ 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";
interface Props { interface Props {
contactInfo: ContactInfo; contactInfo: ContactInfo;

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;

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;