implement ComboPaysSearch

app/javascript/components/ComboPaysSearch.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ReactQueryCacheProvider } from 'react-query';
+
+import ComboSearch from './ComboSearch';
+import { queryCache } from './shared/queryCache';
+
+function ComboPaysSearch(params) {
+  return (
+    <ReactQueryCacheProvider queryCache={queryCache}>
+      <ComboSearch
+        required={params.mandatory}
+        hiddenFieldId={params.hiddenFieldId}
+        scope="pays"
+        minimumInputLength={0}
+        transformResult={({ nom }) => [nom, nom]}
+      />
+    </ReactQueryCacheProvider>
+  );
+}
+
+export default ComboPaysSearch;

app/javascript/components/shared/queryCache.js

@@ -1,5 +1,6 @@
 import { QueryCache } from 'react-query';
 import { isNumeric } from '@utils';
+import matchSorter from 'match-sorter';
 
 const { api_geo_url, api_adresse_url } = gon.autocomplete || {};
 
@@ -31,6 +32,11 @@ function buildOptions() {
 }
 
 async function defaultQueryFn(scope, term) {
+  if (scope == 'pays') {
+    const pays = await fetch('/pays.json').then((response) => response.json());
+    return matchSorter(pays, term, { keys: ['nom'] });
+  }
+
   const url = buildURL(scope, term);
   const [options, controller] = buildOptions();
   const promise = fetch(url, options).then((response) => response.json());