personListingController.component.jsx

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;