rgncycle-ui/app/pages/home.jsx

83 lines
1.9 KiB
JavaScript

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>
</>
);
}
}