feat(ui): add Number of park and ride (P&R) stations in the RVB area

ui/app/app.jsx

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
 
 import Home from './pages/home';
 import TrainStation from './pages/train-station';
+import ParkRide from './pages/park-ride';
 
 export default function App(){
     return (
@@ -10,6 +11,7 @@ export default function App(){
 	    <Router>
 		<Routes>
 		    <Route path='/' element={<Home/>}/>
+		    <Route path='/park-ride' element={<ParkRide/>}/>
 		    <Route path='/train-station' element={<TrainStation/>}/>
 		</Routes>
 	    </Router>

ui/app/components/fetch.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import axios from 'axios';
 
 import config from '../utils/config';
@@ -6,16 +7,18 @@ import Map from './map';
 import Table from './table';
 
 /*destructure props object*/
-export default function Fetch () {
+export default function Fetch ({route}) {
 
     const [array, setArray] = useState([]);
 
     /*fetch array in a JavaScript function*/
     const fetch = async () => {
-        try {
+	if(config && route){
+            try {
+		//console.log("Fetch:fetch(): route: " + route);
             /*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
             //fetch data only if user selection is unequal default value
-            const address = `${config.API}train-station/info`;
+            const address = `${config.API}${route}`;
 	    //console.log("Fetch:fetch(): address: "+address);
             const res = await axios.get(address);
 	    //console.log("Fetch:fetch(): res.length: "+res.data.length);
@@ -24,6 +27,9 @@ export default function Fetch () {
             console.error('err.message: ' + err.message);
 	    setArray((array) => []);
         }
+	}else{
+            console.error('config or route NOT available');
+	}
     };
 
     useEffect(() => {
@@ -54,3 +60,6 @@ export default function Fetch () {
 	);
     }
 };
+Fetch.propTypes = {
+    route: PropTypes.string
+};

ui/app/pages/home.jsx

@@ -2,9 +2,10 @@ import React, { useState, useEffect } from 'react'
 import { Link} from 'react-router-dom';
 
 import '../style.css';
-import {getBusStopCount, getTrainStationCount} from '../utils/api';
+import {getBusStopCount, getParkRideCount, getTrainStationCount} from '../utils/api';
 export default function Home(){
     const [busStopCount, setBusStopCount] = useState('loading...');
+    const [parkRideCount, setParkRideCount] = useState('loading...');
     const [trainStationCount, setTrainStationCount] = useState('loading...');
 
     const fetchBusStopCount = async () => {
@@ -17,6 +18,16 @@ export default function Home(){
         }
     };
 
+    const fetchParkRideCount = async () => {
+        try {
+	    const rsp=await getParkRideCount();
+	    setParkRideCount((parkRideCount) => rsp);
+        } catch (err) {
+            console.error('err.message: ' + err.message);
+	    setParkRideCount((parkRideCount) => 'loading...');
+        }
+    };
+
     const fetchTrainStationCount = async () => {
         try {
 	    const rsp=await getTrainStationCount();
@@ -30,6 +41,7 @@ export default function Home(){
     useEffect(() => {
 	/*effect goes here*/
 	fetchBusStopCount();
+	fetchParkRideCount();
 	fetchTrainStationCount();
     }, []);
 
@@ -44,17 +56,19 @@ export default function Home(){
 	    </Link>
 	    <h1>RVB Display</h1>
 	    <h2>Wellcome to the RVB Display!</h2>
-	    <h3>
-		Current number of bus stops in the RVB area: {busStopCount}
-	    </h3>
-	    <h3>
-		Current number of train stations in the RVB area: {trainStationCount}
-		<Link
-		    to={'/train-station'}
-		>
-		    <button>Map of Train Stations</button>
-		</Link>
-	    </h3>
+	    <h3>Number of bus stops in the RVB area: {busStopCount}</h3>
+	    <h3>Number of train stations in the RVB area: {trainStationCount}</h3>
+	    <Link
+		to={'/train-station'}
+	    >
+		<button>Map of Train Stations</button>
+	    </Link>
+	    <h3>Number of park and ride (P&R) stations in the RVB area: {parkRideCount}</h3>
+	    <Link
+		to={'/park-ride'}
+	    >
+		<button>Map of P&R Stations</button>
+	    </Link>
 	</>
     );
 }

ui/app/pages/park-ride.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Link} from 'react-router-dom';
+
+import Fetch from '../components/fetch';
+
+export default function ParkRide() {
+    return(
+	<>
+	    <Link
+	    to='/'
+	    >
+		<button>
+		    Home
+		</button>
+	    </Link>
+	    <h1>RVB Display</h1>
+            <Fetch
+		route='park-ride/info'
+	    />
+	</>
+    );
+};

ui/app/pages/train-station.jsx

@@ -14,7 +14,9 @@ export default function TrainStation() {
 		</button>
 	    </Link>
 	    <h1>RVB Display</h1>
-            <Fetch/>
+            <Fetch
+		route='train-station/info'
+	    />
 	</>
     );
 };

ui/app/utils/api.js

@@ -21,6 +21,25 @@ export async function getBusStopCount(){
     return count;
 };
 
+/*
+ *get count of park and ride (P&R)
+ */
+export async function getParkRideCount(){
+    //console.log('getParkRideCount() Start...');
+
+    let count=null;
+    try {
+	//TODO handle errors: https://www.valentinog.com/blog/await-react/
+	const address = `${config.API}park-ride/count`;
+	const rsp = await axios.get(address);
+	count = rsp.data[0][0];
+    } catch (err) {
+        console.error('err.message: ' + err.message);
+    }
+    //console.log('getParkRideCount() Done.');
+    return count;
+};
+
 /*
  *get count of train stations
  */