public-html2/parcoursup/app.riot

<app>
  <h1>Mini projet Parcoursup</h1>
  <p>Recherche de formations Parcoursup avec Riot</p>

  <div if={ !state.selected }>
    <search-bar onsearch={ launchSearch }></search-bar>

    <result-list
      results={ state.results }
      hasSearched={ state.hasSearched }
      loading={ state.loading }
      ondetail={ showDetail }>
    </result-list>
  </div>

  <div if={ state.selected }>
    <detail-view
      formation={ state.selected }
      onback={ backToList }>
    </detail-view>
  </div>

  <script>
    import { fetchFormations } from './api.js'
    import { createFormation } from './formation.js'

    export default {
      state: {
        loading: false,
        hasSearched: false,
        results: [],
        selected: null
      },

      async launchSearch(query) {
        this.update({
          loading: true,
          hasSearched: true,
          selected: null
        })

        try {
          const data = await fetchFormations(query)
          const formations = []

          if (data.results) {
            for (let i = 0; i < data.results.length; i++) {
              const raw = data.results[i]
              const formation = createFormation(raw)
              formations.push(formation)
            }
          }

          this.update({
            results: formations,
            loading: false
          })
        } catch (error) {
          console.error(error)
          this.update({
            results: [],
            loading: false
          })
        }
      },

      showDetail(index) {
        this.update({
          selected: this.state.results[index]
        })
      },

      backToList() {
        this.update({
          selected: null
        })
      }
    }
  </script>
</app>