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
+    <search-bar onsearch={ launchSearch }></search-bar>
-      type="text"
-      placeholder="Ex : BUT informatique"
-      oninput={ updateQuery }
-      value={ state.query }
-    />
-    <button onclick={ search }>Rechercher</button>
 
-    <p if={ state.loading }>Chargement...</p>
+    <result-list
-    <p if={ !state.loading && state.results.length === 0 && state.hasSearched }>
+      results={ state.results }
-      Aucun résultat trouvé
+      hasSearched={ state.hasSearched }
-    </p>
+      loading={ state.loading }
-
+      ondetail={ showDetail }>
-    <div each={ f, i in state.results } key={ f.id }
+    </result-list>
-         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>
   </div>
 
   <div if={ state.selected }>
-    <h2>{ state.selected.nom }</h2>
+    <detail-view
-    <p><b>Établissement :</b> { state.selected.etablissement }</p>
+      formation={ state.selected }
-    <p><b>Ville :</b> { state.selected.ville }</p>
+      onback={ backToList }>
-    <p><b>Département :</b> { state.selected.departement }</p>
+    </detail-view>
-    <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>
   </div>
 
   <script>
@@ -48,18 +26,13 @@
 
     export default {
       state: {
-        query: '',
         loading: false,
         hasSearched: false,
         results: [],
         selected: null
       },
 
-      updateQuery(e) {
+      async launchSearch(query) {
-        this.update({ query: e.target.value })
-      },
-
-      async search() {
         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)
             }
           }
 

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>

parcoursup/index.html

@@ -6,14 +6,13 @@
   <title>Parcoursup Riot</title>
 
   <script src="https://cdn.jsdelivr.net/npm/riot@9/riot+compiler.min.js"></script>
-  <script type="module">
-    import "./api.js"
-    import "./formation.js"
-  </script>
 </head>
 <body>
   <app></app>
 
+  <script src="./components/search-bar.riot" type="riot"></script>
+  <script src="./components/result-list.riot" type="riot"></script>
+  <script src="./components/detail-view.riot" type="riot"></script>
   <script src="./app.riot" type="riot"></script>
 
   <script>