From ac5349b88ebff58438cc51f08273475c07120ceb Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@w2vm4.ecn.purdue.edu>
Date: Fri, 23 Oct 2020 00:48:22 -0400
Subject: [PATCH] Create ParseError component w/ docs

---
 src/components/ParseError/ParseError.js | 61 +++++++++++++++++++++++++
 src/components/ParseError/ParseError.md | 36 +++++++++++++++
 src/components/ParseError/index.js      |  1 +
 3 files changed, 98 insertions(+)
 create mode 100644 src/components/ParseError/ParseError.js
 create mode 100644 src/components/ParseError/ParseError.md
 create mode 100644 src/components/ParseError/index.js

diff --git a/src/components/ParseError/ParseError.js b/src/components/ParseError/ParseError.js
new file mode 100644
index 0000000..28dd626
--- /dev/null
+++ b/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": ""
+};
\ No newline at end of file
diff --git a/src/components/ParseError/ParseError.md b/src/components/ParseError/ParseError.md
new file mode 100644
index 0000000..98b58a2
--- /dev/null
+++ b/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}
+/>
+```
\ No newline at end of file
diff --git a/src/components/ParseError/index.js b/src/components/ParseError/index.js
new file mode 100644
index 0000000..8a5ec40
--- /dev/null
+++ b/src/components/ParseError/index.js
@@ -0,0 +1 @@
+export { default } from "./ParseError";
\ No newline at end of file