<app>


  <h1>Explorateur de formations</h1>




  <input 
    type="text" 
    placeholder="Ex: informatique, médecine..."
    onkeyup={ saisie }>





  <button onclick={ rechercher }>Lancer la recherche</button>





  <div if={ chargement }>Chargement...</div>





  <carte-formations formations={ state.formations }></carte-formations>




  <div each={ formation in state.formations }>
    <ligne-resultat formation={ formation }></ligne-resultat>
  </div>





  <script>

    import { recupereFormations } from '../api/parcoursup.js'
    import LigneResultat from './ligne-resultat.riot'
    import CarteFormations from './carte-formations.riot'



    export default 
    {
      components: { LigneResultat, CarteFormations },

      state: 
      {
        formations: [],
        chargement: false,
        motCle: ''
      },

      saisie(e) 
      {
        this.motCle = e.target.value
      },

      async rechercher() 
      {
        this.update({ chargement: true })
        const formations = await recupereFormations(this.motCle)
        this.update({ formations, chargement: false })
      }


    }

  </script>
  
</app>