import { useState } from 'react'; import '../assets/style/displayController.css'; import PersonListing from './personListing.component.jsx'; import PersonListingControls from './personListingControls.component.jsx'; const PersonListingController = ({ initialDelay = 250 }) => { const [ closed, setClosed ] = useState(false); const [ started, setStarted ] = useState(false); const [ delay, setDelay ] = useState(initialDelay) const startStop = () => setStarted( previousStarted => ! previousStarted); const closeComponent = () => { setClosed(previousClosed => ! previousClosed); setStarted(false); } const changeDelay = newDelay => setDelay(newDelay); const buildPersonListing = () => { if (closed) return null; else return (<PersonListing delay={delay} started={started} />); } const buildListingControls = () => { return (<PersonListingControls started={started} closed={closed} changeDelay={changeDelay} closeAction={closeComponent} startStop={startStop} />); } return ( <div> {buildListingControls()} {buildPersonListing()} </div> ); } export default PersonListingController;