From 044aad7cfd35ed37ee7f25a6914813089aef708c Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Tue, 5 Nov 2019 18:04:27 +0100
Subject: [PATCH] Utilisation du fuzzy matching pour SelectTauxRisque

Pour que la recherche marche sans accents par exemple
---
 source/components/SearchBar.js                |  9 +++++---
 .../conversation/select/SelectTauxRisque.js   | 21 +++++++++++--------
 .../select/SelectTauxRisque.worker.js         | 15 +++++++++++++
 3 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 source/components/conversation/select/SelectTauxRisque.worker.js

diff --git a/source/components/SearchBar.js b/source/components/SearchBar.js
index c45c66d40..430a252f8 100644
--- a/source/components/SearchBar.js
+++ b/source/components/SearchBar.js
@@ -53,13 +53,15 @@ let SearchBar = ({
 						color: var(--textColour);
 					}
 				`}
-				onClick={() => setSelectedOption(option)}>
+				onClick={() => setSelectedOption(option)}
+			>
 				<div
 					style={{
 						fontWeight: '300',
 						fontSize: '85%',
 						lineHeight: '.9em'
-					}}>
+					}}
+				>
 					<Highlighter
 						searchWords={[input]}
 						textToHighlight={
@@ -73,7 +75,8 @@ let SearchBar = ({
 					/>
 				</div>
 				<Link
-					to={sitePaths.documentation.index + '/' + encodeRuleName(dottedName)}>
+					to={sitePaths.documentation.index + '/' + encodeRuleName(dottedName)}
+				>
 					<Highlighter
 						searchWords={[input]}
 						textToHighlight={title || capitalise0(name)}
diff --git a/source/components/conversation/select/SelectTauxRisque.js b/source/components/conversation/select/SelectTauxRisque.js
index 669536112..faeb2e6a5 100644
--- a/source/components/conversation/select/SelectTauxRisque.js
+++ b/source/components/conversation/select/SelectTauxRisque.js
@@ -1,6 +1,8 @@
 import { T } from 'Components'
 import React, { useEffect, useState } from 'react'
+import Worker from 'worker-loader!./SelectTauxRisque.worker.js'
 import { FormDecorator } from '../FormDecorator'
+const worker = new Worker()
 
 function SelectComponent({ setFormValue, submit, options }) {
 	const [searchResults, setSearchResults] = useState()
@@ -9,8 +11,13 @@ function SelectComponent({ setFormValue, submit, options }) {
 		setFormValue(option.text)
 		submit()
 	}
+	useEffect(() => {
+		worker.postMessage({
+			options
+		})
 
-	if (!options) return null
+		worker.onmessage = ({ data: results }) => setSearchResults(results)
+	}, [])
 
 	return (
 		<>
@@ -33,17 +40,12 @@ function SelectComponent({ setFormValue, submit, options }) {
 				`}
 				placeholder="Saisissez votre domaine d'activité"
 				onChange={e => {
-					if (e.target.value.length < 2) {
+					let input = e.target.value
+					if (input.length < 2) {
 						setSearchResults(undefined)
 						return
 					}
-					setSearchResults(
-						options.filter(option =>
-							option['Nature du risque']
-								.toLocaleLowerCase()
-								.includes(e.target.value.toLocaleLowerCase())
-						)
-					)
+					worker.postMessage({ input })
 				}}
 			/>
 			{searchResults && searchResults.length === 0 && (
@@ -149,5 +151,6 @@ export default FormDecorator('select')(function Select(props) {
 			)
 	}, [])
 
+	if (!options) return null
 	return <SelectComponent {...props} options={options} />
 })
diff --git a/source/components/conversation/select/SelectTauxRisque.worker.js b/source/components/conversation/select/SelectTauxRisque.worker.js
new file mode 100644
index 000000000..976b53216
--- /dev/null
+++ b/source/components/conversation/select/SelectTauxRisque.worker.js
@@ -0,0 +1,15 @@
+import Fuse from 'fuse.js'
+
+let fuse = null
+onmessage = function(event) {
+	if (event.data.options)
+		fuse = new Fuse(event.data.options, {
+			keys: ['Nature du risque', 'Catégorie'],
+			shouldSort: true
+		})
+
+	if (event.data.input) {
+		let results = fuse.search(event.data.input)
+		postMessage(results)
+	}
+}