CEC-2384 Vehicle details show associated fleets (#203)

src/components/App/__snapshots__/App.test.js.snap

@@ -6918,6 +6918,24 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                         class="MuiTouchRipple-root"
                       />
                     </button>
+                    <button
+                      aria-controls="tabpanel-6"
+                      aria-selected="false"
+                      class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                      id="tab-6"
+                      role="tab"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiTab-wrapper"
+                      >
+                        Fleets
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </button>
                   </div>
                   <span
                     class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -7089,6 +7107,13 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               id="tabpanel-5"
               role="tabpanel"
             />
+            <div
+              aria-labelledby="tab-6"
+              class="makeStyles-fullWidth-0"
+              hidden=""
+              id="tabpanel-6"
+              role="tabpanel"
+            />
           </div>
         </main>
       </main>

src/components/CANFilter/Table/index.jsx

@@ -53,6 +53,7 @@ const PAGE_SIZE = "CAN_FILTER_TABLE_PAGE_SIZE";
 
 const MainForm = ({ vin }) => {
   const classes = useStyles();
+  const [search, onSearch] = useState("");
   const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
@@ -68,6 +69,7 @@ const MainForm = ({ vin }) => {
         await getFilters(
           vin,
           {
+            search,
             limit: pageSize,
             offset: pageSize * pageIndex,
             order: `${orderBy} ${order}`,
@@ -80,7 +82,7 @@ const MainForm = ({ vin }) => {
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vin, token, pageIndex, pageSize, orderBy, order]);
+  }, [vin, token, pageIndex, pageSize, orderBy, order, search]);
 
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
@@ -166,7 +168,7 @@ const MainForm = ({ vin }) => {
           </Link>
         </Grid>
         <Grid item md={8} className={classes.textCenterAlign}>
-          <SearchField classes={classes} />
+          <SearchField classes={classes} onSearch={onSearch}/>
         </Grid>
       </Grid>
       <Table>

src/components/Cars/Status/FleetsTab.jsx

@@ -0,0 +1,140 @@
+import useStyles from "../../useStyles";
+import clsx from "clsx";
+import {Grid, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow, Typography} from "@material-ui/core";
+import React, {useEffect, useState} from "react";
+import {useVehicleContext, VehicleProvider} from "../../Contexts/VehicleContext";
+import SearchField from "../../Controls/SearchField";
+import {useLocalStorage} from "../../useLocalStorage";
+import {useStatusContext} from "../../Contexts/StatusContext";
+import {useUserContext} from "../../Contexts/UserContext";
+import {logger} from "../../../services/monitoring";
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import {Link} from "react-router-dom";
+
+const PAGE_SIZE = "VEHICLE_FLEETS_TABLE_PAGE_SIZE";
+
+const tableColumns = [
+  {
+    id: "fleet",
+    label: "CAN ID"
+  },
+];
+
+const MainForm = (props) => {
+  const classes = useStyles();
+  const {vin} = props;
+
+  const [search, onSearch] = useState("");
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [orderBy, setOrderBy] = useState("id");
+  const [order, setOrder] = useState("desc");
+  const {setMessage} = useStatusContext();
+  const {token: {idToken: {jwtToken: token}}} = useUserContext();
+  const {getFleets, fleets, totalFleets} = useVehicleContext();
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!vin || !token) return;
+        await getFleets(
+          vin,
+          {
+            search,
+            limit: pageSize,
+            offset: pageSize * pageIndex,
+            order: `${orderBy} ${order}`,
+          },
+          token
+        );
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vin, token, pageIndex, pageSize, orderBy, order, search]);
+
+  const handleChangePageIndex = (event, newIndex) => {
+    setPageIndex(newIndex);
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
+  const handleSort = (event, property) => {
+    try {
+      if (property === orderBy) {
+        if (order === "asc") {
+          setOrder("desc");
+        } else {
+          setOrder("asc");
+        }
+      } else {
+        setOrderBy(property);
+        setOrder("asc");
+      }
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6">Fleets</Typography>
+      <Grid container className={classes.textCenterAlign} spacing={2} justifyContent="center">
+        <Grid item md={3} className={classes.textCenterAlign}>
+          <SearchField classes={classes} onSearch={onSearch}/>
+        </Grid>
+      </Grid>
+      <Table style={{width:"auto"}}>
+        <TableHeaderSortable
+          classes={classes}
+          orderBy={orderBy}
+          order={order}
+          columnData={tableColumns}
+          onSortRequest={handleSort}
+        />
+        <TableBody>
+          {fleets.map((row) => (
+            <TableRow key={row} width="200px">
+              <TableCell align="center">
+                <Link to={`/fleet/${row}`}>{row}</Link>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, 100]}
+              colSpan={8}
+              count={totalFleets}
+              rowsPerPage={pageSize}
+              page={pageIndex}
+              SelectProps={{
+                inputProps: {"aria-label": "rows per page"},
+                native: true,
+              }}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+  )
+}
+
+const FleetsTab = (props) => {
+  return (
+    <VehicleProvider>
+      <MainForm {...props}/>
+    </VehicleProvider>
+  )
+}
+
+
+export default FleetsTab;

src/components/Cars/Status/FleetsTab.test.jsx

@@ -0,0 +1,47 @@
+jest.mock("../../Contexts/VehicleContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
+);
+
+import React from "react";
+import {render, waitFor} from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+
+import {StatusProvider} from "../../Contexts/StatusContext";
+import {VehicleProvider} from "../../Contexts/VehicleContext";
+import {setToken, UserProvider} from "../../Contexts/UserContext";
+import {TEST_AUTH_OBJECT} from "../../../utils/testing";
+import addSnapshotSerializer from "../../../utils/snapshot";
+import FleetsTab from "./FleetsTab";
+
+const renderFleetsTab = async () => {
+  const {container} = render(
+    <StatusProvider>
+      <UserProvider>
+        <VehicleProvider>
+          <BrowserRouter>
+            <FleetsTab vin="TESTVIN1234567890"/>
+          </BrowserRouter>
+        </VehicleProvider>
+      </UserProvider>
+    </StatusProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("FleetsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderFleetsTab();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Cars/Status/__snapshots__/FleetsTab.test.jsx.snap

@@ -0,0 +1,280 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FleetsTab Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-statusprovider"
+  >
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        data-testid="mocked-vehicleprovider"
+      >
+        <div
+          data-testid="mocked-vehicleprovider"
+        >
+          <div
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
+          >
+            <h6
+              class="MuiTypography-root MuiTypography-h6"
+            >
+              Fleets
+            </h6>
+            <div
+              class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-justify-content-xs-center"
+            >
+              <div
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-3"
+              >
+                <div
+                  class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+                    data-shrink="false"
+                    for="search"
+                  >
+                    Search
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                      id="search"
+                      type="text"
+                      value=""
+                    />
+                    <div
+                      class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                    >
+                      <button
+                        aria-label="search"
+                        class="MuiButtonBase-root MuiIconButton-root"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          class="MuiTouchRipple-root"
+                        />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <table
+              class="MuiTable-root"
+              style="width: auto;"
+            >
+              <thead
+                class="MuiTableHead-root"
+              >
+                <tr
+                  class="MuiTableRow-root MuiTableRow-head"
+                >
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      CAN ID
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root"
+              >
+                <tr
+                  class="MuiTableRow-root"
+                  width="200px"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/fleet/fleet1"
+                    >
+                      fleet1
+                    </a>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root"
+                  width="200px"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/fleet/fleet2"
+                    >
+                      fleet2
+                    </a>
+                  </td>
+                </tr>
+              </tbody>
+              <tfoot
+                class="MuiTableFooter-root"
+              >
+                <tr
+                  class="MuiTableRow-root MuiTableRow-footer"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
+                    colspan="8"
+                  >
+                    <div
+                      class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
+                    >
+                      <div
+                        class="MuiTablePagination-spacer"
+                      />
+                      <p
+                        class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                      >
+                        Rows per page:
+                      </p>
+                      <div
+                        class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
+                      >
+                        <select
+                          aria-label="rows per page"
+                          class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
+                        >
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="5"
+                          >
+                            5
+                          </option>
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="10"
+                          >
+                            10
+                          </option>
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="25"
+                          >
+                            25
+                          </option>
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="100"
+                          >
+                            100
+                          </option>
+                        </select>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
+                      <p
+                        class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                      >
+                        1-2 of 2
+                      </p>
+                      <div
+                        class="MuiTablePagination-actions"
+                      >
+                        <button
+                          aria-label="Previous page"
+                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                          disabled=""
+                          tabindex="-1"
+                          title="Previous page"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          aria-label="Next page"
+                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                          disabled=""
+                          tabindex="-1"
+                          title="Next page"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/Cars/Status/__snapshots__/index.test.jsx.snap

@@ -137,6 +137,24 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-6"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-6"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      Fleets
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
                   class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -255,6 +273,13 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-5"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-6"
+            class="makeStyles-fullWidth-0"
+            hidden=""
+            id="tabpanel-6"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Cars/Status/index.jsx

@@ -13,6 +13,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import CANSignalsTab from "./CANSignalsTab";
 import RemoteCommandsTab from "./RemoteCommandsTab";
+import FleetsTab from "./FleetsTab";
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -66,6 +67,8 @@ const CarStatus = () => {
           <Tab label="Digital Twin" {...tabProps(3)} />
           <Tab label="CAN Signals" {...tabProps(4)} />
           <Tab label="Remote Commands" {...tabProps(5)} />
+          <Tab label="Fleets" {...tabProps(6)} />
+
         </Tabs>
       </Box>
 
@@ -92,6 +95,10 @@ const CarStatus = () => {
       <TabPanel value={tabIndex} index={5} className={classes.fullWidth}>
         <RemoteCommandsTab vin={vin} />
       </TabPanel>
+
+      <TabPanel value={tabIndex} index={6} className={classes.fullWidth}>
+        <FleetsTab vin={vin} />
+      </TabPanel>
     </div>
   );
 };

src/components/Contexts/VehicleContext.jsx

@@ -31,6 +31,8 @@ export const VehicleProvider = ({ children }) => {
   const [vehicle, setVehicle] = useState({});
   const [vehicles, setVehicles] = useState([]);
   const [totalVehicles, setTotalVehicles] = useState(0);
+  const [fleets, setFleets] = useState([]);
+  const [totalFleets, setTotalFleets] = useState(0);
   const [models, setModels] = useState([]);
   const [years, setYears] = useState([]);
 
@@ -220,6 +222,25 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
+  const getFleets = async (vin, search, token) => {
+    try {
+      setBusy(true);
+      validateVIN(vin);
+
+      const result = await api.getFleets(vin, search, token);
+      if (result.error) {
+        setFleets([]);
+        throw new Error(`Get Fleets of vehicle`)
+      }
+      setFleets(result.data ?? []);
+      if (result.total) {
+        setTotalFleets(result.total);
+      }
+    } finally {
+      setBusy(false)
+    }
+  }
+
   return (
     <VehicleContext.Provider
       value={{
@@ -229,6 +250,8 @@ export const VehicleProvider = ({ children }) => {
         vehicle,
         vehicles,
         years,
+        fleets,
+        totalFleets,
         addVehicle,
         deleteVehicle,
         getConnections,
@@ -242,6 +265,7 @@ export const VehicleProvider = ({ children }) => {
         getVehicles,
         sendCommand,
         updateVehicle,
+        getFleets,
       }}
     >
       {children}

src/components/Contexts/VehicleContext.test.jsx

@@ -20,12 +20,57 @@ const checkVehiclesResult = (error, busy, vehicles) => {
   expect(screen.getByTestId("vehicles").innerHTML).toEqual(vehicles);
 };
 
+const checkFleetsResult = (error, busy, fleets) => {
+  checkBaseResults(error, busy);
+  expect(screen.getByTestId("fleets").innerHTML).toEqual(fleets);
+}
+
 const checkBaseResults = (error, busy) => {
   expect(screen.getByTestId("error").innerHTML).toEqual(error);
   expect(screen.getByTestId("busy").innerHTML).toEqual(busy);
 };
 
 describe("VehicleContext", () => {
+  describe("getFleets", () => {
+    beforeEach(() => {
+      const TestComp = () => {
+        const { busy, error, fleets, getFleets } = useVehicleContext();
+
+        return (
+          <>
+            <div data-testid="error">{error}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <div data-testid="fleets">{JSON.stringify(fleets)}</div>
+            <button
+              data-testid="getFleets"
+              onClick={() => getFleets("3C4PDCBG0ET127145")}
+            />
+          </>
+        );
+      };
+      render(
+        <VehicleProvider>
+          <TestComp />
+        </VehicleProvider>
+      );
+    });
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("Initial state", () => {
+      checkFleetsResult("", "false", "[]");
+    });
+
+    it("getFleets", async () => {
+      fireEvent.click(screen.getByTestId("getFleets"));
+      await waitFor(() =>
+        expect(screen.getByTestId("fleets").innerHTML).not.toBe("[]")
+      );
+      checkFleetsResult("", "false", JSON.stringify(["fleet1", "fleet2"]));
+    });
+  })
+
   describe("getVehicles", () => {
     beforeEach(() => {
       const TestComp = () => {

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -77,6 +77,8 @@ let vehicles = [];
 let models = ["Ocean", "PEAR"];
 let years = [2023, 2024];
 let totalVehicles = 0;
+let fleets = ["fleet1", "fleet2"];
+let totalFleets = 2;
 let error = null;
 
 export const VehicleProvider = ({ children }) => {
@@ -86,6 +88,8 @@ export const VehicleProvider = ({ children }) => {
 export const useVehicleContext = () => ({
   busy,
   models,
+  fleets,
+  totalFleets,
   totalVehicles,
   vehicle,
   vehicles,
@@ -141,6 +145,10 @@ export const useVehicleContext = () => ({
     command,
     parameters,
   })),
+  getFleets: jest.fn((vin, search,_token) => {return {
+    data: ["fleet1", "fleet2"],
+    total: 2,
+  }}),
 });
 
 export const setBusy = (val) => {

src/services/__mocks__/vehiclesAPI.js

@@ -89,6 +89,7 @@ const vehiclesAPI = {
   getVehicles: async () => {
     return { data };
   },
+  getFleets: async (vin) => {return { data: ["fleet1", "fleet2"]}},
   getYears: async () => {
     return {
       data: [2021, 2022],

src/services/vehiclesAPI.js

@@ -114,6 +114,19 @@ const vehiclesAPI = {
       .catch(errorHandler);
   },
 
+  getFleets: async (vin, search, token) => {
+    const u = addQueryParams(`${API_ENDPOINT}/vehicle/${vin}/fleets`, search)
+    return fetch(u, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler);
+  },
+
   getYears: async (token) =>
     fetch(`${API_ENDPOINT}/vehicleyears`, {
       method: "GET",