osm-rvb/ui/app/pages/home.jsx

import React, { useState, useEffect } from 'react'
import { Link} from 'react-router-dom';

import '../style.css';
import {getBusStopCount, getBikeRideCount, getParkRideCount, getTrainStationCount, getTaxiCount, getTicketMachineCount, getTicketOfficeCount} from '../utils/api';
export default function Home(){

    const [bikeRideCount, setBikeRideCount] = useState('loading...');
    const [busStopCount, setBusStopCount] = useState('loading...');
    const [parkRideCount, setParkRideCount] = useState('loading...');
    const [taxiCount, setTaxiCount] = useState('loading...');
    const [ticketMachineCount, setTicketMachineCount] = useState('loading...');
    const [ticketOfficeCount, setTicketOfficeCount] = useState('loading...');
    const [trainStationCount, setTrainStationCount] = useState('loading...');

    const fetchBikeRideCount = async () => {
        try {
	    const rsp=await getBikeRideCount();
	    setBikeRideCount((bikeRideCount) => rsp);
        } catch (err) {
            console.error('err.message: ' + err.message);
	    setBikeRideCount((bikeRideCount) => 'loading...');
        }
    };

    const fetchBusStopCount = async () => {
        try {
	    const rsp=await getBusStopCount();
	    setBusStopCount((busStopCount) => rsp);
        } catch (err) {
            console.error('err.message: ' + err.message);
	    setBusStopCount((busStopCount) => 'loading...');
        }
    };

    const fetchParkRideCount = async () => {
        try {
	    const rsp=await getParkRideCount();
	    setParkRideCount((parkRideCount) => rsp);
        } catch (err) {
            console.error('err.message: ' + err.message);
	    setParkRideCount((parkRideCount) => 'loading...');
        }
    };

    const fetchTaxiCount = async () => {
        try {
	    const rsp=await getTaxiCount();
	    setTaxiCount((taxiCount) => rsp);
        } catch (err) {
            console.error('err.message: ' + err.message);
	    setTaxiCount((taxiCount) => 'loading...');
        }
    };

    const fetchTicketMachineCount = async () => {
        try {
	    const rsp=await getTicketMachineCount();
	    setTicketMachineCount((ticketMachineCount) => rsp);
        } catch (err) {
            console.error('err.message: ' + err.message);
	    setTicketMachineCount((ticketMachineCount) => 'loading...');
        }
    };

    const fetchTicketOfficeCount = async () => {
        try {
	    const rsp=await getTicketOfficeCount();
	    setTicketOfficeCount((ticketOfficeCount) => rsp);
        } catch (err) {
            console.error('err.message: ' + err.message);
	    setTicketOfficeCount((ticketOfficeCount) => '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*/
	fetchBusStopCount();
	fetchBikeRideCount();
	fetchParkRideCount();
	fetchTicketMachineCount();
	fetchTicketOfficeCount();
	fetchTrainStationCount();
	fetchTaxiCount();
    }, []);

    return (
	<>
	    <Link
	    to='/'
	    >
		<button>
		    Home
		</button>
	    </Link>
	    <Link
	    to='https://www.swingbe.de/imprint/'
	    >
		<button>
		    Imprint
		</button>
	    </Link>
	    <Link
	    to='https://www.swingbe.de/privacy-policy/'
	    >
		<button>
		    Privacy Policy
		</button>
	    </Link>
	    <h1>RVB Display</h1>
	    <h2>Wellcome to the RVB Display!</h2>
	    <h3>Number of bike and ride (B&R) stations in the RVB area: {bikeRideCount}</h3>
	    <Link
		to={'/bike-ride'}
	    >
		<button>Details for B&R Stations</button>
	    </Link>
	    <h3>Number of bus stops in the RVB area: {busStopCount}</h3>
	    <h3>Number of park and ride (P&R) stations in the RVB area: {parkRideCount}</h3>
	    <Link
		to={'/park-ride'}
	    >
		<button>Details for P&R Stations</button>
	    </Link>
	    <h3>Number of taxi stations in the RVB area: {taxiCount}</h3>
	    <Link
		to={'/taxi'}
	    >
		<button>Details for Taxi Stations</button>
	    </Link>
	    <h3>Number of ticket machines in the RVB area: {ticketMachineCount}</h3>
	    <Link
		to={'/ticket-machine'}
	    >
		<button>Details for Ticket Machines</button>
	    </Link>
	    <h3>Number of ticket offices in the RVB area: {ticketOfficeCount}</h3>
	    <Link
		to={'/ticket-office'}
	    >
		<button>Details for Ticket Offices</button>
	    </Link>
	    <h3>Number of train stations in the RVB area: {trainStationCount}</h3>
	    <Link
		to={'/train-station'}
	    >
		<button>Details for Train Stations</button>
	    </Link>
	</>
    );
}