Finished Contact Drawer styles and func

frontend/src/components/ContactDrawer/index.js

@@ -1,10 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import IconButton from "@material-ui/core/IconButton";
 import CloseIcon from "@material-ui/icons/Close";
 import Drawer from "@material-ui/core/Drawer";
+import Link from "@material-ui/core/Link";
+import InputLabel from "@material-ui/core/InputLabel";
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+import Paper from "@material-ui/core/Paper";
+
+import LinkifyWithTargetBlank from "../LinkifyWithTargetBlank";
+import ContactModal from "../ContactModal";
+import ContactDrawerSkeleton from "../ContactDrawerSkeleton";
 
 const drawerWidth = 320;
 
@@ -21,7 +30,7 @@ const useStyles = makeStyles(theme => ({
 		borderBottomRightRadius: 4,
 		backgroundColor: "#eee",
 	},
-	drawerHeader: {
+	header: {
 		display: "flex",
 		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
 		backgroundColor: "#eee",
@@ -30,11 +39,75 @@ const useStyles = makeStyles(theme => ({
 		minHeight: "73px",
 		justifyContent: "flex-start",
 	},
+	content: {
+		display: "flex",
+		flexDirection: "column",
+		padding: "8px 0px 8px 8px",
+		// backgroundColor: "red",
+		height: "100%",
+		overflow: "scroll",
+		"&::-webkit-scrollbar": {
+			width: "8px",
+			height: "8px",
+		},
+		"&::-webkit-scrollbar-thumb": {
+			// borderRadius: "2px",
+			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
+			backgroundColor: "#e8e8e8",
+		},
+	},
+
+	contactAvatar: {
+		margin: 15,
+		width: 160,
+		height: 160,
+	},
+
+	contactHeader: {
+		display: "flex",
+		padding: 8,
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		"& > *": {
+			margin: 4,
+		},
+	},
+
+	contactDetails: {
+		marginTop: 8,
+		padding: 8,
+		display: "flex",
+		flexDirection: "column",
+		// overflowX: "scroll",
+		// flex: 1,
+		// "&::-webkit-scrollbar": {
+		// 	width: "8px",
+		// 	height: "8px",
+		// },
+		// "&::-webkit-scrollbar-thumb": {
+		// 	// borderRadius: "2px",
+		// 	boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
+		// 	backgroundColor: "#e8e8e8",
+		// },
+	},
+	contactExtraInfo: {
+		marginTop: 4,
+		padding: 6,
+	},
 }));
 
-const ContactDrawer = ({ open, children, handleDrawerClose }) => {
+const ContactDrawer = ({
+	open,
+	children,
+	handleDrawerClose,
+	contact,
+	loading,
+}) => {
 	const classes = useStyles();
 
+	const [modalOpen, setModalOpen] = useState(false);
+
 	return (
 		<Drawer
 			className={classes.drawer}
@@ -51,7 +124,7 @@ const ContactDrawer = ({ open, children, handleDrawerClose }) => {
 				paper: classes.drawerPaper,
 			}}
 		>
-			<div className={classes.drawerHeader}>
+			<div className={classes.header}>
 				<IconButton onClick={handleDrawerClose}>
 					<CloseIcon />
 				</IconButton>
@@ -59,7 +132,57 @@ const ContactDrawer = ({ open, children, handleDrawerClose }) => {
 					Dados do contato
 				</Typography>
 			</div>
-			{children}
+			{loading ? (
+				<ContactDrawerSkeleton classes={classes} />
+			) : (
+				<div className={classes.content}>
+					<Paper square variant="outlined" className={classes.contactHeader}>
+						<Avatar
+							alt={contact.name}
+							src={contact.profilePicUrl}
+							className={classes.contactAvatar}
+						></Avatar>
+
+						<Typography>{contact.name}</Typography>
+						<Typography>
+							<Link href={`tel:${contact.number}`}>{contact.number}</Link>
+						</Typography>
+						<Button
+							variant="outlined"
+							color="primary"
+							onClick={e => setModalOpen(true)}
+						>
+							Editar contato
+						</Button>
+					</Paper>
+					<Paper square variant="outlined" className={classes.contactDetails}>
+						<ContactModal
+							modalOpen={modalOpen}
+							onClose={e => setModalOpen(false)}
+							aria-labelledby="form-dialog-title"
+							contactId={contact.id}
+						></ContactModal>
+						<Typography variant="subtitle1">Outras informações</Typography>
+						{contact &&
+							contact.extraInfo &&
+							contact.extraInfo.map(info => (
+								<Paper
+									key={info.id}
+									square
+									variant="outlined"
+									className={classes.contactExtraInfo}
+								>
+									<InputLabel>{info.name}</InputLabel>
+									<LinkifyWithTargetBlank>
+										<Typography noWrap style={{ paddingTop: 2 }}>
+											{info.value}
+										</Typography>
+									</LinkifyWithTargetBlank>
+								</Paper>
+							))}
+					</Paper>
+				</div>
+			)}
 		</Drawer>
 	);
 };