From 82f09061248c2fafe871922e26abca51edf042a9 Mon Sep 17 00:00:00 2001
From: Taehee Choi <cth5545cth5545@gmail.com>
Date: Sun, 6 Mar 2022 16:43:45 -0800
Subject: [PATCH] meeting details page implemented and api bodies included

---
 src/App.tsx                                   | 15 +++-
 src/api-bodies/DetailedMeeting.tsx            | 12 +++
 src/api-bodies/NewMeeting.tsx                 | 10 +++
 src/api-bodies/UserFull.tsx                   |  9 +++
 src/api-bodies/UserLite.tsx                   |  8 ++
 src/components/contacts/Contacts.tsx          | 15 +++-
 .../{ => contacts-components}/Body.tsx        | 12 ++-
 .../{ => contacts-components}/Sidebar.tsx     |  6 +-
 .../body-components}/LowerBody.tsx            | 19 +++--
 .../body-components}/UpperBody.tsx            |  2 +-
 .../sidebar-components}/ContactItem.tsx       |  4 +-
 .../meeting-details/MeetingDetails.tsx        | 20 +++++
 .../meeting-details-components/Body.tsx       | 74 +++++++++++++++++++
 .../meeting-details-components/Header.tsx     | 36 +++++++++
 14 files changed, 219 insertions(+), 23 deletions(-)
 create mode 100644 src/api-bodies/DetailedMeeting.tsx
 create mode 100644 src/api-bodies/NewMeeting.tsx
 create mode 100644 src/api-bodies/UserFull.tsx
 create mode 100644 src/api-bodies/UserLite.tsx
 rename src/components/contacts/{ => contacts-components}/Body.tsx (57%)
 rename src/components/contacts/{ => contacts-components}/Sidebar.tsx (94%)
 rename src/components/contacts/{ => contacts-components/body-components}/LowerBody.tsx (71%)
 rename src/components/contacts/{ => contacts-components/body-components}/UpperBody.tsx (97%)
 rename src/components/contacts/{ => contacts-components/sidebar-components}/ContactItem.tsx (90%)
 create mode 100644 src/components/meeting-details/MeetingDetails.tsx
 create mode 100644 src/components/meeting-details/meeting-details-components/Body.tsx
 create mode 100644 src/components/meeting-details/meeting-details-components/Header.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 638d685..371756d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,9 +12,14 @@ import Theme from "./Theme";
 
 import "./style/App.css";
 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 [meetingInfoOpen, setMeetingInfoOpen] = useState(false);
 
   /* Temporary data */
   const [sidebarUsers] = useState<SidebarUserObj[]>([
@@ -43,14 +48,18 @@ const App: React.FC = () => {
 
   return (
     <ThemeProvider theme={Theme}>
-      <Sidebar users={sidebarUsers} />
       <Router>
+        <Sidebar users={sidebarUsers} />
         <Navbar />
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="/contacts" element={<Contacts />} />
+          <Route
+            path="/contacts"
+            element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
+          />
           <Route path="/calendar" element={<Calendar />} />
         </Routes>
+        <MeetingDetails open={meetingInfoOpen} setOpen={setMeetingInfoOpen} />
       </Router>
     </ThemeProvider>
   );
diff --git a/src/api-bodies/DetailedMeeting.tsx b/src/api-bodies/DetailedMeeting.tsx
new file mode 100644
index 0000000..eb64a19
--- /dev/null
+++ b/src/api-bodies/DetailedMeeting.tsx
@@ -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;
diff --git a/src/api-bodies/NewMeeting.tsx b/src/api-bodies/NewMeeting.tsx
new file mode 100644
index 0000000..a36bc0b
--- /dev/null
+++ b/src/api-bodies/NewMeeting.tsx
@@ -0,0 +1,10 @@
+interface NewMeeting {
+  uuid: string;
+  startTime: string;
+  duration: number;
+  timezone: string;
+  topic: string;
+  registrantsIds: string[];
+}
+
+export default NewMeeting;
diff --git a/src/api-bodies/UserFull.tsx b/src/api-bodies/UserFull.tsx
new file mode 100644
index 0000000..c67dbc7
--- /dev/null
+++ b/src/api-bodies/UserFull.tsx
@@ -0,0 +1,9 @@
+import UserLite from "./UserLite";
+
+interface UserFull {
+  userInfo: UserLite;
+  manager: UserLite;
+  directReports: UserLite[];
+}
+
+export default UserFull;
diff --git a/src/api-bodies/UserLite.tsx b/src/api-bodies/UserLite.tsx
new file mode 100644
index 0000000..6882238
--- /dev/null
+++ b/src/api-bodies/UserLite.tsx
@@ -0,0 +1,8 @@
+interface UserLite {
+  uuid: string;
+  emailAddress: string;
+  name: string;
+  role: string;
+}
+
+export default UserLite;
diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx
index 7fcc7e6..c95afe8 100644
--- a/src/components/contacts/Contacts.tsx
+++ b/src/components/contacts/Contacts.tsx
@@ -1,11 +1,15 @@
 import { Box } from "@mui/material";
 import React from "react";
-import Body from "./Body";
+import Body from "./contacts-components/Body";
 
 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] =
     React.useState<ContactInfo | null>(null);
 
@@ -13,7 +17,10 @@ const Contacts: React.FC = () => {
     <Box sx={{ display: "flex", height: "100%" }}>
       <Sidebar setContactSelected={setContactSelected} />
       {contactSelected !== null ? (
-        <Body contactSelected={contactSelected} />
+        <Body
+          contactSelected={contactSelected}
+          setMeetingInfoOpen={props.setMeetingInfoOpen}
+        />
       ) : null}
     </Box>
   );
diff --git a/src/components/contacts/Body.tsx b/src/components/contacts/contacts-components/Body.tsx
similarity index 57%
rename from src/components/contacts/Body.tsx
rename to src/components/contacts/contacts-components/Body.tsx
index f4f6a66..fd4de4a 100644
--- a/src/components/contacts/Body.tsx
+++ b/src/components/contacts/contacts-components/Body.tsx
@@ -1,11 +1,12 @@
 import { Box, Toolbar } from "@mui/material";
 import React from "react";
-import UpperBody from "./UpperBody";
-import LowerBody from "./LowerBody";
-import ContactInfo from "./ContactInfo";
+import UpperBody from "./body-components/UpperBody";
+import LowerBody from "./body-components/LowerBody";
+import ContactInfo from "../ContactInfo";
 
 interface Props {
   contactSelected: ContactInfo;
+  setMeetingInfoOpen: (open: boolean) => void;
 }
 
 const Body: React.FC<Props> = (props) => {
@@ -20,7 +21,10 @@ const Body: React.FC<Props> = (props) => {
     >
       <Toolbar />
       <UpperBody contactInfo={props.contactSelected} />
-      <LowerBody contactInfo={props.contactSelected} />
+      <LowerBody
+        contactInfo={props.contactSelected}
+        setMeetingInfoOpen={props.setMeetingInfoOpen}
+      />
     </Box>
   );
 };
diff --git a/src/components/contacts/Sidebar.tsx b/src/components/contacts/contacts-components/Sidebar.tsx
similarity index 94%
rename from src/components/contacts/Sidebar.tsx
rename to src/components/contacts/contacts-components/Sidebar.tsx
index 8253a0e..f4007f4 100644
--- a/src/components/contacts/Sidebar.tsx
+++ b/src/components/contacts/contacts-components/Sidebar.tsx
@@ -9,9 +9,9 @@ import {
 } from "@mui/material";
 import React from "react";
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
-import ContactInfo from "./ContactInfo";
-import Status from "./Status";
-import ContactItem from "./ContactItem";
+import ContactInfo from "../ContactInfo";
+import Status from "../Status";
+import ContactItem from "./sidebar-components/ContactItem";
 
 const contacts: ContactInfo[] = [
   { name: "Taehee ...", status: Status.Online },
diff --git a/src/components/contacts/LowerBody.tsx b/src/components/contacts/contacts-components/body-components/LowerBody.tsx
similarity index 71%
rename from src/components/contacts/LowerBody.tsx
rename to src/components/contacts/contacts-components/body-components/LowerBody.tsx
index 35bb6cc..d0645eb 100644
--- a/src/components/contacts/LowerBody.tsx
+++ b/src/components/contacts/contacts-components/body-components/LowerBody.tsx
@@ -1,6 +1,6 @@
-import { Box, List, Typography } from "@mui/material";
+import { Box, Button, List, Typography } from "@mui/material";
 import React from "react";
-import ContactInfo from "./ContactInfo";
+import ContactInfo from "../../ContactInfo";
 
 const meetings: { name: string; duration: string }[] = [
   { name: "Kanban Meeting", duration: "10:45 am - 11:45 am" },
@@ -12,9 +12,10 @@ const meetings: { name: string; duration: string }[] = [
 
 interface Props {
   contactInfo: ContactInfo;
+  setMeetingInfoOpen: (open: boolean) => void;
 }
 
-const LowerBody: React.FC<Props> = () => {
+const LowerBody: React.FC<Props> = (props) => {
   return (
     <Box
       sx={{
@@ -23,7 +24,7 @@ const LowerBody: React.FC<Props> = () => {
         border: 1,
         borderRadius: 2,
         width: "70%",
-        height: "70%",
+        height: "60%",
         alignSelf: "center",
       }}
     >
@@ -43,8 +44,14 @@ const LowerBody: React.FC<Props> = () => {
             }}
             key={i}
           >
-            <Typography sx={{ pt: "12px" }}>{meeting.name}</Typography>
-            <Typography sx={{ pt: "12px" }}>{meeting.duration}</Typography>
+            <Button
+              variant="text"
+              color="secondary"
+              onClick={() => props.setMeetingInfoOpen(true)}
+            >
+              {meeting.name}
+            </Button>
+            <Typography sx={{ pt: 1.5 }}>{meeting.duration}</Typography>
           </Box>
         ))}
       </List>
diff --git a/src/components/contacts/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
similarity index 97%
rename from src/components/contacts/UpperBody.tsx
rename to src/components/contacts/contacts-components/body-components/UpperBody.tsx
index 0c53c2a..cb44baa 100644
--- a/src/components/contacts/UpperBody.tsx
+++ b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import PhoneIcon from "@mui/icons-material/Phone";
 import VideocamIcon from "@mui/icons-material/Videocam";
 import GroupsIcon from "@mui/icons-material/Groups";
-import ContactInfo from "./ContactInfo";
+import ContactInfo from "../../ContactInfo";
 
 interface Props {
   contactInfo: ContactInfo;
diff --git a/src/components/contacts/ContactItem.tsx b/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx
similarity index 90%
rename from src/components/contacts/ContactItem.tsx
rename to src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx
index 36f5043..c8d9e48 100644
--- a/src/components/contacts/ContactItem.tsx
+++ b/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx
@@ -2,8 +2,8 @@ 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 ContactInfo from "./ContactInfo";
-import { returnStatusColor } from "./Utils";
+import ContactInfo from "../../ContactInfo";
+import { returnStatusColor } from "../../Utils";
 
 interface Props {
   contactInfo: ContactInfo;
diff --git a/src/components/meeting-details/MeetingDetails.tsx b/src/components/meeting-details/MeetingDetails.tsx
new file mode 100644
index 0000000..dcca058
--- /dev/null
+++ b/src/components/meeting-details/MeetingDetails.tsx
@@ -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;
diff --git a/src/components/meeting-details/meeting-details-components/Body.tsx b/src/components/meeting-details/meeting-details-components/Body.tsx
new file mode 100644
index 0000000..632ac39
--- /dev/null
+++ b/src/components/meeting-details/meeting-details-components/Body.tsx
@@ -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;
diff --git a/src/components/meeting-details/meeting-details-components/Header.tsx b/src/components/meeting-details/meeting-details-components/Header.tsx
new file mode 100644
index 0000000..5f40cd8
--- /dev/null
+++ b/src/components/meeting-details/meeting-details-components/Header.tsx
@@ -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;