44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
import React, {useEffect,useState} from 'react'
|
|
import PropTypes from 'prop-types';
|
|
|
|
import RelationsMap from './map/relations-map';
|
|
import {getMap} from '../utils/entities';
|
|
import {createRelationsOfEntities} from '../utils/relations';
|
|
|
|
//destructure props
|
|
export default function RelationsMapComp({entities,relations}){
|
|
|
|
//store rltns
|
|
const [rltns,setRltns] = useState([]);
|
|
|
|
//on page load
|
|
//add dependency array, otherwise useEffect will not rerun
|
|
//TODO Study https://www.digitalocean.com/community/tutorials/how-to-handle-async-data-loading-lazy-loading-and-code-splitting-with-react
|
|
useEffect(()=>{
|
|
setRltns((rltns) => createRelationsOfEntities(entities,relations));
|
|
},[entities,relations]);
|
|
|
|
if(rltns.length===0){
|
|
return (
|
|
<>
|
|
<h1>Map</h1>
|
|
<h2>Relations Map</h2>
|
|
<p>RelationsMap loading...</p>
|
|
</>
|
|
);
|
|
}else{
|
|
return (
|
|
<>
|
|
<h1>Map</h1>
|
|
<h2>Relations Map</h2>
|
|
<RelationsMap relations={rltns}/>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
//TODO Study .isRequired!
|
|
RelationsMapComp.propTypes = {
|
|
entities: PropTypes.array.isRequired,
|
|
relations: PropTypes.array.isRequired
|
|
};
|