Feature conversational ui

src/components/ItemBodyView/ItemBodyView.js

@@ -1,11 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot } from '@material-ui/lab';
-import { Typography, makeStyles } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
 import DirectoryInformation from "../DirectoryInformation/";
 import Assignment from "../Assignment/";
 import TimelineActionCard from "../TimelineActionCard/";
 import MessageView from "../MessageView/";
+import ParseError from "../ParseError/";
 import { objectIsEmpty } from "../../utilities";
 
 export default function ItemBodyView({ item }) {
@@ -31,42 +32,23 @@ export default function ItemBodyView({ item }) {
 	const generateTimelineItem = (section) => {
 		switch (section.type) {
 			case "directory_information":
-				return (
-					<DirectoryInformation section={section} />
-				);
+				return <DirectoryInformation section={section} />
 			case "initial_message":
-				return (
-					<>
-						<MessageView {...section} />
-					</>
-				);
+				return <MessageView {...section} />
 			case "edit":
-				return (
-					<TimelineActionCard {...section} />
-				);
+				return <TimelineActionCard {...section} />
 			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>)}
-					</>
-				);
+				return <TimelineActionCard {...section} />
 			case "assignment":
-				return (
-					<Assignment {...section} />
-				);
+					return <Assignment {...section} />
 			case "reply_to_user":
-				return (
-					<TimelineActionCard {...section} />
-				);
+				return <TimelineActionCard {...section} />
 			case "reply_from_user":
-				return (
-					<MessageView {...section} />
-				);
+				return  <MessageView {...section} />
+			case "parse_error":
+				return <ParseError {...section} />
 			default:
-				return "No Match Found";
+				return `No match found for type: ${section.type}`;
 		};
 	};
 

src/components/ParseError/ParseError.js

@@ -0,0 +1,61 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Typography, Paper, makeStyles, useTheme } from '@material-ui/core';
+import clsx from "clsx";
+
+export default function ParseError({ file_path, expected, got, line_num }){
+
+    const theme = useTheme();
+
+    const useStyles = makeStyles({
+        "Paper-root": {
+            overflow: "hidden"
+        },
+        "headerColor": {
+            backgroundColor: theme.palette.parse_error.main
+        },
+        "padding": {
+            padding: theme.spacing(1)
+        }
+
+    });
+    const classes = useStyles();
+
+    return(
+        <Paper classes={{root: classes["Paper-root"]}}>
+            <div className={clsx(classes.headerColor, classes.padding)}>
+                <Typography variant="body1">
+					Parsing Error
+				</Typography>
+            </div>
+            <div className={classes.padding}>
+				<Typography variant="body1">
+					<b>File Path:</b> {file_path}
+				</Typography>
+				<Typography variant="body1">
+					<b>Line:</b> {line_num}
+				</Typography>
+				<Typography variant="body1">
+					<b>Expected:</b> {expected}
+				</Typography>
+				<Typography variant="body1">
+					<b>Got:</b> {got}
+				</Typography>
+            </div>
+        </Paper>
+    );
+}
+
+ParseError.propTypes = {
+	"file_path": PropTypes.string, 
+	"expected": PropTypes.string,
+	"got": PropTypes.string,
+	"line_num": PropTypes.number
+};
+
+ParseError.defaultProps = {
+    "file_path": "", 
+	"expected": "",
+	"got": "",
+	"line_num": ""
+};

src/components/ParseError/ParseError.md

@@ -0,0 +1,36 @@
+Displays a parsing error.
+
+---
+
+```jsx
+import { ThemeProvider } from "@material-ui/core/styles";
+import webqueue2Theme from "../../theme";
+import ParseError from "./ParseError";
+
+const theme = webqueue2Theme(false);
+
+const demo_data = {
+	"type": "parse_error",
+	"datetime": "2020-10-23T00:45:32",
+	"file_path": "/home/pier/e/campb303/webqueue2/q-snapshot/ce/32",
+	"expected": "Did not encounter a reply-from-user ending delimiter",
+	"got": "765-869-4032 to assist please?\tThank you\n",
+	"line_num": 120
+};
+
+<ThemeProvider theme={theme}>
+	<ParseError 
+		file_path={demo_data.file_path}  
+		expected={demo_data.expected}
+		got={demo_data.got}
+		line_num={demo_data.line_num}
+	/> </ThemeProvider>
+```
+```jsx static
+<ParseError 
+	file_path={demo_data.file_path}  
+	expected={demo_data.expected}
+	got={demo_data.got}
+	line_num={demo_data.line_num}
+/>
+```

src/components/ParseError/index.js

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

src/components/TimelineActionCard/TimelineActionCard.js

@@ -16,6 +16,10 @@ export default function TimelineActionCard({ type, datetime, by, content }){
         "reply_to_user": {
             "verbage": "replied",
             "coloring": theme.palette.reply_to_user.main
+        },
+        "status": {
+            "verbage": "updated the status",
+            "coloring": theme.palette.status.main
         }
     }
 
@@ -54,9 +58,9 @@ TimelineActionCard.propTypes = {
     ]),
     /** ISO 8601 formatted time string. */
     "datetime": PropTypes.string.isRequired,
-    /** The name of the person who added the edit. */
+    /** The name of the person who added the action. */
     "by": PropTypes.string.isRequired,
-    /** An array of strings containing the content of the edit. */
+    /** An array of strings containing the content of the action. */
     "content": PropTypes.array.isRequired
 };
 

src/theme.js

@@ -26,8 +26,11 @@ export default function theme(darkMode = false) {
                 "reply_to_user": {
                     main: "rgba(99, 125, 255, 0.2)",
                 },
-                "reply_from_user": {
+                "status": {
                     main: "rgba(99, 255, 151, 0.2)",
+                },
+                "parse_error": {
+                    main: "rgba(255, 99, 204, 0.2)",
                 }
             },
         })