restructuration composants : placer l'état au plus haut

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.
 

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>
         );
 

src/components/personListingControls.component.jsx

+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