From b142bff487da08dea6e6979dfad9539058b197a4 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Mon, 25 Jun 2018 15:32:51 +0000
Subject: [PATCH] Ebauche de la recherche d'entreprise

---
 source/components/inFranceApp/Steps/Find.js | 81 +++++++++++++++++++++
 source/components/inFranceApp/index.js      |  2 +
 2 files changed, 83 insertions(+)
 create mode 100644 source/components/inFranceApp/Steps/Find.js

diff --git a/source/components/inFranceApp/Steps/Find.js b/source/components/inFranceApp/Steps/Find.js
new file mode 100644
index 000000000..f4324f80a
--- /dev/null
+++ b/source/components/inFranceApp/Steps/Find.js
@@ -0,0 +1,81 @@
+/* @flow */
+import React from 'react'
+import * as Animate from '../animate'
+import { SkipButton } from '../ui/Button'
+import ReactSelect from 'react-select'
+import 'react-select/dist/react-select.css'
+
+export default function Create() {
+	return (
+		<Animate.fromBottom>
+			<header className="ui__inverted-colors" style={{ textAlign: 'center' }}>
+				<h1 className="question__title">Find your company</h1>
+				<a className="ui__link-button" href="/steps/-create-my-company">
+					I don't have a company yet
+				</a>
+			</header>
+			<Search />
+			<SkipButton />
+		</Animate.fromBottom>
+	)
+}
+
+class Search extends React.Component {
+	state = {
+		input: '',
+		chosen: null
+	}
+	handleChange = input => {
+		console.log({ input })
+		this.setState({ input })
+	}
+	getOptions = input =>
+		input.length < 3
+			? Promise.resolve({ options: [] })
+			: fetch(`https://sirene.entreprise.api.gouv.fr/v1/full_text/${input}`)
+					.then(response => {
+						if (!response.ok) console.log('not ok')
+						return response.json()
+					})
+					.then(json => ({ options: json.etablissement }))
+					.catch(function(error) {
+						console.log(
+							'Erreur dans la recherche de communes à partir du code postal',
+							error
+						) // eslint-disable-line no-console
+					})
+	//	componentDidMount() {
+	//this.inputElement.focus()
+	//}
+	render() {
+		if (this.state.chosen) return <Company {...this.state.input} />
+		return (
+			<>
+				<ReactSelect.Async
+					valueKey="id"
+					labelKey="l1_normalisee"
+					value={this.state.input}
+					onChange={this.handleChange}
+					optionRenderer={({ l1_normalisee, code_postal }) =>
+						l1_normalisee + ` (${code_postal})`
+					}
+					placeholder="Nom d'entreprise (+ code postal)"
+					noResultsText="Nous n'avons trouvé aucune entreprise..."
+					searchPromptText={null}
+					loadingPlaceholder="Recherche en cours..."
+					loadOptions={this.getOptions}
+				/>
+
+				<button
+					onClick={() => this.setState({ chosen: true })}
+					className="ui__button">
+					Okay
+				</button>
+			</>
+		)
+	}
+}
+
+let Company = ({ l1_normalisee, l4_normalisee, activite_principale }) => (
+	<div>{l1_normalisee + ' ' + activite_principale}</div>
+)
diff --git a/source/components/inFranceApp/index.js b/source/components/inFranceApp/index.js
index 766cdfc76..177cd69eb 100644
--- a/source/components/inFranceApp/index.js
+++ b/source/components/inFranceApp/index.js
@@ -5,6 +5,7 @@ import '../../containers/reset.css'
 import withTracker from '../withTracker'
 import Landing from './Landing'
 import CreateMyCompany from './Steps/Create/index'
+import FindMyCompany from './Steps/Find'
 import './ui/index.css'
 class Layout extends Component {
 	componentDidMount() {
@@ -23,6 +24,7 @@ class Layout extends Component {
 					<Route exact path="/" component={Landing} />
 					<div className="ui__ container">
 						<Route path="/create-my-company" component={CreateMyCompany} />
+						<Route path="/find-my-company" component={FindMyCompany} />
 					</div>
 				</Switch>
 			</>