découpage de l'application en composants riot

parcoursup/components/detail-view.riot

@@ -0,0 +1,17 @@
+<detail-view>
+  <div if={ props.formation }
+       style="border:1px solid #ccc; padding:10px; margin:10px;">
+    <h2>{ props.formation.nom }</h2>
+    <p><b>Établissement :</b> { props.formation.etablissement }</p>
+    <p><b>Ville :</b> { props.formation.ville }</p>
+    <p><b>Département :</b> { props.formation.departement }</p>
+    <p><b>Filière :</b> { props.formation.filiere }</p>
+    <p><b>Sélectivité :</b> { props.formation.selectivite }</p>
+    <p><b>Capacité :</b> { props.formation.capacite }</p>
+    <p><b>Candidats :</b> { props.formation.candidats }</p>
+    <p><b>Admis :</b> { props.formation.admis }</p>
+    <p><b>Taux d'accès :</b> { props.formation.tauxAcces }%</p>
+
+    <button onclick={ () => props.onback() }>Retour</button>
+  </div>
+</detail-view>

parcoursup/components/result-list.riot

@@ -0,0 +1,22 @@
+<result-list>
+  <div>
+    <div if={ props.results.length === 0 && props.hasSearched && !props.loading }>
+      Aucun résultat trouvé
+    </div>
+
+    <div if={ props.loading }>
+      Chargement...
+    </div>
+
+    <div each={ f, i in props.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={ () => props.ondetail(i) }>Voir détail</button>
+    </div>
+  </div>
+</result-list>

parcoursup/components/search-bar.riot

@@ -0,0 +1,27 @@
+<search-bar>
+  <div>
+    <input
+      type="text"
+      placeholder="Ex : BUT informatique"
+      oninput={ updateQuery }
+      value={ state.query }
+    />
+    <button onclick={ submitSearch }>Rechercher</button>
+  </div>
+
+  <script>
+    export default {
+      state: {
+        query: ''
+      },
+
+      updateQuery(e) {
+        this.update({ query: e.target.value })
+      },
+
+      submitSearch() {
+        this.props.onsearch(this.state.query)
+      }
+    }
+  </script>
+</search-bar>