Create ItemBodyView component w/ docs

src/components/ItemBodyView/ItemBodyView.js

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot } from '@material-ui/lab';
+import { Card, CardHeader, CardContent, Typography, makeStyles } from "@material-ui/core";
+import webqueue2Theme from "../../theme";
+import EmailHeader from "../EmailHeader/";
+import { objectIsEmpty } from "../../utilities";
+
+export default function ItemBodyView({ item }) {
+
+	const theme = webqueue2Theme(false);
+	const useStyles = makeStyles((theme) => ({
+		missingOppositeContent: {
+			'&:before': {
+				content: '""',
+				flex: 0,
+				padding: '0',
+			},
+		},
+	}));
+	const classes = useStyles(theme);
+
+	const generateTimelineItem = (section) => {
+		switch(section.type) {
+			case "directoryInformation": 
+				if (section.content.length === 0){
+					return "No Directory Information";
+				} else {
+					return "Directory Information Present"
+				}
+			case "initialMessage":
+				return(
+					<>
+						<EmailHeader name={section.userName} date={section.datetime} email={section.userEmail} />
+						{section.content.map((line, index) => <Typography variant="body1">{line}</Typography>)}
+					</>
+				);
+			case "edit":
+				return(
+					<>
+						<Typography variant="subtitle2">
+							{`${section.by} assigned thisat ${Date(section.datetime)}`}
+						</Typography>
+						{section.content.map((line) => <Typography variant="body1">{line}</Typography>)}
+					</>
+				);
+			case "status":
+				return(
+					<>
+						<Typography variant="subtitle2">
+							{`${section.by} update the status to at ${Date(section.datetime)}`}
+						</Typography>
+						{section.content.map((line) => <Typography variant="body1">{line}</Typography>)}
+					</>
+				);
+			case "assign":
+				return (
+					<Typography variant="subtitle2">
+						{`${section.by} assigned this to ${section.to} at ${Date(section.datetime)}`}
+					</Typography>
+				);
+			case "replyToUser":
+				return(
+					<>
+						<Typography variant="subtitle2">
+							{`${section.by} replied ${Date(section.datetime)}`}
+						</Typography>
+						{section.content.map((line) => <Typography variant="body1">{line}</Typography>)}
+					</>
+				);
+			case "replyFromUser":
+				return(
+					<>
+						<EmailHeader name={section.userName} date={section.datetime} email={section.userEmail} />
+						{section.content.map((line, index) => <Typography variant="body1">{line}</Typography>)}
+					</>
+				);
+			default:
+				return "No Match Found";
+		};
+	};
+
+	return (
+		<Timeline align="left">
+			{objectIsEmpty(item) ? "" : item.content.map((section, index) => {
+				return (
+					<TimelineItem classes={{missingOppositeContent: classes.missingOppositeContent}}>
+						<TimelineSeparator>
+							<TimelineDot />
+							<TimelineConnector />
+						</TimelineSeparator>
+						<TimelineContent>
+							{generateTimelineItem(section)}
+						</TimelineContent>
+					</TimelineItem>
+				);
+			})}
+		</Timeline>
+	);
+};
+
+ItemBodyView.propTypes = {
+	/** The item to diplay. */
+	"item": PropTypes.object.isRequired
+};

src/components/ItemBodyView/ItemBodyView.md

