From d21dda7719244472ed8aa90dcc812f98b995910e Mon Sep 17 00:00:00 2001
From: Taehee Choi <cth5545cth5545@gmail.com>
Date: Sat, 5 Mar 2022 01:30:48 -0800
Subject: [PATCH] contacts page first draft done

---
 src/components/contacts/Body.tsx        | 28 ++++++++++
 src/components/contacts/ContactItem.tsx | 53 +++++++------------
 src/components/contacts/Contacts.tsx    | 12 ++++-
 src/components/contacts/LowerBody.tsx   | 55 +++++++++++++++++++
 src/components/contacts/Sidebar.tsx     | 14 +++--
 src/components/contacts/UpperBody.tsx   | 70 +++++++++++++++++++++++++
 src/components/contacts/Utils.tsx       | 18 +++++++
 7 files changed, 208 insertions(+), 42 deletions(-)
 create mode 100644 src/components/contacts/Body.tsx
 create mode 100644 src/components/contacts/LowerBody.tsx
 create mode 100644 src/components/contacts/UpperBody.tsx
 create mode 100644 src/components/contacts/Utils.tsx

diff --git a/src/components/contacts/Body.tsx b/src/components/contacts/Body.tsx
new file mode 100644
index 0000000..f4f6a66
--- /dev/null
+++ b/src/components/contacts/Body.tsx
@@ -0,0 +1,28 @@
+import { Box, Toolbar } from "@mui/material";
+import React from "react";
+import UpperBody from "./UpperBody";
+import LowerBody from "./LowerBody";
+import ContactInfo from "./ContactInfo";
+
+interface Props {
+  contactSelected: ContactInfo;
+}
+
+const Body: React.FC<Props> = (props) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      <Toolbar />
+      <UpperBody contactInfo={props.contactSelected} />
+      <LowerBody contactInfo={props.contactSelected} />
+    </Box>
+  );
+};
+
+export default Body;
diff --git a/src/components/contacts/ContactItem.tsx b/src/components/contacts/ContactItem.tsx
index 3da9470..36f5043 100644
--- a/src/components/contacts/ContactItem.tsx
+++ b/src/components/contacts/ContactItem.tsx
@@ -1,48 +1,31 @@
-import {
-  Box,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Typography,
-} from "@mui/material";
+import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
 import React from "react";
-import Status from "./Status";
 import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
 import CircleIcon from "@mui/icons-material/Circle";
 import ContactInfo from "./ContactInfo";
+import { returnStatusColor } from "./Utils";
 
-const returnStatus = (
-  status: Status
-): "success" | "disabled" | "warning" | "error" => {
-  switch (status) {
-    case Status.Online:
-      return "success";
-    case Status.Offline:
-      return "disabled";
-    case Status.Away:
-      return "warning";
-    case Status.InMeeting:
-      return "error";
-  }
-};
+interface Props {
+  contactInfo: ContactInfo;
+  setContactSelected: (contactInfo: ContactInfo) => void;
+}
 
-const ContactItem: React.FC<ContactInfo> = (props) => {
+const ContactItem: React.FC<Props> = (props) => {
   return (
-    <ListItemButton>
+    <ListItemButton
+      onClick={() => {
+        props.setContactSelected(props.contactInfo);
+      }}
+    >
       <ListItemIcon>
         <PersonOutlineIcon />
       </ListItemIcon>
-      <Box sx={{ display: "flex", flexDirection: "column", flexGrow: 1 }}>
-        <ListItemText primary={props.name} />
-        <ListItemText
-          primary={
-            <Typography variant="subtitle1" sx={{ fontSize: "0.7rem" }}>
-              {props.status}
-            </Typography>
-          }
-        />
-      </Box>
-      <CircleIcon color={returnStatus(props.status)} />
+      <ListItemText
+        primary={props.contactInfo.name}
+        secondary={props.contactInfo.status}
+        sx={{ flexGrow: 1 }}
+      />
+      <CircleIcon color={returnStatusColor(props.contactInfo.status)} />
     </ListItemButton>
   );
 };
diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx
index 4b39f37..7fcc7e6 100644
--- a/src/components/contacts/Contacts.tsx
+++ b/src/components/contacts/Contacts.tsx
@@ -1,12 +1,20 @@
 import { Box } from "@mui/material";
 import React from "react";
+import Body from "./Body";
 
+import ContactInfo from "./ContactInfo";
 import Sidebar from "./Sidebar";
 
 const Contacts: React.FC = () => {
+  const [contactSelected, setContactSelected] =
+    React.useState<ContactInfo | null>(null);
+
   return (
-    <Box>
-      <Sidebar></Sidebar>
+    <Box sx={{ display: "flex", height: "100%" }}>
+      <Sidebar setContactSelected={setContactSelected} />
+      {contactSelected !== null ? (
+        <Body contactSelected={contactSelected} />
+      ) : null}
     </Box>
   );
 };
diff --git a/src/components/contacts/LowerBody.tsx b/src/components/contacts/LowerBody.tsx
new file mode 100644
index 0000000..35bb6cc
--- /dev/null
+++ b/src/components/contacts/LowerBody.tsx
@@ -0,0 +1,55 @@
+import { Box, List, Typography } from "@mui/material";
+import React from "react";
+import ContactInfo from "./ContactInfo";
+
+const meetings: { name: string; duration: string }[] = [
+  { name: "Kanban Meeting", duration: "10:45 am - 11:45 am" },
+  { name: "Design Meeting", duration: "10:45 am - 11:45 am" },
+  { name: "Customer Meeting", duration: "10:45 am - 11:45 am" },
+  { name: "Some kind of Meeting", duration: "10:45 am - 11:45 am" },
+  { name: "Some kind of Meeting", duration: "10:45 am - 11:45 am" },
+];
+
+interface Props {
+  contactInfo: ContactInfo;
+}
+
+const LowerBody: React.FC<Props> = () => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        border: 1,
+        borderRadius: 2,
+        width: "70%",
+        height: "70%",
+        alignSelf: "center",
+      }}
+    >
+      <Typography variant="h4" textAlign="center">
+        Upcoming meetings
+      </Typography>
+      <List sx={{ maxHeight: "100%", overflow: "auto" }}>
+        {meetings.map((meeting, i) => (
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              height: "50px",
+              px: "10px",
+              borderTop: 1,
+              borderBottom: i === meetings.length - 1 ? 1 : 0,
+            }}
+            key={i}
+          >
+            <Typography sx={{ pt: "12px" }}>{meeting.name}</Typography>
+            <Typography sx={{ pt: "12px" }}>{meeting.duration}</Typography>
+          </Box>
+        ))}
+      </List>
+    </Box>
+  );
+};
+
+export default LowerBody;
diff --git a/src/components/contacts/Sidebar.tsx b/src/components/contacts/Sidebar.tsx
index b7e9cca..8253a0e 100644
--- a/src/components/contacts/Sidebar.tsx
+++ b/src/components/contacts/Sidebar.tsx
@@ -20,9 +20,13 @@ const contacts: ContactInfo[] = [
   { name: "Esteban ...", status: Status.Away },
 ];
 
