123 lines
3.4 KiB
JavaScript
123 lines
3.4 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableFooter,
|
|
TableHead,
|
|
TablePagination,
|
|
TableRow,
|
|
Typography,
|
|
} from "@material-ui/core";
|
|
|
|
import {
|
|
useVehicleContext,
|
|
VehicleProvider,
|
|
} from "../../Contexts/VehicleContext";
|
|
import { useUserContext } from "../../Contexts/UserContext";
|
|
import { useStatusContext } from "../../Contexts/StatusContext";
|
|
import useStyles from "../../useStyles";
|
|
import { LocalDateTimeString } from "../../../utils/dates";
|
|
|
|
const MainForm = () => {
|
|
const classes = useStyles();
|
|
const [pageSize, setPageSize] = useState(5);
|
|
const [pageIndex, setPageIndex] = useState(0);
|
|
const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
|
|
const { setMessage } = useStatusContext();
|
|
const {
|
|
token: {
|
|
idToken: { jwtToken: token },
|
|
},
|
|
} = useUserContext();
|
|
|
|
useEffect(() => {
|
|
try {
|
|
getVehicles(
|
|
{
|
|
limit: pageSize,
|
|
offset: pageSize * pageIndex,
|
|
},
|
|
token
|
|
);
|
|
} catch (e) {
|
|
setMessage(e.message);
|
|
}
|
|
// eslint-disable-next-line
|
|
}, [pageIndex, pageSize, token]);
|
|
|
|
const handleChangePageIndex = (event, newIndex) => {
|
|
setPageIndex(newIndex);
|
|
};
|
|
|
|
const handleChangePageSize = (event) => {
|
|
setPageSize(parseInt(event.target.value, 10));
|
|
setPageIndex(0);
|
|
};
|
|
|
|
return (
|
|
<div className={classes.paper} style={{ height: 700, width: "100%" }}>
|
|
<Typography component="h1" variant="h5">
|
|
Vehicles
|
|
</Typography>
|
|
<TableContainer>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell align="center">VIN</TableCell>
|
|
<TableCell align="center">Model</TableCell>
|
|
<TableCell align="center">Year</TableCell>
|
|
<TableCell align="center">Created</TableCell>
|
|
<TableCell align="center">Updated</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{vehicles.map((row) => (
|
|
<TableRow key={row.vin}>
|
|
<TableCell align="center">
|
|
<Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
|
|
</TableCell>
|
|
<TableCell align="center">{row.model}</TableCell>
|
|
<TableCell align="center">{row.year}</TableCell>
|
|
<TableCell align="center">
|
|
{LocalDateTimeString(row.created)}
|
|
</TableCell>
|
|
<TableCell align="center">
|
|
{LocalDateTimeString(row.updated)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
<TableFooter>
|
|
<TableRow>
|
|
<TablePagination
|
|
rowsPerPageOptions={[5, 10, 25]}
|
|
colSpan={6}
|
|
count={totalVehicles}
|
|
rowsPerPage={pageSize}
|
|
page={pageIndex}
|
|
SelectProps={{
|
|
inputProps: { "aria-label": "rows per page" },
|
|
native: true,
|
|
}}
|
|
onChangePage={handleChangePageIndex}
|
|
onChangeRowsPerPage={handleChangePageSize}
|
|
/>
|
|
</TableRow>
|
|
</TableFooter>
|
|
</Table>
|
|
</TableContainer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const VehiclesList = () => (
|
|
<VehicleProvider>
|
|
<MainForm />
|
|
</VehicleProvider>
|
|
);
|
|
|
|
export default VehiclesList;
|