Sync development into main (#31)

* Sync development into main

* Fix

src/components/Cars/StatusModal/index.jsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from "react";
+import {
+  Backdrop,
+  Modal,
+  Fade,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+} from "@material-ui/core";
+
+import useStyles from "../../useStyles";
+import { useUpdatesContext } from "../../Contexts/UpdatesContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { LocalDateTimeString } from "../../../utils/dates";
+
+export default function CarStatusModal(props) {
+  const classes = useStyles();
+  const [updates, setUpdates] = useState([]);
+  const { setMessage } = useStatusContext();
+  const { getVINUpdates } = useUpdatesContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!props.vin) return;
+        const result = await getVINUpdates(props.vin, token);
+        if (result.error) {
+          throw new Error(`Get VIN updates error. ${result.message}`);
+        } else {
+          setUpdates(result.data);
+        }
+      } catch (e) {
+        setMessage(e.message);
+      }
+    })();
+    // eslint-disable-next-line
+  }, [props.vin]);
+  return (
+    <div>
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        className={classes.modal}
+        open={props.vin !== null && props.vin !== undefined}
+        onClose={props.handleClose}
+        BackdropComponent={Backdrop}
+        BackdropProps={{
+          timeout: 500,
+        }}
+      >
+        <Fade in={props.vin}>
+          <div className={classes.modaldialog}>
+            <h2 id="transition-modal-title">{props.vin} Updates</h2>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell align="center">Date</TableCell>
+                  <TableCell align="center">Update</TableCell>
+                  <TableCell align="center">Status</TableCell>
+                  <TableCell align="center">Updated</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {updates.map((update) => (
+                  <TableRow key={update.id}>
+                    <TableCell align="center">
+                      {LocalDateTimeString(update.created)}
+                    </TableCell>
+                    <TableCell align="center">{`${update.updatepackage.package_name} ${update.updatepackage.version}`}</TableCell>
+                    <TableCell align="center">{update.status}</TableCell>
+                    <TableCell align="center">
+                      {LocalDateTimeString(update.updated)}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </Fade>
+      </Modal>
+    </div>
+  );
+}