useEffect hook à la création du composant

README.md

@@ -49,7 +49,10 @@ où `tag` peut prendre comme valeur :
 * `v5.2` : modification  et état courant : mise en évidence du problème  
   voir `/src/components/star.jsx`
 * `v5.3` : modification  et état courant : utilisation d'une fonction en argument de `setOn` pour modifier l'état à partir de la valeur précédente    
-  voir `/src/components/star.component.jsx` (et `/src/components/person.component.jsx`)
+  voir `/src/components/star.jsx` (et `/src/components/person.component.jsx`)
+* `v5.5` : cycle de vie du composant : utilisation du hook `useEffect` pour agir au moment de la création du composant : juste après le premier rendu.  
+  voir `/src/components/personListing.jsx` 
+
 
 Faire ```git checkout main``` pour revenir à la version finale.
 

src/assets/style/personListing.css

+div.personListing {
+  border : dashed thin black ;
+  padding : 10px;
+  margin : 5px;
+}

src/components/person.component.jsx

 import { useState } from 'react';
 
 // import stysheet defining style specific to this component
-import './assets/style/person.css';
+import '../assets/style/person.css';
 
 /*
 * define a component that uses props, props is a javascript object
 */
-const Person = ( { name = 'Anonymous' , age , delay } ) => {
+const Person = ( { name = 'Anonymous', age, started, delay } ) => {
    
    const [ currentAge, setCurrentAge ] = useState(age);
 
-   // become older every delay ms
-   setInterval( () => setCurrentAge( previousCurrentAge => previousCurrentAge + 1 ), delay);
 
    return (
       <div className="person">Here is :

src/components/personListing.component.jsx

-import React from 'react';
+import { useState, useEffect } from 'react';
+
+import { mockFetch } from '../util/mockAPI.js';
+
+import '../assets/style/personListing.css';
 
 import Person from './person.component.jsx';
 
-/*
-* props.persons is an Array, here we assume with at least two elements
-* Here a list of components is built, but no "key" property is provided => /!\ pb, see console
-*/
-const PersonListing = ({ persons , delay }) => {
-      const personComponents = persons.map(person => <Person 
+
+const PersonListing =  props  => {
+   const  { started, delay } = props;
+
+   const [persons, setPersons ] = useState([]);
+
+
+   useEffect( () => {
+      console.log('component did mount');
+      const fetchData = async () => {
+         const data = await mockFetch('http://source.of.data/persons',1000);
+         setPersons( data );
+      }      
+      fetchData();            
+   }, []);
+
+   const personComponents = persons?.map(person => <Person 
                                                       {...person}
+                                                      {...props}                                                      
                                                       key={person.id}                                                       
-                                                         delay = { delay }
                                                    />);
+
    return (
-         <div>
-            People getting older every <span class="highlight">{delay}</span> seconds
+      <div className="personListing">
+         People getting older every {delay} seconds
          {personComponents}
       </div>
    );

src/components/personListingController.component.jsx

+import { useState } from 'react';
+
+import PersonListing from './personListing.component.jsx';
+
+const PersonListingController = ({ initialDelay = 250 }) => {
+
+    const [ closed, setClosed ] = useState(false);
+    const [ started, setStarted ] = useState(false);
+    const [ delay, setDelay ] = useState(initialDelay)
+
+    const startStop = () => setStarted( previousStarted => ! previousStarted);
+    const closeComponent = () => setClosed(true);
+
+    const changeDelay = newDelay => setDelay(newDelay);
+
+    if (closed)
+        return null;
+    // else
+    return (
+            <div>
+                <div className = 'controller'>
+                    <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>
+                </div>
+                <PersonListing
+                    delay = { delay }
+                    started = { started }
+                />
+            </div>
+            );
+
+}
+
+export default PersonListingController;
\ No newline at end of file

src/components/person_class.jsx

+import React from 'react';
+
+import '../style/person.css';
+
+/*
+ * define component as a class that extends React.component
+*/
+export default class Person extends React.Component {
+   constructor(props) {
+      super(props);
+   }
+
+   render() {
+      const { name , age } = this.props;
+
+      const view = <div className="person">Here is :
+         <div>name : <span>{ name }</span> </div>
+         <div>age  : <span>{ age }</span> </div>
+      </div>
+      return view;
+   }
+}

src/scripts/main.js

 import { createRoot } from 'react-dom/client';
 
-// import React component
-import Star from '../components/star.component.jsx'
+import PersonListingController from '../components/personListingController.component.jsx';
 
    const bootstrapReact = () => {
       const root = createRoot(document.getElementById('insertReactHere')); 
 
-      const component = <> 
-                           <Star /> <Star />  <Star />
-                        </>
+      const component = <PersonListingController />;
 
       root.render(component);
    }

src/util/mockAPI.js

+
+// used to "simulate" data fetching from some URL, here personsData is returned
+/*
+@param timetout simulate fetching delay, in ms, choose some high value (e.g. 2000) to highlight asynchronous operation
+*/
+import personsData from '../data/personsData.js';
+const mockFetch = async (mockURL, timeout = 10) => {
+   return await new Promise(resolve => setTimeout(() => {
+                                                         console.log(`simulate fetching data from ${mockURL}`);
+                                                         resolve(personsData);
+                                                        }, 
+                                                  timeout));        // simulate a 'timeout' duration for fetching operation
+}
+
+export { mockFetch };
\ No newline at end of file