fix(education): query annuaire education in the browser

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'])
     })
   )
 );