diff --git a/README.md b/README.md index b3ba450ea75a565f446da7e2dfc5f318bcf22f97..d8487ac9b75273935f68b3d7eb18e2715e582926 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,8 @@ où `tag` peut prendre comme valeur : voir `/src/components/person.component.jsx` * `v6` : il faut remonter l'état et inversion du flux voir `/src/components/delayButton.component.jsx` et `/src/components/personListingController.component.jsx` +* `v6.1` : restructuration des composants, suite de "placer l'état au plus haut" et de l'inversion du flux + voir `/src/components/personListingControls.component.jsx` et `/src/components/personListingController.component.jsx` Faire ```git checkout main``` pour revenir à la version finale. diff --git a/src/components/personListingController.component.jsx b/src/components/personListingController.component.jsx index ebee5e6b1e1288ab1d0a6347ec28a88ff62a28c9..935a81628fcc3759f05524c75e8f7cd03ddf6559 100644 --- a/src/components/personListingController.component.jsx +++ b/src/components/personListingController.component.jsx @@ -3,7 +3,7 @@ import { useState } from 'react'; import '../assets/style/displayController.css'; import PersonListing from './personListing.component.jsx'; -import DelayButton from './delayButton.component.jsx'; +import PersonListingControls from './personListingControls.component.jsx'; const PersonListingController = ({ initialDelay = 250 }) => { @@ -12,32 +12,37 @@ const PersonListingController = ({ initialDelay = 250 }) => { const [ delay, setDelay ] = useState(initialDelay) const startStop = () => setStarted( previousStarted => ! previousStarted); - const closeComponent = () => setClosed(true); + const closeComponent = () => { + setClosed(previousClosed => ! previousClosed); + setStarted(false); + } const changeDelay = newDelay => setDelay(newDelay); - const buildDelayButtons = () => { - const delayButtons = [250, 1000, 3000].map(delay => <DelayButton delay={delay} - changeDelay={changeDelay} - key={delay} />); - return delayButtons; + 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} + />); } - if (closed) - return null; - // else return ( <div> - <div className = 'controller'> - <button onClick= { startStop }> - { started ? 'Stop' : 'Start'} - </button> - { buildDelayButtons() } - </div> - <PersonListing - delay = { delay } - started = { started } - /> + {buildListingControls()} + {buildPersonListing()} </div> ); diff --git a/src/components/personListingControls.component.jsx b/src/components/personListingControls.component.jsx new file mode 100644 index 0000000000000000000000000000000000000000..ed45586888fbc6c310ab57fc362b7c47d192b562 --- /dev/null +++ b/src/components/personListingControls.component.jsx @@ -0,0 +1,28 @@ +import '../assets/style/displayController.css'; + +import DelayButton from './delayButton.component.jsx'; + +const PersonListingControls = ( { started, closed, changeDelay, closeAction, startStop } ) => { + + const buildDelayButtons = () => { + const delayButtons = [250,1000,3000].map ( delay => <DelayButton delay = { delay } + changeDelay = { changeDelay } + key = { delay }/>); + return delayButtons; + } + + + return( + <div className = 'controller'> + <button onClick= { startStop }> + { started ? 'Stop' : 'Start' } + </button> + { buildDelayButtons() } + <button onClick= { closeAction }> + { closed ? 'Open' : 'Close' } + </button> + </div> + ); +} + +export default PersonListingControls; \ No newline at end of file