feat(ui): add current number of train stations

This commit is contained in:
dancingCycle 2023-06-09 10:01:02 +02:00
parent 6581ab8877
commit 312951e0a7
2 changed files with 65 additions and 13 deletions

View File

@ -1,24 +1,35 @@
import React, { useState, useEffect } from 'react'
import '../style.css';
import {getBusStopsCount} from '../utils/api';
import {getBusStopCount, getTrainStationCount} from '../utils/api';
export default function Home(){
const [busStopsCount, setBusStopsCount] = useState('loading...');
const [busStopCount, setBusStopCount] = useState('loading...');
const [trainStationCount, setTrainStationCount] = useState('loading...');
/*fetch busStopsCount in a JavaScript function*/
const fetchCount = async () => {
const fetchBusStopCount = async () => {
try {
const rsp=await getBusStopsCount();
setBusStopsCount((busStopsCount) => rsp);
const rsp=await getBusStopCount();
setBusStopCount((busStopCount) => rsp);
} catch (err) {
console.error('err.message: ' + err.message);
setBusStopsCount((busStopsCount) => 'loading...');
setBusStopCount((busStopCount) => 'loading...');
}
};
const fetchTrainStationCount = async () => {
try {
const rsp=await getTrainStationCount();
setTrainStationCount((trainStationCount) => rsp);
} catch (err) {
console.error('err.message: ' + err.message);
setTrainStationCount((trainStationCount) => 'loading...');
}
};
useEffect(() => {
/*effect goes here*/
fetchCount();
fetchBusStopCount();
fetchTrainStationCount();
}, []);
return (
@ -28,7 +39,10 @@ export default function Home(){
Wellcome to the RVB Display!
</h2>
<h3>
Current number of bus stops in the RVB area: {busStopsCount}
Current number of bus stops in the RVB area: {busStopCount}
</h3>
<h3>
Current number of train stations in the RVB area: {trainStationCount}
</h3>
</>
);

View File

@ -5,18 +5,56 @@ import config from './config';
/*
*get count of bus stops
*/
export async function getBusStopsCount(){
//console.log('stops:getBusStopsCount() Start...');
export async function getBusStopCount(){
//console.log('getBusStopCount() Start...');
let count=null;
try {
//TODO handle errors: https://www.valentinog.com/blog/await-react/
const address = `${config.API}bus-stops/count`;
const address = `${config.API}bus-stop/count`;
const rsp = await axios.get(address);
count = rsp.data[0][0];
} catch (err) {
console.error('err.message: ' + err.message);
}
//console.log('stops:getBusStopsCount() Done.');
//console.log('getBusStopCount() Done.');
return count;
};
/*
*get count of train stations
*/
export async function getTrainStationCount(){
//console.log('getTrainStationCount() Start...');
let count=null;
try {
//TODO handle errors: https://www.valentinog.com/blog/await-react/
const address = `${config.API}train-station/count`;
const rsp = await axios.get(address);
count = rsp.data[0][0];
} catch (err) {
console.error('err.message: ' + err.message);
}
//console.log('getTrainStationCount() Done.');
return count;
};
/*
*get all train stations
*/
export async function getTrainStationInfo(){
//console.log('getTrainStationInfo() Start...');
let count=null;
try {
//TODO handle errors: https://www.valentinog.com/blog/await-react/
const address = `${config.API}train-station/count`;
const rsp = await axios.get(address);
console.log('getTrainStationInfo() rsp.length: ' +rsp.length);
} catch (err) {
console.error('err.message: ' + err.message);
}
//console.log('getTrainStationInfo() Done.');
return null;
};