Elements to manage vehicles.

src/api/getVehicleList.ts

+import axios from 'axios';
+import { VehicleType } from 'types/VehicleType';
+
+/**
+ * @async
+ * Perform GET to get a list of all the veicle.
+ * @returns a list of reservations.
+ */
+export const getVehicleList = async (): Promise<VehicleType[]> =>
+  axios(`/api/web/vehicles`).then((res) => res.data);

src/api/routes.ts

@@ -9,6 +9,7 @@ export enum AuthRoutes {
   profile = '/profile',
   reservation = '/reservation',
   choseRole = '/choseRole',
+  veicle = '/veicle',
 }
 
 /**

src/components/Dashboard/Dashboard.tsx

@@ -5,6 +5,7 @@ import { AuthRoutes } from 'api/routes';
 import { HomePage } from './HomePage/HomePage';
 import { ProfilePage } from './ProfilePage/ProfilePage';
 import { ReservationPage } from './ReservationPage/ReservationPage';
+import { VeiclePage } from './VehiclePage/VehiclePage';
 
 export const Dashboard: FC = () => {
   const { path } = useRouteMatch();
@@ -16,6 +17,7 @@ export const Dashboard: FC = () => {
         path={`${path}${AuthRoutes.reservation}`}
         component={ReservationPage}
       />
+      <Route path={`${path}${AuthRoutes.veicle}`} component={VeiclePage} />
     </>
   );
 };

src/components/Dashboard/HomePage/NavBar.tsx

@@ -3,6 +3,7 @@ import { Tabs, Tab, Grid, Hidden } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
 import ImportContactsIcon from '@material-ui/icons/ImportContacts';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import DriveEtaIcon from '@material-ui/icons/DriveEta';
 import { AuthRoutes } from 'api/routes';
 import { useHistory } from 'react-router-dom';
 import { navBarStyle } from './NavBar.style';
@@ -49,6 +50,12 @@ export const NavBar: FC = () => {
             className={classes.tabPan}
             icon={<AccountCircleIcon className={classes.tabIcon} />}
           />
+          <Tab
+            label="Veicles"
+            value={`${AuthRoutes.dashboard}${AuthRoutes.veicle}`}
+            className={classes.tabPan}
+            icon={<DriveEtaIcon className={classes.tabIcon} />}
+          />
         </Tabs>
       </Hidden>
 
@@ -79,6 +86,12 @@ export const NavBar: FC = () => {
             icon={<AccountCircleIcon className={classes.tabIconSmall} />}
             className={classes.tabPanSmall}
           />
+          <Tab
+            label=""
+            value={`${AuthRoutes.dashboard}${AuthRoutes.veicle}`}
+            icon={<DriveEtaIcon className={classes.tabIconSmall} />}
+            className={classes.tabPanSmall}
+          />
         </Tabs>
       </Hidden>
     </div>

src/components/Dashboard/VehiclePage/InsertVeicle.tsx

+import React, { FC } from 'react';
+
+export const InsertVeicle: FC = () => (
+  <div data-testid="NotFound">
+    <h1>Page not found</h1>
+  </div>
+);

src/components/Dashboard/VehiclePage/VehicleList.tsx

+import React, { FC } from 'react';
+import { useVehicle } from 'hooks/useVehicle';
+
+export const VehicleList: FC = () => {
+  const vehicles = useVehicle();
+  return (
+    <div data-testid="NotFound">
+      {vehicles.length !== 0 ? (
+        vehicles.map((vehicle, index) => (
+          <h1 key={vehicle.plateNumber}>🚗{vehicle.carModel}</h1>
+        ))
+      ) : (
+        <h1>No vehicles</h1>
+      )}
+    </div>
+  );
+};

src/components/Dashboard/VehiclePage/VehiclePage.tsx

+import React, { FC } from 'react';
+import { VehicleList } from './VehicleList';
+
+export const VeiclePage: FC = () => (
+  <div data-testid="VehiclePage">
+    <VehicleList />
+  </div>
+);

src/hooks/useVehicle.ts

+import { getVehicleList } from 'api/getVehicleList';
+import { useMemo, useState } from 'react';
+import { VehicleType } from 'types/VehicleType';
+
+export const useVehicle = (): VehicleType[] => {
+  const [vehicleList, setVehicleList] = useState<VehicleType[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  useMemo(() => {
+    let isMounted = true;
+
+    getVehicleList().then((list) => {
+      if (isMounted) {
+        setVehicleList(list);
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [isLoading]);
+  return vehicleList;
+};

src/types/VehicleType.ts

+export type VehicleType = {
+  owner: null;
+  user: null;
+  plateNumber: string;
+  carModel: string;
+  wheelchair: boolean;
+};