rgncycle-ui/app/pages/home.jsx

import React, {useEffect,useState} from 'react'
import axios from 'axios';

import List from '../components/list';
import EntitiesMap from '../components/entities-map-comp';
import RelationsMap from '../components/relations-map-comp';
import DistancesMap from '../components/distances-map-comp';

import '../style.css';

export default function Home(){

    //store distances
    const [distances,setDistances]=useState([]);

    //store entites
    const [entities,setEntities]=useState([]);

    //store relations
    const [relations,setRelations]=useState([]);

    //get entities
    const fetchEntities = () => {
	axios.get('https://v1rgncy.api.swingbe.de/entities/info')
            .then((response) => {
		setEntities(response.data);
            })
            .catch((error) => {
		console.error('Home:fetchEntities() error: ' + error);
            });
    };

    //get distances
    const fetchDistances = () => {
	axios.get('https://v1rgncy.api.swingbe.de/distances/info')
            .then((response) => {
		setDistances(response.data);
            })
            .catch((error) => {
		console.error('Home:fetchDistances() error: ' + error);
            });
    };

    //get relations
    const fetchRelations = () => {
	axios.get('https://v1rgncy.api.swingbe.de/relations/info')
            .then((response) => {
		setRelations(response.data);
            })
            .catch((error) => {
		console.error('Home:fetchRelations() error: ' + error);
            });
    };

    //on page load
    useEffect(()=>{
	fetchDistances();
	fetchEntities();
	fetchRelations();
    },[]);

    if(entities.length>0){
	return (
	    <>
		<List entities={entities} />
		<EntitiesMap entities={entities} />
		<RelationsMap
		    entities={entities}
		    relations={relations}
		/>
		<DistancesMap distances={distances} />
	    </>
	);
    }else{
	return (
	    <>
		<h1>Home</h1>
		<p>Home loading...</p>
	    </>
	);
    }
}