From 354c8260a176086fb3912ace00db5ac73e702062 Mon Sep 17 00:00:00 2001
From: Muhammad Azeez <muhammad.azeez@dit.gov.krd>
Date: Sun, 10 Jan 2021 14:29:31 +0300
Subject: [PATCH] the react client now automatically fetches data

---
 React/src/pages/home.js          | 7 ++++++-
 React/src/services/apiService.js | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/React/src/pages/home.js b/React/src/pages/home.js
index 1aca03a..8dfe025 100644
--- a/React/src/pages/home.js
+++ b/React/src/pages/home.js
@@ -3,6 +3,7 @@ import { signoutRedirect } from '../services/userService'
 import { useSelector } from 'react-redux'
 import * as apiService from '../services/apiService'
 import { prettifyJson } from '../utils/jsonUtils'
+import { useEffect } from 'react'
 
 function Home() {
   const user = useSelector(state => state.auth.user)
@@ -11,6 +12,10 @@ function Home() {
   const [color, setColor] = useState('White')
   const [type, setType] = useState(1)
 
+  useEffect(() => {
+    getVehicles();
+  }, []);
+
   const [vehicleData, setVehicleData] = useState(null)
   function signOut() {
     signoutRedirect()
@@ -78,7 +83,7 @@ function Home() {
 {
   vehicleData ?
     <ul>
-      { vehicleData.map(v => (<li>{v.color} {v.model} ({v.licensePlate}) - {getType(v.type)}</li>)) }
+      { vehicleData.map(v => (<li key={v.id}>{v.color} {v.model} ({v.licensePlate}) - {getType(v.type)}</li>)) }
     </ul>
       :
       <p>No vehicles yet :(</p>
diff --git a/React/src/services/apiService.js b/React/src/services/apiService.js
index e1d6e1d..b5cb213 100644
--- a/React/src/services/apiService.js
+++ b/React/src/services/apiService.js
@@ -1,13 +1,13 @@
 import axios from 'axios'
 
 async function getVehiclesFromApi(access_token) {
-  const response = await axios.get(`https://localhost:5001/api/Vehicles`, { headers: { 'Authorization': `Bearer ${access_token}` } });
+  const response = await axios.get(`https://localhost:6001/api/Vehicles`, { headers: { 'Authorization': `Bearer ${access_token}` } });
   return response.data;
 }
 
 async function registerVehicle(vehicle, access_token) {
   console.log(vehicle);
-  const response = await axios.post(`https://localhost:5001/api/Vehicles`, vehicle, { headers: { 'Authorization': `Bearer ${access_token}` } });
+  const response = await axios.post(`https://localhost:6001/api/Vehicles`, vehicle, { headers: { 'Authorization': `Bearer ${access_token}` } });
   return response.data;
 }