$

src/components/global/selector/selector.riot

@@ -2,7 +2,7 @@
     <style>
         #selector {
             width: 300px;
-            min-height: 700px;
+            min-height: 625px;
             padding: 15px;
             box-shadow: 0px 0px 3px 1px black;
         }
@@ -53,6 +53,8 @@
         #selector-list-container
         #selector-list
         .selector-list-names {
+            text-decoration: none;
+            color: black;
             padding-left: 18px;
         }
 
@@ -70,54 +72,74 @@
     </style>
 
     <script>
-        const api = "https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fili&timezone=Europe%2FBerlin"
-        let data = []
-
         export default {
-            async getData() {
+            state: {
-                let data = []
-
-                await fetch(api)
-                    .then((res) => res.json())
-                    .then((d) => {
-                        data = d.facet_groups[0].facets
-                    })
-
-                this.state = {
                 page: {
                     curIndex: 0,
-                            "name": [
+                    cat: null,
+                    name: [
                         "formation",
-                            "filère de formation",
+                        "filière de formation",
                         "filière de formation détaillée"
-                        ]
+                    ],
+                },
+                data: null
             },
-                    data: data
-                }
 
-                console.log(this.state)
+            previousPage(){
+                try {
+                    if(this.state.page.curIndex-1 >= 0) {
+                        this.update({ curIndex: this.state.page.curIndex-- });
+                    }
+                    console.log(this.state.page.curIndex)
+                } catch(e) {
+                    console.error(e)
+                }
             },
+
+            nextPage() {
+                try {
+                    if(this.state.page.curIndex+1 <= 2 ) {
+                        this.update({ curIndex: this.state.page.curIndex++ });
+                    }
+                    console.log(this.state.page.curIndex)
+                } catch(e) {
+                    console.error(e)
+                }
+            },
+
+            async getData() {
+                try {
+                    const api = "https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fili&timezone=Europe%2FBerlin";
+                    const response = await fetch(api);
+                    const data = await response.json();
+                    this.update({ data: data.facet_groups[0].facets });
+                } catch (e) {
+                    console.error(e);
+                }
+            },
+
             onBeforeMount() {
-                this.getData()
+                this.getData();
-            }
             }
+        };
     </script>
 
-    <div id="selector">
+    <span if={ !this.state.data }>Chargement...</span>
+
+    <div if={ this.state.data } id="selector">
         <div id="selector-top-container">
       <span id="selector-top-title">
-                { state.pages.name[state.pages.curIndex] }
+        { this.state.page.name[this.state.page.curIndex] }
       </span>
-            <button id="selector-top-btn">
+            <button onclick={ previousPage } id="selector-top-btn">&lt;</button>
-                <
-            </button>
         </div>
 
         <div id="selector-list-container">
             <ul id="selector-list">
-                <li each={ item in state.data }  class="selector-list-inner">
+                <li each={ item in this.state.data } class="selector-list-inner">
-                    <span class="selector-list-names">{state.data.name}</span>
+                    <a onclick={ nextPage } class="selector-list-names">{ item.name }</a>
-                    <span class="selector-list-counts">{state.data.count}</span>
+                    <span class="selector-list-counts">{ item.count }</span>
                 </li>
             </ul>
         </div>