demarches-normaliennes/app/javascript/components/ComboDepartementsSearch.tsx

import React from 'react';
import { QueryClientProvider } from 'react-query';
import { matchSorter } from 'match-sorter';

import ComboSearch, { ComboSearchProps } from './ComboSearch';
import { queryClient } from './shared/queryClient';

type DepartementResult = { code: string; nom: string };

const extraTerms = [{ code: '99', nom: 'Etranger' }];

function expandResultsWithForeignDepartement(term: string, result: unknown) {
  const results = result as DepartementResult[];
  return [
    ...results,
    ...matchSorter(extraTerms, term, {
      keys: ['nom', 'code']
    })
  ];
}

type ComboDepartementsSearchProps = Omit<
  ComboSearchProps<DepartementResult> & {
    addForeignDepartement: boolean;
  },
  'transformResult' | 'transformResults'
>;

export function ComboDepartementsSearch({
  addForeignDepartement = true,
  ...props
}: ComboDepartementsSearchProps) {
  return (
    <ComboSearch
      {...props}
      scope="departements"
      minimumInputLength={1}
      transformResult={({ code, nom }) => [code, `${code} - ${nom}`]}
      transformResults={
        addForeignDepartement ? expandResultsWithForeignDepartement : undefined
      }
    />
  );
}

export default function ComboDepartementsSearchDefault(
  params: ComboDepartementsSearchProps
) {
  return (
    <QueryClientProvider client={queryClient}>
      <ComboDepartementsSearch {...params} />
    </QueryClientProvider>
  );
}