CEC-6016: remove singleton usage (#525)

* CEC-6016: add trim to fleet

* update snapshot

* CEC-6016: remove singleton in vehicle fetch

src/components/Fleets/Status/Vehicles/Table/index.jsx

@@ -214,7 +214,6 @@ const MainForm = ({ name }) => {
           selectCount={selected.length}
           rowCount={fleetVehicles.length}
         />
-        <VehicleProvider>
         <TableBody>
           {fleetVehicles && fleetVehicles.map((car) => {
             const isSelected = selected.includes(car.vin);
@@ -260,7 +259,6 @@ const MainForm = ({ name }) => {
             )
           })}
         </TableBody>
-        </VehicleProvider>
         <TableFooter>
           <TableRow>
             <TablePagination

src/components/VehicleTeaser/index.jsx

@@ -3,9 +3,9 @@ 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";
+import api from "../../services/vehiclesAPI";
 
 // Prevent fetching missing data by not including `token` prop
 
@@ -13,8 +13,7 @@ export function VehicleTeaserController(props) {
   const el = useRef(null);
   const isVisible = useIntersectObserver(el, "0px", true);
   const [isMissingData, setIsMissingData] = useState(false);
-
-  const { getVehicle, vehicle } = useVehicleContext();
+  const [vehicle, setVehicle] = useState({});
 
   const classes = useStyles();
 
@@ -26,7 +25,9 @@ export function VehicleTeaserController(props) {
 
   useEffect(() => {
     if (isVisible && props.token) {
-      getVehicle(props.vin, props.token)
+      api.getVehicle(props.vin, props.token)
+        .then(setVehicle)
+        .catch(() => setVehicle({}));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMissingData, isVisible, props.vin, props.token]);