Update to use flexbox and display to/cc data

src/components/EmailHeader/EmailHeader.js

@@ -1,18 +1,26 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Card, CardHeader, makeStyles, useTheme } from "@material-ui/core";
+import { Paper, Grid, makeStyles, useTheme, Typography } from "@material-ui/core";
+import RelativeTime from "react-relative-time";
 import UserAvatar from "../UserAvatar/";
 
-export default function EmailHeader({name, date, email}){
+export default function EmailHeader({ datetime, from_name, from_email, to, cc }){
 
 	const theme = useTheme();
 	const useStyles = makeStyles({
-		"verticalPadding": {
-			paddingTop: theme.spacing(1),
-			paddingBottom: theme.spacing(1),
+		"paperWrapper": {
+			padding: theme.spacing(1)
 		},
-		"removeCardHeaderPadding": {
-			padding: "0"
+		"removeNegativeMargin": {
+			margin: 0
+		},
+		"secondaryInformation": {
+			backgroundColor: theme.palette.grey[100],
+			marginTop: theme.spacing(1),
+			marginLeft: -theme.spacing(1),
+			marginRight: -theme.spacing(1),
+			marginBottom: -theme.spacing(1),
+			padding: theme.spacing(1)
 		}
 	});
 	const classes = useStyles();
@@ -30,43 +38,89 @@ export default function EmailHeader({name, date, email}){
 	 * return ""
 	 * @returns {string}
 	 */
-	function buildTitle(name, email){
-		let title = "";		
+	function buildEmailNameString(name, email){
+		let emailNameString = "";		
 		const isNotEmpty = (value) => {
 			return value === "" || value === null ? false : true;
 		};
 		if (isNotEmpty(name)){
-			title += `${name}`;
+			emailNameString += `${name}`;
 		};
 		if (isNotEmpty(email)){
-			title += ` <${email}>`
+			emailNameString += ` <${email}>`
+		}
+		return emailNameString;
+	};
+
+	/**
+	 * Returns a string of emails with names.
+	 * @param {array} Array of objects containing names and emails.
+	 * @returns {string} String of email with names.
+	 */
+	function buildRecipientString(recipients){
+		if (recipients.length === 0){
+			return "Tits";
 		}
-		return title;
+
+		let recipientString = "";
+		recipients.map( (recipient, index) => {
+			recipientString += buildEmailNameString(recipient.name, recipient.email) 
+			index < recipients.length - 1 ? recipientString += ", " : recipientString += ""
+		})
+		return recipientString;
 	};
 
+	// const toString = build
+
 	return(
-		<Card elevation={0} classes={{root: classes.verticalPadding}}>
-			<CardHeader
-				avatar={<UserAvatar userName={name} />}
-				title={buildTitle(name, email)}
-				subheader={Date(date)}
-				classes={{root: classes.removeCardHeaderPadding}}
-			/>
-		</Card>
+		<Paper variant="outlined" classes={{ root: classes.paperWrapper }}>
+			<Paper elevation={0} square>
+				<Grid container alignItems="center" spacing={2}>
+					<Grid item xs={2} sm={1} md={2} lg={1}>
+						<UserAvatar 
+							name={ from_name === "Name Unavailable" ? "" : from_name } 
+							classes={{ root: classes.itemSpacing }}
+						/>
+					</Grid>
+					<Grid item xs={7}>
+						<Typography variant="body2">{buildEmailNameString(from_name, from_email)}</Typography>
+					</Grid>
+					<Grid item xs={3}>
+						<Typography variant="body2" color="textSecondary" align="right"><RelativeTime value={datetime} /></Typography>
+					</Grid>
+				</Grid>
+			</Paper>
+			{ (to.length === 0 && cc.length === 0) ? null :
+				<Paper elevation={0} square classes={{ root: classes.secondaryInformation }}>
+					<Typography variant="body2">
+						{to.length === 0 ? null : <><b>To: </b>{buildRecipientString(to)}</>}
+					</Typography>
+					<Typography variant="body2">
+						{cc.length === 0 ? null : <><b>Cc: </b>{buildRecipientString(cc)}</> }
+					</Typography>
+				</Paper>
+			}
+		</Paper>
 	);
 };
 
 EmailHeader.propTypes = {
-	/** Name of the user. */
-	"name": PropTypes.string,
-	/** Date of the message. */
-	"date": PropTypes.string,
-	/** Email address of the user. */
-	"email": PropTypes.string
+	/** Name of message sender. */
+	"from_name": PropTypes.string,
+	/** Date the message was sent in ISO 8601 format. */
+	"datetime": PropTypes.string,
+	/** Email address of message sender. */
+	"from_email": PropTypes.string,
+	/** Array of people the message was sent to */
+	"to": PropTypes.array,
+	/** Array of people the message was cc'd to */
+	"cc": PropTypes.array
 };
 
 EmailHeader.defaultProps = {
-	"name": "",
-	"date": "",
-	"email": ""
+	"from_name": "Name Unavailable",
+	"datetime": new Date(1970, 1, 1, 0, 0, 0, 0),
+	"from_email": "Email Unavailable",
+	"to": [],
+	"cc": []
 };