découpage de l'application en composants riot

parcoursup/app.riot

@@ -3,43 +3,21 @@
   <p>Recherche de formations Parcoursup avec Riot</p>
 
   <div if={ !state.selected }>
-    <input
-      type="text"
-      placeholder="Ex : BUT informatique"
-      oninput={ updateQuery }
-      value={ state.query }
-    />
-    <button onclick={ search }>Rechercher</button>
+    <search-bar onsearch={ launchSearch }></search-bar>
 
-    <p if={ state.loading }>Chargement...</p>
-    <p if={ !state.loading && state.results.length === 0 && state.hasSearched }>
-      Aucun résultat trouvé
-    </p>
-
-    <div each={ f, i in state.results } key={ f.id }
-         style="border:1px solid #ccc; padding:10px; margin:10px;">
-      <h3>{ f.nom }</h3>
-      <p><b>Établissement :</b> { f.etablissement }</p>
-      <p><b>Ville :</b> { f.ville } ({ f.departement })</p>
-      <p><b>Filière :</b> { f.filiere }</p>
-      <p><b>Taux d'accès :</b> { f.tauxAcces }%</p>
-      <button onclick={ () => showDetail(i) }>Voir détail</button>
-    </div>
+    <result-list
+      results={ state.results }
+      hasSearched={ state.hasSearched }
+      loading={ state.loading }
+      ondetail={ showDetail }>
+    </result-list>
   </div>
 
   <div if={ state.selected }>
-    <h2>{ state.selected.nom }</h2>
-    <p><b>Établissement :</b> { state.selected.etablissement }</p>
-    <p><b>Ville :</b> { state.selected.ville }</p>
-    <p><b>Département :</b> { state.selected.departement }</p>
-    <p><b>Filière :</b> { state.selected.filiere }</p>
-    <p><b>Sélectivité :</b> { state.selected.selectivite }</p>
-    <p><b>Capacité :</b> { state.selected.capacite }</p>
-    <p><b>Candidats :</b> { state.selected.candidats }</p>
-    <p><b>Admis :</b> { state.selected.admis }</p>
-    <p><b>Taux d'accès :</b> { state.selected.tauxAcces }%</p>
-
-    <button onclick={ backToList }>Retour</button>
+    <detail-view
+      formation={ state.selected }
+      onback={ backToList }>
+    </detail-view>
   </div>
 
   <script>
@@ -48,18 +26,13 @@
 
     export default {
       state: {
-        query: '',
         loading: false,
         hasSearched: false,
         results: [],
         selected: null
       },
 
-      updateQuery(e) {
-        this.update({ query: e.target.value })
-      },
-
-      async search() {
+      async launchSearch(query) {
         this.update({
           loading: true,
           hasSearched: true,
@@ -67,12 +40,14 @@
         })
 
         try {
-          const data = await fetchFormations(this.state.query)
+          const data = await fetchFormations(query)
           const formations = []
 
           if (data.results) {
             for (let i = 0; i < data.results.length; i++) {
-              formations.push(createFormation(data.results[i]))
+              const raw = data.results[i]
+              const formation = createFormation(raw)
+              formations.push(formation)
             }
           }