Added props necessary to get user alias

ECN · Feb 10, 2021 · 261775f · 261775f
1 parent ca62502
commit 261775f
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 36 deletions.
diff --git a/src/components/EmailHeader/EmailHeader.js b/src/components/EmailHeader/EmailHeader.js
@@ -4,7 +4,7 @@ import { Paper, Grid, makeStyles, useTheme, Typography } from "@material-ui/core
 import RelativeTime from "react-relative-time";
 import UserAvatar from "../UserAvatar/";
 
-export default function EmailHeader({ datetime, from_name, from_email, to, cc }){
+export default function EmailHeader({ datetime, userAlias, from_name, from_email, to, cc }) {
 
 	const theme = useTheme();
 	const useStyles = makeStyles({
@@ -38,15 +38,15 @@ export default function EmailHeader({ datetime, from_name, from_email, to, cc })
 	 * return ""
 	 * @returns {string}
 	 */
-	function buildEmailNameString(name, email){
-		let emailNameString = "";		
+	function buildEmailNameString(name, email) {
+		let emailNameString = "";
 		const isNotEmpty = (value) => {
 			return value === "" || value === null ? false : true;
 		};
-		if (isNotEmpty(name)){
+		if (isNotEmpty(name)) {
 			emailNameString += `${name}`;
 		};
-		if (isNotEmpty(email)){
+		if (isNotEmpty(email)) {
 			emailNameString += ` <${email}>`
 		}
 		return emailNameString;
@@ -57,27 +57,28 @@ export default function EmailHeader({ datetime, from_name, from_email, to, cc })
 	 * @param {array} Array of objects containing names and emails.
 	 * @returns {string} String of email with names.
 	 */
-	function buildRecipientString(recipients){
-		if (recipients.length === 0){
+	function buildRecipientString(recipients) {
+		if (recipients.length === 0) {
 			return "Tits";
 		}
 
 		let recipientString = "";
-		recipients.map( (recipient, index) => {
+		recipients.map((recipient, index) => {
 			recipientString += buildEmailNameString(recipient.name, recipient.email);
 			index < recipients.length - 1 ? recipientString += ", " : recipientString += "";
 			return true;
 		})
 		return recipientString;
 	};
 
-	return(
+	return (
 		<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 } 
+						<UserAvatar
+							alias={userAlias}
+							name={from_name === "Name Unavailable" ? "" : from_name}
 							classes={{ root: classes.itemSpacing }}
 						/>
 					</Grid>
@@ -95,7 +96,7 @@ export default function EmailHeader({ datetime, from_name, from_email, to, cc })
 						{to.length === 0 ? null : <><b>To: </b>{buildRecipientString(to)}</>}
 					</Typography>
 					<Typography variant="body2">
-						{cc.length === 0 ? null : <><b>Cc: </b>{buildRecipientString(cc)}</> }
+						{cc.length === 0 ? null : <><b>Cc: </b>{buildRecipientString(cc)}</>}
 					</Typography>
 				</Paper>
 			}

diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js
@@ -11,6 +11,8 @@ import { objectIsEmpty } from "../../utilities";
 
 export default function ItemBodyView({ item }) {
 
+
+
 	const useStyles = makeStyles(() => ({
 		"Timeline-root": {
 			padding: "0",
@@ -30,22 +32,25 @@ export default function ItemBodyView({ item }) {
 	}));
 	const classes = useStyles();
 
-	const generateTimelineItem = (section) => {
+	const generateTimelineItem = (section, item) => {
+
+
+
 		switch (section.type) {
 			case "directory_information":
 				return <DirectoryInformation section={section} />
 			case "initial_message":
-				return <MessageView {...section} />
+				return <MessageView {...item} {...section} />
 			case "edit":
-				return <TimelineActionCard {...section} />
+				return <TimelineActionCard  {...section} />
 			case "status":
 				return <TimelineActionCard {...section} />
 			case "assignment":
-					return <Assignment {...section} />
+				return <Assignment {...section} />
 			case "reply_to_user":
 				return <TimelineActionCard {...section} />
 			case "reply_from_user":
-				return  <MessageView {...section} />
+				return <MessageView {...item}  {...section} />
 			case "parse_error":
 				return <ParseError {...section} />
 			default:
@@ -56,6 +61,7 @@ export default function ItemBodyView({ item }) {
 	return (
 		<Timeline align="left" classes={{ root: classes["Timeline-root"] }}>
 			{objectIsEmpty(item) ? "" : item.content.map((section) => (
+
 				<TimelineItem
 					classes={{
 						missingOppositeContent: classes["TimelineItem-missingOppositeContent"],
@@ -68,7 +74,7 @@ export default function ItemBodyView({ item }) {
 					<TimelineContent
 						classes={{ root: classes["TimelineContent-root"] }}
 					>
-						{generateTimelineItem(section)}
+						{generateTimelineItem(section, item)}
 					</TimelineContent>
 				</TimelineItem>
 			))}

diff --git a/src/components/MessageView/MessageView.js b/src/components/MessageView/MessageView.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { Paper, Typography, makeStyles, useTheme } from "@material-ui/core";
 import EmailHeader from "../EmailHeader/";
 
-export default function MessageView({ datetime, from_name, from_email, to, cc, content }){
+export default function MessageView({ datetime, userAlias, from_name, from_email, to, cc, content }) {
 
     const theme = useTheme();
     const useStyles = makeStyles({
@@ -16,7 +16,7 @@ export default function MessageView({ datetime, from_name, from_email, to, cc, c
 
     return (
         <Paper classes={{ root: classes["Paper-root"] }}>
-            <EmailHeader datetime={datetime} from_name={from_name} from_email={from_email} to={to} cc={cc} />
+            <EmailHeader datetime={datetime} userAlias={userAlias} from_name={from_name} from_email={from_email} to={to} cc={cc} />
             <Paper variant="outlined" classes={{ root: classes.content }}>
                 {content.map((line) => (
                     line === "\n" ? <br /> : <Typography variant="body1">{line}</Typography>
@@ -27,25 +27,25 @@ export default function MessageView({ datetime, from_name, from_email, to, cc, c
 };
 
 MessageView.propTypes = {
-	/** 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. */
+    /** 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,
     /** The content of the message as an array of line with non-printable characters. */
     "content": PropTypes.array
 };
 
 MessageView.defaultProps = {
-	"from_name": "Name Unavailable",
-	"datetime": new Date(1970, 1, 1, 0, 0, 0, 0),
-	"from_email": "Email Unavailable",
-	"to": [],
+    "from_name": "Name Unavailable",
+    "datetime": new Date(1970, 1, 1, 0, 0, 0, 0),
+    "from_email": "Email Unavailable",
+    "to": [],
     "cc": [],
     "content": []
 };
diff --git a/src/components/UserAvatar/UserAvatar.js b/src/components/UserAvatar/UserAvatar.js
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Avatar } from "@material-ui/core";
 
-export default function UserAvatar({ name, ...avatarProps }){
-    return(
+export default function UserAvatar({ name, alias, ...avatarProps }) {
+    return (
         <Avatar {...avatarProps}>
             {name === "" ? null : name.charAt(0)}
         </Avatar>