station-profile/app/pages/station-profile.jsx

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

import {get} from '../utils/request';

export default function StationProfile() {

    // Get the userId param from the URL.
    const { uic } = useParams();

    const [bsRry, setBsRry] = useState([]);
    const [bpRry, setBpRry] = useState([]);
    const [prRry, setPrRry] = useState([]);
    const [shopRry, setShopRry] = useState([]);
    const [taxiRry, setTaxiRry] = useState([]);
    const [vmRry, setVmRry] = useState([]);

    useEffect(() => {

	//console.log('StationProfile:useEffect() uic: ' + uic);

	/*
	const uicSttn = 8000050;
	console.log('StationProfile:useEffect() uicSttn: ' + uicSttn);
	const address = 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];node[uic_ref=' + uicSttn + '];';
	*/
	const address = 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];node[uic_ref=' + uic + '];';
	//console.log('StationProfile:useEffect() address: ' + address);

    	//get bus stop
	get(address + 'nwr[highway=bus_stop](around:200);out body center qt;')
	    .then(data => {
		setBsRry((bsRry) => data.elements);
	    });

    	//get B+R
	get(address + 'nwr[amenity=bicycle_parking](around:200);out body center qt;')
	    .then(data => {
		setBpRry((bpRry) => data.elements);
	    });

    	//get P+R
	get(address + 'nwr["park_ride"!="no"]["park_ride"](around:200);out body center qt;')
	    .then(data => {
		setPrRry((prRry => data.elements));
	    });

    	//get shop
	get(address + 'nwr[shop=ticket]["tickets:public_transport"!=no](around:500);out body center qt;')
	    .then(data => {
		setShopRry((shopRry) => data.elements);
	    });

    	//get taxi
	get(address + 'nwr[amenity=taxi](around:200);out body center qt;')
	    .then(data => {
		setTaxiRry((taxiRry) => data.elements);
	    });

	//get vending machine
	get(address + 'nwr[amenity=vending_machine][vending=public_transport_tickets](around:40);out body center qt;')
	    .then(data => {
		setVmRry((vmRry) => data.elements);
	    });

}, []);

    return (
	<>
	    <p>Bus Stop</p>
	    <ul>
		{
		    bsRry.map((value, index) => {
			return <li key={index}>
				   Name: {value.tags.name},
				   Operator: {value.tags.operator},
				   Network: {value.tags.network},
				   Description: {value.tags.description}
			       </li>;
		    })
		}
	    </ul>
	    <p>B+R</p>
	    <ul>
		{
		    bpRry.map((value, index) => {
			return <li key={index}>
				   Name: {value.tags.name},
				   Capacity: {value.tags.capacity},
				   Covered: {value.tags.covered},
				   Fee: {value.tags.fee},
				   Operator: {value.tags.operator}
			       </li>;
		    })
		}
	    </ul>
	    <p>P+R</p>
	    <ul>
		{
		    prRry.map((value, index) => {
			return <li key={index}>
				   Name: {value.tags.name},
				   Capacity: {value.tags.capacity},
				   Fee: {value.tags.fee},
				   Website: <a href={value.tags.website}>
						{value.tags.website}
					    </a>
			       </li>;
		    })
		}
	    </ul>
	    <p>Ticket Shop</p>
	    <ul>
		{
		    shopRry.map((value, index) => {
			return <li key={index}>
				   Name: {value.tags.name},
				   Opening Hours: {value.tags.opening_hours}
			       </li>;
		    })
		}
	    </ul>
	    <p>Taxi Stop</p>
	    <ul>
		{
		    taxiRry.map((value, index) => {
			return <li key={index}>
				   Name: {value.tags.name}
			       </li>;
		    })
		}
	    </ul>
	    <p>Vending Machine</p>
	    <ul>
		{
		    vmRry.map((value, index) => {
			return <li key={index}>
				   Name: {value.tags.name},
				   Brand: {value.tags.brand},
				   Operator: {value.tags.operator}
			       </li>;
		    })
		}
	    </ul>
	</>
    );
}