expand commune searches with multiple post codes

app/javascript/components/ComboCommunesSearch.jsx

@@ -1,9 +1,28 @@
 import React from 'react';
 import { QueryClientProvider } from 'react-query';
+import { matchSorter } from 'match-sorter';
 
 import ComboSearch from './ComboSearch';
 import { queryClient } from './shared/queryClient';
 
+function expandResultsWithMultiplePostalCodes(term, results) {
+  const expandedResults = results.flatMap((result) =>
+    result.codesPostaux.map((codePostal) => ({
+      ...result,
+      codesPostaux: [codePostal]
+    }))
+  );
+  const limit = term.length > 5 ? 10 : 5;
+  if (expandedResults.length > limit) {
+    return matchSorter(expandedResults, term, {
+      keys: [(item) => `${item.nom} (${item.codesPostaux[0]})`, 'code'],
+      sorter: (rankedItems) => rankedItems
+    }).slice(0, limit + 1);
+  }
+
+  return expandedResults;
+}
+
 function ComboCommunesSearch(params) {
   return (
     <QueryClientProvider client={queryClient}>
@@ -16,6 +35,7 @@ function ComboCommunesSearch(params) {
           code,
           `${nom} (${codesPostaux[0]})`
         ]}
+        transformResults={expandResultsWithMultiplePostalCodes}
       />
     </QueryClientProvider>
   );

app/javascript/components/ComboDepartementsSearch.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { QueryClientProvider } from 'react-query';
 import { matchSorter } from 'match-sorter';
 
@@ -7,14 +7,16 @@ import { queryClient } from './shared/queryClient';
 
 const extraTerms = [{ code: '99', nom: 'Etranger' }];
 
-function ComboDepartementsSearch(params) {
-  const transformResults = useCallback((term, results) => [
+function expandResultsWithForeignDepartement(term, results) {
+  return [
     ...results,
     ...matchSorter(extraTerms, term, {
       keys: ['nom', 'code']
     })
-  ]);
+  ];
+}
 
+function ComboDepartementsSearch(params) {
   return (
     <QueryClientProvider client={queryClient}>
       <ComboSearch
@@ -23,7 +25,7 @@ function ComboDepartementsSearch(params) {
         scope="departements"
         minimumInputLength={1}
         transformResult={({ code, nom }) => [code, `${code} - ${nom}`]}
-        transformResults={transformResults}
+        transformResults={expandResultsWithForeignDepartement}
       />
     </QueryClientProvider>
   );

app/javascript/components/ComboSearch.jsx

@@ -125,12 +125,12 @@ function ComboSearch({
         <ComboboxPopover className="shadow-popup">
           {results.length > 0 ? (
             <ComboboxList>
-              {results.map((result) => {
+              {results.map((result, index) => {
                 const [key, str] = transformResult(result);
                 resultsMap.current[str] = [key, result];
                 return (
                   <ComboboxOption
-                    key={key}
+                    key={`${key}-${index}`}
                     value={str}
                     data-option-value={str}
                   />