+interface Props {
+  setContactSelected: (contactInfo: ContactInfo) => void;
+}
+
 const sidebarWidth = 240;
 
-const Sidebar: React.FC = () => {
+const Sidebar: React.FC<Props> = (props) => {
   const [favoritesOpen, setFavoritesOpen] = React.useState<boolean>(true);
   const [teamOpen, setTeamOpen] = React.useState<boolean>(false);
 
@@ -51,9 +55,9 @@ const Sidebar: React.FC = () => {
           <List disablePadding>
             {contacts.map((contact, i) => (
               <ContactItem
-                name={contact.name}
-                status={contact.status}
+                contactInfo={contact}
                 key={i}
+                setContactSelected={props.setContactSelected}
               />
             ))}
           </List>
@@ -67,9 +71,9 @@ const Sidebar: React.FC = () => {
           <List disablePadding>
             {contacts.map((contact, i) => (
               <ContactItem
-                name={contact.name}
-                status={contact.status}
+                contactInfo={contact}
                 key={i}
+                setContactSelected={props.setContactSelected}
               />
             ))}
           </List>
diff --git a/src/components/contacts/UpperBody.tsx b/src/components/contacts/UpperBody.tsx
new file mode 100644
index 0000000..0c53c2a
--- /dev/null
+++ b/src/components/contacts/UpperBody.tsx
@@ -0,0 +1,70 @@
+import { Box, Button, IconButton, Typography } from "@mui/material";
+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";
+
+interface Props {
+  contactInfo: ContactInfo;
+}
+
+const UpperBody: React.FC<Props> = (props) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        border: 1,
+        borderRadius: 2,
+        width: "70%",
+        alignSelf: "center",
+        mb: 2,
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-evenly",
+          alignItems: "center",
+        }}
+      >
+        <Typography variant="h3">{props.contactInfo.name}</Typography>
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          my: 2,
+        }}
+      >
+        <Box
+          sx={{
+            ml: "5%",
+          }}
+        >
+          <IconButton sx={{ border: 1, mr: 1 }} size="large">
+            <PhoneIcon fontSize="large" />
+          </IconButton>
+          <IconButton sx={{ border: 1, mr: 1 }} size="large">
+            <VideocamIcon fontSize="large" />
+          </IconButton>
+          <IconButton sx={{ border: 1, mr: 1 }} size="large">
+            <GroupsIcon fontSize="large" />
+          </IconButton>
+          <Button variant="outlined" color="success">
+            Add to favorites
+          </Button>
+        </Box>
+        <Box sx={{ display: "flex", flexDirection: "column", ml: "10%" }}>
+          <Typography>{props.contactInfo.status}</Typography>
+          <Typography>MeetingName-1372</Typography>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default UpperBody;
diff --git a/src/components/contacts/Utils.tsx b/src/components/contacts/Utils.tsx
new file mode 100644
index 0000000..e5424d8
--- /dev/null
+++ b/src/components/contacts/Utils.tsx
@@ -0,0 +1,18 @@
+import Status from "./Status";
+
+const returnStatusColor = (
+  status: Status
+): "success" | "disabled" | "warning" | "error" => {
+  switch (status) {
+    case Status.Online:
+      return "success";
+    case Status.Offline:
+      return "disabled";
+    case Status.Away:
+      return "warning";
+    case Status.InMeeting:
+      return "error";
+  }
+};
+
+export { returnStatusColor };