placer l'état au plus haut

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.
 

src/assets/style/changedelay.css

+button.changedelay {
+  border : solid thin #888;
+  border-radius : 6px;
+}
+
+button.changedelay:hover {
+  background-color : #888;
+  color : white;
+  border : solid thin #888;
+}

src/components/delayButton.component.jsx

+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

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 (

src/components/personListingController.component.jsx

 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,9 +32,7 @@ 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 }