CEC-6016: add trim to fleet (#523)

* CEC-6016: add trim to fleet

* update snapshot

src/components/VehicleTeaser/index.jsx

@@ -0,0 +1,72 @@
+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>
+  )
+}