From fca23bbec8261b6193099196cff79ea354397c49 Mon Sep 17 00:00:00 2001 From: Jean-Christophe <> Date: Thu, 25 Jan 2024 14:36:30 +0100 Subject: [PATCH] =?UTF-8?q?placer=20l'=C3=A9tat=20au=20plus=20haut?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 +++ src/assets/style/changedelay.css | 10 ++++++++++ src/components/delayButton.component.jsx | 17 +++++++++++++++++ src/components/person.component.jsx | 5 +---- .../personListingController.component.jsx | 17 ++++++++++++----- 5 files changed, 43 insertions(+), 9 deletions(-) create mode 100644 src/assets/style/changedelay.css create mode 100644 src/components/delayButton.component.jsx diff --git a/README.md b/README.md index 95040d5..b3ba450 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 0000000..c207801 --- /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 0000000..d0ba6e3 --- /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 5ff4dcd..f588ba5 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 8f87898..ebee5e6 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> - ); + ); } -- GitLab