92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
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>
|
|
);
|
|
}
|