73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
import { useRef, useState, useEffect } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import Chip from '@mui/material/Chip';
|
|
import Stack from '@mui/material/Stack';
|
|
import ConnectedIcon from "../Controls/ConnectedIcon";
|
|
import { useVehicleContext } from "../Contexts/VehicleContext";
|
|
import useStyles from "../useStyles";
|
|
import { useIntersectObserver } from "../../hooks";
|
|
|
|
// Prevent fetching missing data by not including `token` prop
|
|
|
|
export function VehicleTeaserController(props) {
|
|
const el = useRef(null);
|
|
const isVisible = useIntersectObserver(el, "0px", true);
|
|
const [isMissingData, setIsMissingData] = useState(false);
|
|
|
|
const { getVehicle, vehicle } = useVehicleContext();
|
|
|
|
const classes = useStyles();
|
|
|
|
useEffect(() => {
|
|
if (props.trim === undefined) {
|
|
setIsMissingData(true);
|
|
}
|
|
}, [isVisible, props.trim]);
|
|
|
|
useEffect(() => {
|
|
if (isVisible && props.token) {
|
|
getVehicle(props.vin, props.token)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [isMissingData, isVisible, props.vin, props.token]);
|
|
|
|
if (!props.vin) {
|
|
return (
|
|
<div className={classes.alignBaseline}>
|
|
Missing VIN
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div ref={el}>
|
|
<VehicleTeaser
|
|
vin={props.vin}
|
|
trex={props.trex}
|
|
icc={props.icc}
|
|
trim={props.trim || vehicle.trim}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function VehicleTeaser(props) {
|
|
const classes = useStyles();
|
|
|
|
return (
|
|
<div className={classes.alignBaseline}>
|
|
<ConnectedIcon
|
|
connected={props.trex}
|
|
connectedHMI={props.icc}
|
|
style={{ display: "flex", marginRight: 3 }}
|
|
/>
|
|
<Link to={`/vehicle-status/${props.vin}`}>
|
|
{props.vin}
|
|
</Link>
|
|
<Stack direction="row" spacing={1} style={{ marginLeft: 3 }}>
|
|
{props.trim && <Chip label={props.trim} size="small" />}
|
|
</Stack>
|
|
</div>
|
|
)
|
|
}
|