Merge branch 'enhancement-user-image-service' into staging

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){
-			return "Tits";
+	function buildRecipientString(recipients) {
+		if (recipients.length === 0) {
+			return "";
 		}
 
 		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>
@@ -100,7 +101,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>
 			}

src/components/ItemBodyView/ItemBodyView.js

@@ -32,7 +32,7 @@ export default function ItemBodyView({ sections, loading }) {
 
 	/**
 	 * Returns a section type specific timeline item.
-	 * @param {Object} section The 
+	 * @param {Object} section The
 	 * @returns {Node} A section type specific timeline item.
 	 */
 	const generateTimelineItem = (section) => {
@@ -42,15 +42,15 @@ export default function ItemBodyView({ sections, loading }) {
 			case "initial_message":
 				return <MessageView {...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 {...section} />
 			case "parse_error":
 				return <ParseError {...section} />
 			default:

src/components/MessageView/MessageView.js

@@ -2,9 +2,10 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Paper, Typography, makeStyles, useTheme } from "@material-ui/core";
 import EmailHeader from "../EmailHeader/";
+import { useItem } from "../ItemProvider"
 
-export default function MessageView({ datetime, from_name, from_email, to, cc, content }){
-
+export default function MessageView({ datetime, from_name, from_email, to, cc, content }) {
+    const activeItem = useItem()
     const theme = useTheme();
     const useStyles = makeStyles({
         "content": {
@@ -16,7 +17,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={activeItem.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,24 +28,26 @@ 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",
-	"from_email": "Email Unavailable",
-	"to": [],
+    "from_name": "Name Unavailable",
+    "userAlias": "Alias Unavailable",
+    "datetime": new Date(1970, 1, 1, 0, 0, 0, 0),
+    "from_email": "Email Unavailable",
+    "to": [],
     "cc": [],
     "content": []
 };

src/components/UserAvatar/UserAvatar.js

@@ -1,20 +1,49 @@
-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(
-        <Avatar {...avatarProps}>
+export default function UserAvatar({ name, alias }) {
+    const [userImageURL, setUserImageURL] = useState("");
+
+    // Load User Image from ECNDB
+    useEffect(_ => {
+        (async function getUserImage() {
+            if (alias === "") {
+                return null;
+            }
+
+            const userImageResponse = await fetch(`https://engineering.purdue.edu/ECN/PersonPhotos/getPhoto?json=1&alias=${alias}`);
+
+            if (userImageResponse.status !== 200) {
+                console.error(`Failed to load user image from ECNDB. Got code ${userImageResponse.status} (${userImageResponse.statusText})`);
+                return null;
+            }
+
+            let userImageData = await userImageResponse.json();
+            if (userImageData.imagePath === "") {
+                return null;
+            }
+
+            setUserImageURL(`https://engineering.purdue.edu/${userImageData.imagePath}`);
+            return null;
+        })();
+    }, [alias])
+
+    return (
+        <Avatar src={userImageURL}>
             {name === "" ? null : name.charAt(0)}
         </Avatar>
     );
 };
 
 UserAvatar.propTypes = {
     /** The name of the user. */
-    "name": PropTypes.string
+    "name": PropTypes.string,
+    /** The user's career account alias. */
+    "alias": PropTypes.string
 };
 
 UserAvatar.defaultProps = {
-    "name": ""
+    "name": "",
+    "alias": "",
 };