78 lines
1.9 KiB
JavaScript
78 lines
1.9 KiB
JavaScript
import React, { useRef } from "react";
|
|
|
|
import useStyles from "../useStyles";
|
|
import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
|
|
import { useStatusContext } from "../Contexts/StatusContext";
|
|
import { useUserContext } from "../Contexts/UserContext";
|
|
import { Button, TextField, Typography } from "@material-ui/core";
|
|
|
|
const MainForm = () => {
|
|
const { addVehicle, busy } = useVehicleContext();
|
|
const { setMessage } = useStatusContext();
|
|
const { token } = useUserContext();
|
|
const classes = useStyles();
|
|
const vinEl = useRef(null);
|
|
|
|
const onSubmit = async (event) => {
|
|
try {
|
|
event.preventDefault();
|
|
|
|
const {
|
|
idToken: { jwtToken: authToken },
|
|
} = token;
|
|
const formData = {
|
|
vin: vinEl.current.value,
|
|
};
|
|
|
|
const result = await addVehicle(formData, authToken);
|
|
|
|
setMessage(`Added ${result.vin}`);
|
|
vinEl.current.value = "";
|
|
} catch (e) {
|
|
setMessage(e.message);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={classes.paper}>
|
|
<Typography component="h1" variant="h5">
|
|
Add Vehicle
|
|
</Typography>
|
|
<form className={classes.form} noValidate action="{onSubmit}">
|
|
<TextField
|
|
id="vin"
|
|
name="vin"
|
|
label="VIN"
|
|
variant="outlined"
|
|
margin="normal"
|
|
inputProps={{
|
|
maxLength: "17",
|
|
}}
|
|
required
|
|
fullWidth
|
|
inputRef={vinEl}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
disabled={busy}
|
|
fullWidth
|
|
variant="contained"
|
|
color="primary"
|
|
className={classes.submit}
|
|
onClick={onSubmit}
|
|
>
|
|
{busy ? "Submitting..." : "Submit"}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const VehicleAddForm = () => (
|
|
<VehicleProvider>
|
|
<MainForm />
|
|
</VehicleProvider>
|
|
);
|
|
|
|
export default VehicleAddForm;
|