diff --git a/README.md b/README.md index 95040d5bcc6e854fe2067c7883fc1f104e567023..b3ba450ea75a565f446da7e2dfc5f318bcf22f97 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,7 @@ Ce dépôt contient le code utilisé en exemple dans le cours [https://www.fil.u Plusieurs versions progressives du dépôt pour accompagner le cours. + ## Mise en place * récupérer le dépôt * installer les paquets *Node.js* : @@ -60,6 +61,8 @@ où `tag` peut prendre comme valeur : voir `/src/components/person.component.jsx` * `v5.9` : mise en oeuvre de la fonction de nettoyage du `useEffect`, appel à chaque exécution du hook 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` Faire ```git checkout main``` pour revenir à la version finale. diff --git a/src/assets/style/changedelay.css b/src/assets/style/changedelay.css new file mode 100644 index 0000000000000000000000000000000000000000..c207801e580c92f6a8d1d0aab17b69a5ccd5dda1 --- /dev/null +++ b/src/assets/style/changedelay.css @@ -0,0 +1,10 @@ +button.changedelay { + border : solid thin #888; + border-radius : 6px; +} + +button.changedelay:hover { + background-color : #888; + color : white; + border : solid thin #888; +} diff --git a/src/components/delayButton.component.jsx b/src/components/delayButton.component.jsx new file mode 100644 index 0000000000000000000000000000000000000000..d0ba6e33b384bdb4a801cbc83ac64209e1afe525 --- /dev/null +++ b/src/components/delayButton.component.jsx @@ -0,0 +1,17 @@ +import '../assets/style/changedelay.css'; + +const delayText = 'délai'; + +const DelayButton = ( { delay, changeDelay }) => { + + const handleClick = () => changeDelay(delay); + + return( + <button className="changedelay" + onClick= { handleClick }> + { delayText } = { delay } + </button> + ); +} + +export default DelayButton; \ No newline at end of file diff --git a/src/components/person.component.jsx b/src/components/person.component.jsx index 5ff4dcda831ec615e2adeac866ae505ce84588a8..f588ba581e3c3959befc67329087469e65f7d746 100644 --- a/src/components/person.component.jsx +++ b/src/components/person.component.jsx @@ -14,10 +14,7 @@ useEffect( () => { console.log('timer is running'); }, delay); } - return () => { - console.log(`cleanup ${delay}`); - clearInterval( timer.current ); - } + return () => clearInterval( timer.current ); }, [started, delay] ); return ( diff --git a/src/components/personListingController.component.jsx b/src/components/personListingController.component.jsx index 8f87898bf826389b043f0cd7f76b83bce0d2478d..ebee5e6b1e1288ab1d0a6347ec28a88ff62a28c9 100644 --- a/src/components/personListingController.component.jsx +++ b/src/components/personListingController.component.jsx @@ -1,8 +1,10 @@ import { useState } from 'react'; -import PersonListing from './personListing.component.jsx'; import '../assets/style/displayController.css'; +import PersonListing from './personListing.component.jsx'; +import DelayButton from './delayButton.component.jsx'; + const PersonListingController = ({ initialDelay = 250 }) => { const [ closed, setClosed ] = useState(false); @@ -14,6 +16,13 @@ const PersonListingController = ({ initialDelay = 250 }) => { const changeDelay = newDelay => setDelay(newDelay); + const buildDelayButtons = () => { + const delayButtons = [250, 1000, 3000].map(delay => <DelayButton delay={delay} + changeDelay={changeDelay} + key={delay} />); + return delayButtons; + } + if (closed) return null; // else @@ -23,16 +32,14 @@ const PersonListingController = ({ initialDelay = 250 }) => { <button onClick= { startStop }> { started ? 'Stop' : 'Start'} </button> - <button onClick= { () => changeDelay(250) }>Delay = 250</button> - <button onClick= { () => changeDelay(1000) }>Delay = 1000</button> - <button onClick= { closeComponent }>Close</button> + { buildDelayButtons() } </div> <PersonListing delay = { delay } started = { started } /> </div> - ); + ); }