Added Contact drawer to messageList

frontend/src/pages/Chat/components/MessagesList/MessagesList.js

@@ -7,6 +7,7 @@ import InfiniteScrollReverse from "react-infinite-scroll-reverse";
 import ModalImage from "react-modal-image";
 
 import { makeStyles } from "@material-ui/core/styles";
+import clsx from "clsx";
 import AccessTimeIcon from "@material-ui/icons/AccessTime";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import DoneIcon from "@material-ui/icons/Done";
@@ -16,18 +17,34 @@ import CardHeader from "@material-ui/core/CardHeader";
 import ReplayIcon from "@material-ui/icons/Replay";
 import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
+import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+import Divider from "@material-ui/core/Divider";
 import Paper from "@material-ui/core/Paper";
+import Typography from "@material-ui/core/Typography";
 import { green } from "@material-ui/core/colors";
 import Skeleton from "@material-ui/lab/Skeleton";
 
+import Drawer from "@material-ui/core/Drawer";
+
 import whatsBackground from "../../../../Images/wa-background.png";
 
 import api from "../../../../util/api";
 
 import MessagesInput from "../MessagesInput/MessagesInput";
 
+const drawerWidth = 320;
+
 const useStyles = makeStyles(theme => ({
+	root: {
+		display: "flex",
+		height: "100%",
+		position: "relative",
+		overflow: "hidden",
+	},
+
 	mainWrapper: {
+		flex: 1,
 		height: "100%",
 		display: "flex",
 		flexDirection: "column",
@@ -35,6 +52,21 @@ const useStyles = makeStyles(theme => ({
 		borderTopLeftRadius: 0,
 		borderBottomLeftRadius: 0,
 		borderLeft: "0",
+		marginRight: -drawerWidth,
+		transition: theme.transitions.create("margin", {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.leavingScreen,
+		}),
+	},
+
+	mainWrapperShift: {
+		borderTopRightRadius: 0,
+		borderBottomRightRadius: 0,
+		transition: theme.transitions.create("margin", {
+			easing: theme.transitions.easing.easeOut,
+			duration: theme.transitions.duration.enteringScreen,
+		}),
+		marginRight: 0,
 	},
 
 	messagesHeader: {
@@ -46,6 +78,7 @@ const useStyles = makeStyles(theme => ({
 
 	actionButtons: {
 		marginRight: 6,
+		flex: "none",
 		alignSelf: "center",
 		marginLeft: "auto",
 		"& > *": {
@@ -185,6 +218,27 @@ const useStyles = makeStyles(theme => ({
 		verticalAlign: "middle",
 		marginLeft: 4,
 	},
+
+	drawer: {
+		width: drawerWidth,
+		flexShrink: 0,
+	},
+	drawerPaper: {
+		width: drawerWidth,
+		borderTop: "1px solid rgba(0, 0, 0, 0.12)",
+		borderTopRightRadius: 4,
+		borderBottomRightRadius: 4,
+	},
+	drawerHeader: {
+		display: "flex",
+		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
+
+		backgroundColor: "#eee",
+		alignItems: "center",
+		padding: theme.spacing(0, 1),
+		minHeight: "73px",
+		justifyContent: "flex-start",
+	},
 }));
 
 const MessagesList = () => {
@@ -204,6 +258,8 @@ const MessagesList = () => {
 	const [pageNumber, setPageNumber] = useState(0);
 	const lastMessageRef = useRef();
 
+	const [open, setOpen] = useState(true);
+
 	useEffect(() => {
 		setMessagesList([]);
 	}, [searchParam]);
@@ -439,8 +495,22 @@ const MessagesList = () => {
 		}
 	};
 
+	const handleDrawerOpen = () => {
+		setOpen(true);
+	};
+	const handleDrawerClose = () => {
+		setOpen(false);
+	};
+
 	return (
-		<Paper variant="outlined" elevation={0} className={classes.mainWrapper}>
+		<div className={classes.root} id="drawer-container">
+			<Paper
+				variant="outlined"
+				elevation={0}
+				className={clsx(classes.mainWrapper, {
+					[classes.mainWrapperShift]: open,
+				})}
+			>
 				<Card square className={classes.messagesHeader}>
 					<CardHeader
 						titleTypographyProps={{ noWrap: true }}
@@ -488,6 +558,13 @@ const MessagesList = () => {
 									>
 										Retornar
 									</Button>
+									<Button
+										startIcon={<ReplayIcon />}
+										size="small"
+										onClick={handleDrawerOpen}
+									>
+										Drawer
+									</Button>
 									<Button
 										size="small"
 										variant="contained"
@@ -519,6 +596,34 @@ const MessagesList = () => {
 					) : null}
 				</div>
 			</Paper>
+			<Drawer
+				className={classes.drawer}
+				variant="persistent"
+				anchor="right"
+				open={open}
+				PaperProps={{ style: { position: "absolute" } }}
+				BackdropProps={{ style: { position: "absolute" } }}
+				ModalProps={{
+					container: document.getElementById("drawer-container"),
+					style: { position: "absolute" },
+				}}
+				classes={{
+					paper: classes.drawerPaper,
+				}}
+			>
+				<div className={classes.drawerHeader}>
+					<IconButton onClick={handleDrawerClose}>
+						<CloseIcon />
+					</IconButton>
+					<Typography style={{ justifySelf: "center" }}>
+						Dados do contato
+					</Typography>
+				</div>
+				<a href="https://economicros.ddns.com.br:4043/?viewmode=11&gotonode=j@fJRRDC0rsF1pdypERaF4eQbcwntph@aNQrtLIXhES3Q4AZX678gnn4qbPG619C">
+					Value
+				</a>
+			</Drawer>
+		</div>
 	);
 };