fix(education): query annuaire education in the browser

app/components/editable_champ/annuaire_education_component.rb

@@ -9,7 +9,8 @@ class EditableChamp::AnnuaireEducationComponent < EditableChamp::EditableChampBa
       name: @form.field_name(:external_id),
       selected_key: @champ.external_id,
       items: @champ.selected_items,
-      loader: data_sources_data_source_education_path,
+      loader: 'https://data.education.gouv.fr/api/records/1.0/search?dataset=fr-en-annuaire-education&rows=5',
+      coerce: 'AnnuaireEducation',
       debounce: 500,
       minimum_input_length: 5)
   end

app/javascript/components/ComboBox.tsx

@@ -232,6 +232,7 @@ export function RemoteComboBox({
     minimumInputLength,
     limit,
     debounce,
+    coerce,
     formValue,
     name,
     form,
@@ -245,9 +246,9 @@ export function RemoteComboBox({
   const load = useMemo(
     () =>
       typeof loader == 'string'
-        ? createLoader(loader, { minimumInputLength, limit })
+        ? createLoader(loader, { minimumInputLength, limit, coerce })
         : loader,
-    [loader, minimumInputLength, limit]
+    [loader, minimumInputLength, limit, coerce]
   );
   const { selectedItem, onReset, ...comboBoxProps } = useRemoteList({
     allowsCustomValue,

app/javascript/components/react-aria/hooks.ts

@@ -401,12 +401,39 @@ function getKey(item: Item) {
   return item.value;
 }
 
+const AnnuaireEducationPayload = s.type({
+  records: s.array(
+    s.type({
+      fields: s.type({
+        identifiant_de_l_etablissement: s.string(),
+        nom_etablissement: s.string(),
+        nom_commune: s.string()
+      })
+    })
+  )
+});
+
+const Coerce = {
+  Default: s.array(Item),
+  AnnuaireEducation: s.coerce(
+    s.array(Item),
+    AnnuaireEducationPayload,
+    ({ records }) =>
+      records.map((record) => ({
+        label: `${record.fields.nom_etablissement}, ${record.fields.nom_commune} (${record.fields.identifiant_de_l_etablissement})`,
+        value: record.fields.identifiant_de_l_etablissement,
+        data: record
+      }))
+  )
+};
+
 export const createLoader: (
   source: string,
   options?: {
     minimumInputLength?: number;
     limit?: number;
     param?: string;
+    coerce?: keyof typeof Coerce;
   }
 ) => Loader =
   (source, options) =>
@@ -427,7 +454,8 @@ export const createLoader: (
       });
       if (response.ok) {
         const json = await response.json();
-        const [err, items] = s.validate(json, s.array(Item), { coerce: true });
+        const struct = Coerce[options?.coerce ?? 'Default'];
+        const [err, items] = s.validate(json, struct, { coerce: true });
         if (!err) {
           if (items.length > limit) {
             const filteredItems = matchSorter(items, filterText, {

app/javascript/components/react-aria/props.ts

@@ -68,7 +68,8 @@ export const RemoteComboBoxProps = s.assign(
       minimumInputLength: s.number(),
       limit: s.number(),
       allowsCustomValue: s.boolean(),
-      debounce: s.number()
+      debounce: s.number(),
+      coerce: s.enums(['Default', 'AnnuaireEducation'])
     })
   )
 );