@@ -0,0 +1,23 @@
+The ItemBodyView displays the seven actions possible in an item:
+
+- **Directory information**: present when a user submits a ticket from the Contact Us page
+- **Initial Message**: the first message a user sends.
+- **Edit:** an internal note to and from ECN staff.
+- **Status:** an internal summary of the current/next task for the item.
+- **Assignment:** the career account alias for the ECN employee the item is assigned to.
+- **Reply To User:** a message sent from an ECN employee to a user.
+- **Reply To ECN:** a message sent from the user to ECN that has been merged into an existing item.
+
+```jsx
+import ItemBodyView from "./ItemBodyView";
+
+const demoItem = {"queue": "ce", "number": 100, "lastUpdated": "08-27-20 09:49 PM", "headers": [{"type": "Merged-Time", "content": "Tue, 23 Jun 2020 13:31:53 -0400"}, {"type": "Merged-By", "content": "campb303"}, {"type": "QTime", "content": "1"}, {"type": "QTime-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "QTime-Updated-By", "content": "campb303"}, {"type": "Time", "content": "1"}, {"type": "Time-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "Time-Updated-By", "content": "campb303"}, {"type": "Replied-Time", "content": "Tue, 23 Jun 2020 13:28:48 -0400"}, {"type": "Replied-By", "content": "campb303"}, {"type": "Edited-Time", "content": "Tue, 23 Jun 2020 13:27:56 -0400"}, {"type": "Edited-By", "content": "campb303"}, {"type": "QAssigned-To", "content": "campb303"}, {"type": "QAssigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "QAssigned-To-Updated-By", "content": "campb303"}, {"type": "Assigned-To", "content": "campb303"}, {"type": "Assigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "Assigned-To-Updated-By", "content": "campb303"}, {"type": "QStatus", "content": "Dont Delete"}, {"type": "QStatus-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "QStatus-Updated-By", "content": "campb303"}, {"type": "Status", "content": "Dont Delete"}, {"type": "Status-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "Status-Updated-By", "content": "campb303"}, {"type": "Date", "content": "Tue, 23 Jun 2020 13:25:51 -0400"}, {"type": "From", "content": "Justin Campbell <campb303@purdue.edu>"}, {"type": "Message-ID", "content": "<911CE050-3240-4980-91DD-9C3EBB8DBCF8@purdue.edu>"}, {"type": "Subject", "content": "Beepboop"}, {"type": "To", "content": "cesite@ecn.purdue.edu"}, {"type": "Content-Type", "content": "text/plain; charset=\"utf-8\""}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/208-original.txt"}, {"type": "X-ECN-Queue-Original-URL", "content": "https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/208-original.txt"}], "content": [{"type": "directoryInformation", "content": []}, {"type": "initialMessage", "datetime": "2020-06-23T13:25:51-0400", "userName": "Justin Campbell", "userEmail": "campb303@purdue.edu", "ccRecipients": [], "content": ["Testtest\n"]}, {"type": "assign", "by": "campb303", "datetime": "2020-06-23T13:27:00-0400", "to": "campb303"}, {"type": "status", "by": "campb303", "datetime": "2020-06-23T13:26:55", "content": ["*** Status updated by: campb303 at: 6/23/2020 13:26:55 ***\n", "Dont Delete\n"]}, {"type": "edit", "by": "campb303", "datetime": "2020-06-23T13:27:56", "content": ["*** Edited by: campb303 at: 06/23/20 13:27:56 ***\n", "\n", "This be an edit my boy\n", "\n", "\n", "\n"]}, {"type": "replyToUser", "by": "campb303", "datetime": "2020-06-23T13:28:18", "content": ["*** Replied by: campb303 at: 06/23/20 13:28:18 ***\n", "\n", "This be a reply my son\n", "\n", "Justin\n", "ECN\n", "\n"]}, {"type": "replyFromUser", "datetime": "2020-06-23T13:30:45-0400", "subject": "Re: Beepboop", "userName": "Justin Campbell", "userEmail": "campb303@purdue.edu", "content": ["=== Additional information supplied by user ===\n", "\n", "Subject: Re: Beepboop\n", "From: Justin Campbell <campb303@purdue.edu>\n", "Date: Tue, 23 Jun 2020 13:30:45 -0400\n", "X-ECN-Queue-Original-Path: /home/pier/e/queue/Attachments/inbox/2020-06-23/212-original.txt\n", "X-ECN-Queue-Original-URL: https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/212-original.txt\n", "\n", "Huzzah!\n", "\n", "===============================================\n", "\n"], "ccRecipients": []}], "isLocked": "ce 100 is locked by knewell using qvi", "userEmail": "campb303@purdue.edu", "userName": "Justin Campbell", "userAlias": "campb303", "assignedTo": "campb303", "subject": "Beepboop", "status": "Dont Delete", "priority": "", "department": "", "building": "", "dateReceived": "2020-06-23T13:25:51-0400"};
+
+<div style={{backgroundColor: "white", padding: "1em"}}>
+	<ItemBodyView item={demoItem} />
+</div>
+```
+
+```jsx static
+<ItemBodyView item={demoItem} />
+```

src/components/ItemBodyView/index.js

@@ -0,0 +1,3 @@
+import ItemBodyView from "./ItemBodyView";
+
+export default ItemBodyView;