From 1a7f87e4ebb33f6e6a1f663ab34f565a108b526a Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Mon, 18 Feb 2019 16:51:12 +0100
Subject: [PATCH] =?UTF-8?q?R=C3=A9pare=20la=20page=20couleur=20sur=20embau?=
 =?UTF-8?q?che.beta.gouv.fr?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/Provider.js                            |  2 --
 source/components/utils/SetCssColour.js       |  3 +--
 source/components/utils/withColours.js        | 20 +++++++++++-----
 .../embauche.gouv.fr/pages/ColorPicker.js     | 15 ++++++++----
 .../sites/embauche.gouv.fr/pages/Couleur.js   | 23 ++++++++++---------
 5 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/source/Provider.js b/source/Provider.js
index f648f021b..c57878f31 100644
--- a/source/Provider.js
+++ b/source/Provider.js
@@ -1,4 +1,3 @@
-import SetCSSColour from 'Components/utils/SetCssColour'
 import { ThemeColoursProvider } from 'Components/utils/withColours'
 import { SitePathProvider } from 'Components/utils/withSitePaths'
 import { TrackerProvider } from 'Components/utils/withTracker'
@@ -69,7 +68,6 @@ export default class Provider extends PureComponent {
 				<ThemeColoursProvider colour={getIframeOption('couleur')}>
 					<TrackerProvider value={this.props.tracker}>
 						<SitePathProvider value={this.props.sitePaths}>
-							<SetCSSColour />
 							<I18nextProvider i18n={i18next}>
 								<Router history={this.history}>
 									<>{this.props.children}</>
diff --git a/source/components/utils/SetCssColour.js b/source/components/utils/SetCssColour.js
index cb33e329c..1d248bb1f 100644
--- a/source/components/utils/SetCssColour.js
+++ b/source/components/utils/SetCssColour.js
@@ -1,5 +1,4 @@
 import { Component } from 'react'
-import withColours from './withColours'
 
 class SetCSSColour extends Component {
 	updateCSSColour = () => {
@@ -19,4 +18,4 @@ class SetCSSColour extends Component {
 	}
 }
 
-export default withColours(SetCSSColour)
+export default SetCSSColour
diff --git a/source/components/utils/withColours.js b/source/components/utils/withColours.js
index 6b69b5cae..ce626f746 100644
--- a/source/components/utils/withColours.js
+++ b/source/components/utils/withColours.js
@@ -1,9 +1,8 @@
 /* @flow */
 
 import convert from 'color-convert'
+import SetCssColour from 'Components/utils/SetCssColour'
 import React, { Component, createContext } from 'react'
-import type { ComponentType } from 'react'
-
 export type ThemeColours = {
 	colour: string,
 	textColour: string,
@@ -92,11 +91,20 @@ const ThemeColoursContext: React$Context<ThemeColours> = createContext(
 )
 
 type ProviderProps = {
-	colour: string
+	colour: string,
+	children: React$Node
 }
-export const ThemeColoursProvider = ({ colour, ...props }: ProviderProps) => (
-	<ThemeColoursContext.Provider value={generateTheme(colour)} {...props} />
-)
+
+export function ThemeColoursProvider({ colour, children }: ProviderProps) {
+	const colours = generateTheme(colour)
+	return (
+		<ThemeColoursContext.Provider value={colours}>
+			<SetCssColour colours={colours} />
+			{children}
+		</ThemeColoursContext.Provider>
+	)
+}
+
 export default function withThemeColours<Props: { colours: ThemeColours }>(
 	WrappedComponent: React$ComponentType<Props>
 ): React$ComponentType<$Diff<Props, { colours: ThemeColours }>> {
diff --git a/source/sites/embauche.gouv.fr/pages/ColorPicker.js b/source/sites/embauche.gouv.fr/pages/ColorPicker.js
index 3f29ac9d2..122908b22 100644
--- a/source/sites/embauche.gouv.fr/pages/ColorPicker.js
+++ b/source/sites/embauche.gouv.fr/pages/ColorPicker.js
@@ -1,6 +1,13 @@
-import { SliderPicker } from 'react-color'
 import React from 'react'
+import { ChromePicker } from 'react-color'
 
-export default ({ couleur, changeColour }) => (
-	<SliderPicker color={couleur} onChangeComplete={changeColour} />
-)
+export default function ColorPicker({ colour, onChange }) {
+	return (
+		<div style={{ display: 'flex', justifyContent: 'center', margin: '1rem' }}>
+			<ChromePicker
+				color={colour}
+				onChangeComplete={color => onChange(color.hex)}
+			/>
+		</div>
+	)
+}
diff --git a/source/sites/embauche.gouv.fr/pages/Couleur.js b/source/sites/embauche.gouv.fr/pages/Couleur.js
index 79a3f553b..28a250b3c 100644
--- a/source/sites/embauche.gouv.fr/pages/Couleur.js
+++ b/source/sites/embauche.gouv.fr/pages/Couleur.js
@@ -1,9 +1,12 @@
-import React, { Suspense } from 'react'
-import Home from './Home'
+/* @flow */
 
+import withColours, { ThemeColoursProvider } from 'Components/utils/withColours'
+import React, { Suspense, useState } from 'react'
+import Home from './Home'
 let LazyColorPicker = React.lazy(() => import('./ColorPicker'))
 
-const Couleur = () => {
+const Couleur = ({ colours: { colour: defaultColour } }) => {
+	const [colour, setColour] = useState(defaultColour)
 	return (
 		<div className="ui__ container">
 			<p className="indication">
@@ -11,19 +14,17 @@ const Couleur = () => {
 				couleurs principales.
 			</p>
 			<Suspense fallback={<div>Chargement...</div>}>
-				<LazyColorPicker
-					color={this.props.couleur}
-					onChangeComplete={this.changeColour}
-				/>
+				<LazyColorPicker colour={colour} onChange={setColour} />
 			</Suspense>
 			<p className="indication">
 				La couleur sélectionnée, à déclarer comme attribut
-				&quot;data-couleur&quot; du script sur votre page est :{' '}
-				<b>{this.props.couleur}</b>
+				&quot;data-couleur&quot; du script sur votre page est : <b>{colour}</b>
 			</p>
-			<Home />
+			<ThemeColoursProvider colour={colour}>
+				<Home />
+			</ThemeColoursProvider>
 		</div>
 	)
 }
 
-export default Couleur
+export default withColours(Couleur)