From 89282974882bf6c08a736a47824a20bc6bfccf87 Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Tue, 22 Jun 2021 15:00:21 +0200
Subject: [PATCH] Elements to manage vehicles.
---
src/api/getVehicleList.ts | 10 +++++++++
src/api/routes.ts | 1 +
src/components/Dashboard/Dashboard.tsx | 2 ++
src/components/Dashboard/HomePage/NavBar.tsx | 13 +++++++++++
.../Dashboard/VehiclePage/InsertVeicle.tsx | 7 ++++++
.../Dashboard/VehiclePage/VehicleList.tsx | 17 ++++++++++++++
.../Dashboard/VehiclePage/VehiclePage.tsx | 8 +++++++
src/hooks/useVehicle.ts | 22 +++++++++++++++++++
src/types/VehicleType.ts | 7 ++++++
9 files changed, 87 insertions(+)
create mode 100644 src/api/getVehicleList.ts
create mode 100644 src/components/Dashboard/VehiclePage/InsertVeicle.tsx
create mode 100644 src/components/Dashboard/VehiclePage/VehicleList.tsx
create mode 100644 src/components/Dashboard/VehiclePage/VehiclePage.tsx
create mode 100644 src/hooks/useVehicle.ts
create mode 100644 src/types/VehicleType.ts
diff --git a/src/api/getVehicleList.ts b/src/api/getVehicleList.ts
new file mode 100644
index 0000000..092bece
--- /dev/null
+++ b/src/api/getVehicleList.ts
@@ -0,0 +1,10 @@
+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);
diff --git a/src/api/routes.ts b/src/api/routes.ts
index cd70399..dbe9e68 100644
--- a/src/api/routes.ts
+++ b/src/api/routes.ts
@@ -9,6 +9,7 @@ export enum AuthRoutes {
profile = '/profile',
reservation = '/reservation',
choseRole = '/choseRole',
+ veicle = '/veicle',
}
/**
diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index 4453cc5..3d66bfb 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/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} />
</>
);
};
diff --git a/src/components/Dashboard/HomePage/NavBar.tsx b/src/components/Dashboard/HomePage/NavBar.tsx
index 4d8f56e..49bd2ea 100644
--- a/src/components/Dashboard/HomePage/NavBar.tsx
+++ b/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>
diff --git a/src/components/Dashboard/VehiclePage/InsertVeicle.tsx b/src/components/Dashboard/VehiclePage/InsertVeicle.tsx
new file mode 100644
index 0000000..8e7d378
--- /dev/null
+++ b/src/components/Dashboard/VehiclePage/InsertVeicle.tsx
@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+
+export const InsertVeicle: FC = () => (
+ <div data-testid="NotFound">
+ <h1>Page not found</h1>
+ </div>
+);
diff --git a/src/components/Dashboard/VehiclePage/VehicleList.tsx b/src/components/Dashboard/VehiclePage/VehicleList.tsx
new file mode 100644
index 0000000..479a6c4
--- /dev/null
+++ b/src/components/Dashboard/VehiclePage/VehicleList.tsx
@@ -0,0 +1,17 @@
+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>
+ );
+};
diff --git a/src/components/Dashboard/VehiclePage/VehiclePage.tsx b/src/components/Dashboard/VehiclePage/VehiclePage.tsx
new file mode 100644
index 0000000..3e6255f
--- /dev/null
+++ b/src/components/Dashboard/VehiclePage/VehiclePage.tsx
@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+import { VehicleList } from './VehicleList';
+
+export const VeiclePage: FC = () => (
+ <div data-testid="VehiclePage">
+ <VehicleList />
+ </div>
+);
diff --git a/src/hooks/useVehicle.ts b/src/hooks/useVehicle.ts
new file mode 100644
index 0000000..1261dc3
--- /dev/null
+++ b/src/hooks/useVehicle.ts
@@ -0,0 +1,22 @@
+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;
+};
diff --git a/src/types/VehicleType.ts b/src/types/VehicleType.ts
new file mode 100644
index 0000000..01ebf84
--- /dev/null
+++ b/src/types/VehicleType.ts
@@ -0,0 +1,7 @@
+export type VehicleType = {
+ owner: null;
+ user: null;
+ plateNumber: string;
+ carModel: string;
+ wheelchair: boolean;
+};
--
GitLab