From 33aff202a4da10c59515893faf87f713538eff7f Mon Sep 17 00:00:00 2001
From: Jean-Christophe <>
Date: Thu, 25 Jan 2024 15:00:23 +0100
Subject: [PATCH] =?UTF-8?q?restructuration=20composants=20:=20placer=20l'?=
=?UTF-8?q?=C3=A9tat=20au=20plus=20haut?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 2 +
.../personListingController.component.jsx | 45 ++++++++++---------
.../personListingControls.component.jsx | 28 ++++++++++++
3 files changed, 55 insertions(+), 20 deletions(-)
create mode 100644 src/components/personListingControls.component.jsx
diff --git a/README.md b/README.md
index b3ba450..d8487ac 100644
--- a/README.md
+++ b/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.
diff --git a/src/components/personListingController.component.jsx b/src/components/personListingController.component.jsx
index ebee5e6..935a816 100644
--- a/src/components/personListingController.component.jsx
+++ b/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>
);
diff --git a/src/components/personListingControls.component.jsx b/src/components/personListingControls.component.jsx
new file mode 100644
index 0000000..ed45586
--- /dev/null
+++ b/src/components/personListingControls.component.jsx
@@ -0,0 +1,28 @@
+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
--
GitLab