CEC-2752-Add-Mobile-Issue-Tracker (#250)

* first commit * removed comments * remove more comments * fix build issues * fix unused vars * update snapshot * fix test * Fix connect ECONNREFUSED 127.0.0.1:80 * Test Magna side menu * attempt to pass test * fix test * remove comments * fix some code smells * fix test * resolve comments * fix bug * resolved comments * resolve comments * resolve comments * update snapshot * resolved comments Co-authored-by: jwu-fisker <jwu@fiskerinc.com>
2023-01-09 13:17:41 -05:00
parent 097d58656a
commit 28135b4829
23 changed files with 3024 additions and 131 deletions
--- a/src/components/Issues/Info/Details/index.jsx
+++ b/src/components/Issues/Info/Details/index.jsx
@@ -0,0 +1,79 @@
+import { Grid } from "@material-ui/core";
+import clsx from "clsx";
+import React, { useEffect } from "react";
+
+import { logger } from "../../../../services/monitoring";
+import { useStatusContext } from "../../../Contexts/StatusContext";
+import { useUserContext } from "../../../Contexts/UserContext";
+import {
+  useIssueContext,
+  IssueProvider
+} from "../../../Contexts/IssueContext";
+import useStyles from "../../../useStyles";
+
+
+const MainForm = ({ id }) => {
+  const classes = useStyles();
+  const { setMessage } = useStatusContext();
+  const { issue, getIssue } = useIssueContext();
+
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!id || !token) return;
+        await getIssue(id, token);
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+
+  if (issue) {
+    return (
+      <div className={clsx(classes.paper, classes.tableSize)}>
+        <Grid container className={classes.root} spacing={2}>
+          <Grid item md={12} className={classes.textCenterAlign}>
+            <p>
+              <b>ID</b>: {id}
+            </p>
+            <p>
+              <b>VIN</b>: {issue.vin}
+            </p>
+            <p>
+              <b>Title</b>: {issue.title}
+            </p>
+            <p>
+              <b>Description</b>: {issue.description}
+            </p>
+            <p>
+              <b>timestamp</b>: {issue.timestamp}
+            </p>
+            {issue.images && issue.images.map((image, index) => (
+              <img key={image.id} src={`data:image/png;base64, ${image.image}`} alt="Issue images" />
+            ))}
+          </Grid>
+        </Grid>
+      </div>
+    );
+  } else {
+    return <p>Loading...</p>;
+  }
+
+};
+
+const IssueDetails = (props) => (
+  <IssueProvider>
+    <MainForm {...props} />
+  </IssueProvider>
+);
+
+export default IssueDetails;