✨ Formattage du code du formulaire de retour

Et ajout d'un log utile pour les développeurs

source/components/Satisfaction.js

@@ -1,17 +1,15 @@
-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import HoverDecorator from './HoverDecorator'
 import 'whatwg-fetch'
-import {connect} from 'react-redux'
+import { connect } from 'react-redux'
 import './Satisfaction.css'
 import classNames from 'classnames'
 
-import ReactPiwik from './Tracker';
+import ReactPiwik from './Tracker'
 
-@connect(
-	state => ({
-		sessionId: state.sessionId
-	})
-)
+@connect(state => ({
+	sessionId: state.sessionId
+}))
 export default class Satisfaction extends Component {
 	state = {
 		answer: false,
@@ -20,7 +18,7 @@ export default class Satisfaction extends Component {
 		messageSent: false
 	}
 	sendSatisfaction(answer) {
-		let {message, address} = this.state
+		let { message, address } = this.state
 		if (document.location.hostname != 'localhost') {
 			fetch('https://embauche.beta.gouv.fr/retour-syso', {
 				method: 'POST',
@@ -30,30 +28,34 @@ export default class Satisfaction extends Component {
 				body: JSON.stringify({
 					fields: {
 						satisfait: answer || '',
-						message: (message || '')+(address ? '(envoyé par '+address+')' : ''),
+						message:
+							(message || '') + (address ? '(envoyé par ' + address + ')' : ''),
 						date: new Date().toISOString(),
 						id: this.props.sessionId,
 						url: document.location.href.toString()
 					}
 				})
 			}).then(response => {
+				console.log(response)
 				if (!response.ok)
 					return console.log('Erreur dans la récolte de la satisfaction') //eslint-disable-line no-console
-				if (message)
-					return this.setState({messageSent: true})
-				this.setState({answer})
+				if (message) return this.setState({ messageSent: true })
+				this.setState({ answer })
 			})
 		} else {
-			if (message) this.setState({messageSent: true})
-			this.setState({answer})
+			console.log('!!!!!!!! Les retours ne sont pas envoyés en localhost !')
+			if (message) this.setState({ messageSent: true })
+			this.setState({ answer })
 		}
 	}
 	render() {
-		let {answer, message, address, messageSent} = this.state,
-			validMessage = (typeof message == 'string' && message.length > 4) || (typeof address == 'string' && address.length > 4),
+		let { answer, message, address, messageSent } = this.state,
+			validMessage =
+				(typeof message == 'string' && message.length > 4) ||
+				(typeof address == 'string' && address.length > 4),
 			onSmileyClick = s => {
 				// Pour l'instant on double le flux avec Piwik
-				ReactPiwik.push(['trackEvent', 'feedback', 'smiley', s]);
+				ReactPiwik.push(['trackEvent', 'feedback', 'smiley', s])
 				this.sendSatisfaction(s)
 			}
 
@@ -62,50 +64,68 @@ export default class Satisfaction extends Component {
 				<div id="satisfaction">
 					<p>Vous êtes satisfait du simulateur ?</p>
 					<p>
-						<Smiley text=":)" hoverColor="#16a085" clicked={onSmileyClick}/>
-						<Smiley text=":|" hoverColor="#f39c12" clicked={onSmileyClick}/>
+						<Smiley text=":)" hoverColor="#16a085" clicked={onSmileyClick} />
+						<Smiley text=":|" hoverColor="#f39c12" clicked={onSmileyClick} />
 					</p>
 				</div>
 			)
 
 		let messagePlaceholder = {
 			':)': 'Envoyez-nous un commentaire !',
-			':|': "Qu'est-ce qui n'a pas été ?"
+			':|': 'Qu\'est-ce qui n\'a pas été ?'
 		}[answer]
 
-		let feedback =  <div>
-						<input type="text"
-						value={this.state.address || ''}
-						onChange={e => this.setState({address: e.target.value})}
-						placeholder="adresse@courriel.com (optionnel)" />
-						<textarea
-						value={this.state.message || ''}
-						onChange={e => this.setState({message: e.target.value})}
-						placeholder={messagePlaceholder} />
-						</div>
+		let feedback = (
+			<div>
+				<input
+					type="text"
+					value={this.state.address || ''}
+					onChange={e => this.setState({ address: e.target.value })}
+					placeholder="adresse@courriel.com (optionnel)"
+				/>
+				<textarea
+					value={this.state.message || ''}
+					onChange={e => this.setState({ message: e.target.value })}
+					placeholder={messagePlaceholder}
+				/>
+			</div>
+		)
 
 		return (
 			<div id="satisfaction">
 				{!messageSent && feedback}
-				<button id="sendMessage" disabled={!validMessage || messageSent} onClick={() => this.sendSatisfaction()}>
-					{messageSent ?
-						<i id="messageSent" className="fa fa-check" aria-hidden="true"></i>
-					: <span>
-						<i className="fa fa-paper-plane" aria-hidden="true"></i>
-						<span className="text">envoyer</span>
-					</span>
-					}
+				<button
+					id="sendMessage"
+					disabled={!validMessage || messageSent}
+					onClick={() => this.sendSatisfaction()}
+				>
+					{messageSent ? (
+						<i id="messageSent" className="fa fa-check" aria-hidden="true" />
+					) : (
+						<span>
+							<i className="fa fa-paper-plane" aria-hidden="true" />
+							<span className="text">envoyer</span>
+						</span>
+					)}
 				</button>
 				<p>
-					Pour recevoir une réponse, laissez-nous votre adresse ou {' '}
-					<a href={"mailto:contact@embauche.beta.gouv.fr?subject=Suggestion pour le simulateur " + this.props.simu}>
-						envoyez-nous directement un mail <i className="fa fa-envelope-open-o" aria-hidden="true" style={{margin: '0 .3em'}}></i>
+					Pour recevoir une réponse, laissez-nous votre adresse ou{' '}
+					<a
+						href={
+							'mailto:contact@embauche.beta.gouv.fr?subject=Suggestion pour le simulateur ' +
+							this.props.simu
+						}
+					>
+						envoyez-nous directement un mail{' '}
+						<i
+							className="fa fa-envelope-open-o"
+							aria-hidden="true"
+							style={{ margin: '0 .3em' }}
+						/>
 					</a>
 				</p>
 			</div>
 		)
-
-
 	}
 }
 
@@ -120,8 +140,8 @@ export class Smiley extends Component {
 					this.props.hover
 						? {
 							background: this.props.hoverColor,
-							color: "white",
-							borderColor: "transparent"
+							color: 'white',
+							borderColor: 'transparent'
 						}
 						: {}
 				}