Skip to content
Snippets Groups Projects
Commit 33aff202 authored by Jean-Christophe's avatar Jean-Christophe
Browse files

restructuration composants : placer l'état au plus haut

parent fca23bbe
Branches
Tags v6.1
No related merge requests found
...@@ -63,6 +63,8 @@ où `tag` peut prendre comme valeur : ...@@ -63,6 +63,8 @@ où `tag` peut prendre comme valeur :
voir `/src/components/person.component.jsx` voir `/src/components/person.component.jsx`
* `v6` : il faut remonter l'état et inversion du flux * `v6` : il faut remonter l'état et inversion du flux
voir `/src/components/delayButton.component.jsx` et `/src/components/personListingController.component.jsx` 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. Faire ```git checkout main``` pour revenir à la version finale.
......
...@@ -3,7 +3,7 @@ import { useState } from 'react'; ...@@ -3,7 +3,7 @@ import { useState } from 'react';
import '../assets/style/displayController.css'; import '../assets/style/displayController.css';
import PersonListing from './personListing.component.jsx'; import PersonListing from './personListing.component.jsx';
import DelayButton from './delayButton.component.jsx'; import PersonListingControls from './personListingControls.component.jsx';
const PersonListingController = ({ initialDelay = 250 }) => { const PersonListingController = ({ initialDelay = 250 }) => {
...@@ -12,32 +12,37 @@ const PersonListingController = ({ initialDelay = 250 }) => { ...@@ -12,32 +12,37 @@ const PersonListingController = ({ initialDelay = 250 }) => {
const [ delay, setDelay ] = useState(initialDelay) const [ delay, setDelay ] = useState(initialDelay)
const startStop = () => setStarted( previousStarted => ! previousStarted); const startStop = () => setStarted( previousStarted => ! previousStarted);
const closeComponent = () => setClosed(true); const closeComponent = () => {
setClosed(previousClosed => ! previousClosed);
setStarted(false);
}
const changeDelay = newDelay => setDelay(newDelay); const changeDelay = newDelay => setDelay(newDelay);
const buildDelayButtons = () => { const buildPersonListing = () => {
const delayButtons = [250, 1000, 3000].map(delay => <DelayButton delay={delay} if (closed)
return null;
else
return (<PersonListing
delay={delay}
started={started}
/>);
}
const buildListingControls = () => {
return (<PersonListingControls
started={started}
closed={closed}
changeDelay={changeDelay} changeDelay={changeDelay}
key={delay} />); closeAction={closeComponent}
return delayButtons; startStop={startStop}
/>);
} }
if (closed)
return null;
// else
return ( return (
<div> <div>
<div className = 'controller'> {buildListingControls()}
<button onClick= { startStop }> {buildPersonListing()}
{ started ? 'Stop' : 'Start'}
</button>
{ buildDelayButtons() }
</div>
<PersonListing
delay = { delay }
started = { started }
/>
</div> </div>
); );
......
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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment