Create MessageView component w/ docs

src/components/MessageView/MessageView.js

@@ -0,0 +1,51 @@
+import React from "react";
+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 }){
+
+    const theme = useTheme();
+    const useStyles = makeStyles({
+        "content": {
+            border: "none",
+            padding: `${theme.spacing(1)}px ${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(2)}px`
+        }
+    });
+    const classes = useStyles();
+
+    return (
+        <Paper classes={{ root: classes["Paper-root"] }}>
+            <EmailHeader datetime={datetime} 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>
+                ))}
+            </Paper>
+        </Paper>
+    );
+};
+
+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. */
+    "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": [],
+    "cc": [],
+    "content": []
+};

src/components/MessageView/MessageView.md

@@ -0,0 +1,53 @@
+The MessageView displays an [EmailHeader](/#/Components/EmailHeader) and the content of a message.
+
+---
+
+```jsx
+import MessageView from "./MessageView";
+
+<div style={{ width: "600px"}}>
+    <MessageView />
+</div>
+```
+```jsx static
+<MessageView />
+```
+
+```jsx
+import MessageView from "./MessageView";
+
+demo_data = {
+    "datetime": "2020-04-15T15:45:45+0000",
+    "from_name": "Ricksy, Jennifer R",
+    "from_email": "jricksy@purdue.edu",
+    "to": [
+    {
+        "name": "csite@ecn.purdue.edu",
+        "email": "csite@ecn.purdue.edu"
+    }
+    ],
+    "cc": [
+
+    ],
+    "content": [
+        "I still can't get this to work.  And now the \"trial\" version that I was\n",
+        "using has expired so I can't do anything with a pdf.\n",
+        "\n",
+        "Jenny\n",
+        "\n",
+        "Jenny Ricksy\n",
+        "Burke Graduate Program Administrator\n",
+        "Lyles School of Civil Engineering\n",
+        "Ph: 765-494-2436    Fax: 765-494-0395\n",
+        "HAMP 1141G\n"
+    ]
+};
+
+
+<div style={{ width: "600px"}}>
+    <MessageView {...demo_data} />
+</div>
+```
+```jsx static
+<MessageView />
+```

src/components/MessageView/index.js

@@ -0,0 +1 @@
+export { default } from "./MessageView";