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 '../style.css';
export default function Home(){

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

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

    //get entities
    const fetchEntities = () => {
	axios.get('http://83.223.94.182:65535/entities/info')
            .then((response) => {
		setEntities(response.data);
            })
            .catch((error) => {
		console.error('Home:fetchEntities() error: ' + error);
            });
    };

    //get relations
    const fetchRelations = () => {
	axios.get('http://83.223.94.182:65535/relations/info')
            .then((response) => {
		setRelations(response.data);
            })
            .catch((error) => {
		console.error('Home:fetchRelations() error: ' + error);
            });
    };

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

    //return
    return (
	<>
	    <h1>Home</h1>
	    <List entities={entities} />
	    <EntitiesMap entities={entities} />
	    <RelationsMap
		entities={entities}
		relations={relations}
	    />
	</>
    );
}