From 4c9af833421006f47c503d3811903888ba994f9f Mon Sep 17 00:00:00 2001
From: Fauvet Matthis <matthisf.etudes@gmail.com>
Date: Tue, 25 Jun 2024 00:14:10 +0200
Subject: [PATCH] create new branch

---
 index.html |  40 +++++++--------
 onzer.riot | 145 ++++++++++++++++++++++++++---------------------------
 2 files changed, 91 insertions(+), 94 deletions(-)
diff --git a/index.html b/index.html
index ea8fde4..979eff5 100644
--- a/index.html
+++ b/index.html
@@ -1,31 +1,31 @@
 <!DOCTYPE html>
 <html>
-<head>
-	<meta charset="utf-8">
-	<title>Riot App</title>
-	<script src="https://cdn.tailwindcss.com"></script>
-</head>
+	<head>
+		<meta charset="utf-8">
+		<title>Riot App</title>
+		<script src="https://cdn.tailwindcss.com"></script>
+	</head>
 	<body class="bg-neutral-50">
 
-	<onzer></onzer>
+		<onzer></onzer>
 
-	<script src="https://unpkg.com/animore/animore.js"></script>
-	<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
+		<script src="https://unpkg.com/animore/animore.js"></script>
+		<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
 
-	<script type="riot" src="./onzer.riot"></script>
-	<script type="javascript" src="./onzer.riot"></script>
+		<script type="riot" src="./onzer.riot"></script>
 
-	<script type="text/javascript">
-		function fetch_data(){
-			return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => {
-				return response.json();
-			} )
-		}
+		<script type="text/javascript">
+			async function fetch_data() {
+				return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => {
+					return response.json();
+				});
+			}
 
-		riot.compile().then(() => {
-			riot.mount('onzer', {items: fetch_data()});
-		})
-	</script>
+			riot.compile().then(async () => {
+				const data = await fetch_data();
+				riot.mount('onzer', { items: data });
+			});
+		</script>
 
 	</body>
 </html>
diff --git a/onzer.riot b/onzer.riot
index 406211b..1238d48 100644
--- a/onzer.riot
+++ b/onzer.riot
@@ -1,109 +1,106 @@
 <onzer>
     <div class="px-12">
         <div class="flex-row mb-2">
-               <input id="album" type="button" onclick={click} value="Albums"
-            class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {album_style}"/>
-                <input id="artist" type="button" onclick={click} value="Artists"
-            class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {artist_style}"/>
-                <input id="song" type="button" onclick={click} value="Songs"
-            class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {song_style}"/>
+            <input id="album" type="button" onclick={click} value="Albums"
+                   class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {album_style}" />
+            <input id="artist" type="button" onclick={click} value="Artists"
+                   class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {artist_style}" />
+            <input id="song" type="button" onclick={click} value="Songs"
+                   class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {song_style}" />
         </div>
 
-        <form onsubmit={ add }>
+        <form onsubmit={add}>
             <div class="flex flex-row items-baseline">
-                <input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 border h-20 pl-6 grow"
-                    placeholder={ state.placeholder } onkeyup={ edit } />
+                <input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 h-20 pl-6 grow"
+                       placeholder={state.placeholder} onkeyup={edit} />
                 <input type="button" value="Playlists"
-                    class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-20 w-48 mt-2"/>
+                       class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-20 w-48 mt-2" />
             </div>
         </form>
     </div>
 
     <div class="flex flex-wrap px-12 justify-between mt-8">
-        <div each={ album in state.items } class="item mb-4 border border-solid rounded-lg h-64 flex justify-center items-center">
-            <p> { album.name } </p>
+        <div each={album in state.items} class="item mb-4 border border-solid rounded-lg h-64 flex justify-center items-center">
+            <p>{album.name}</p>
         </div>
     </div>
 
     <script>
         export default {
-            async onBeforeMount(props){
-                let data =  await props.items;
-                this.state = {
-                    placeholder: "Rechercher dans les albums",
-                    items: data.results,
-                    search: "albums",
-                    filter: undefined,
-                    id: undefined
-                };
-                this.paintButton();
-                this.album_style = "isActivate";
-                this.update();
+            state: {
+                placeholder: "Rechercher dans les albums",
+                items: [],
+                search: "albums",
+                filter: undefined,
+                id: undefined
+            },
+            onBeforeMount(props) {
+                this.loadData(props.items);
+            },
+            async loadData(items) {
+                const data = await items;
+                this.update({
+                    state: {
+                        ...this.state,
+                        items: data.results
+                    },
+                    album_style: "isActivate",
+                    artist_style: "isDeactivate",
+                    song_style: "isDeactivate"
+                });
             },
             edit(e) {
-                this.state.filter = e.target.value;
-                console.log(this.state.filter);
+                this.update({
+                    state: {
+                        ...this.state,
+                        filter: e.target.value
+                    }
+                });
                 this.fetchData();
-                this.update();
             },
             click(e) {
                 e.preventDefault();
-		        this.paintButton();
-		        switch(e.target.value){
-			        case "Albums":
-				        this.state.placeholder = "Rechercher dans les albums";
-                        this.album_style = "isActivate";
-                        this.state.search = "albums";
-                        break;
-                    case "Artists":
-                        this.state.placeholder = "Rechercher dans les artists";
-                        this.artist_style = "isActivate";
-                        this.state.search = "artists";
-                        break;
-                    default:
-                        this.state.placeholder = "Rechercher dans les songs";
-                        this.song_style = "isActivate";
-                        this.state.search = "songs";
-		        }
-                this.fetchData()
-                this.update();
-            },
-            async fetchData(){
-                let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
+                const newState = {
+                    ...this.state,
+                    placeholder: `Rechercher dans les ${e.target.value.toLowerCase()}`,
+                    search: e.target.value.toLowerCase(),
+                    filter: undefined
+                };
                 this.update({
-                    items: data.results
+                    state: newState,
+                    album_style: e.target.value === "Albums" ? "isActivate" : "isDeactivate",
+                    artist_style: e.target.value === "Artists" ? "isActivate" : "isDeactivate",
+                    song_style: e.target.value === "Songs" ? "isActivate" : "isDeactivate"
                 });
+                this.fetchData();
             },
-            paintButton(){
-                this.album_style = "isDeactivate";
-                this.artist_style = "isDeactivate";
-                this.song_style = "isDeactivate";
-            },
-            execQuery(table, filter = undefined,  id = undefined){
-                console.log("CCACA");
-                let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/"
-                let computeHttpRequest;
-                if(filter !== undefined){
-                    switch(table){
-                        case "songs":
-                            computeHttpRequest = baseHttpRequest+table+"?title="+filter;
-                            break;
-                        default :
-                            computeHttpRequest = baseHttpRequest+table+"?name="+filter;
+            async fetchData() {
+                const data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
+                this.update({
+                    state: {
+                        ...this.state,
+                        items: data.results
                     }
-                } else if(id !== undefined) {
-                    computeHttpRequest = baseHttpRequest+table+"/"+id;
-                } else {
-                    computeHttpRequest = baseHttpRequest+table;
-                }
-                return fetch(computeHttpRequest).then(response => {
-                    return response.json();
                 });
+            },
+            execQuery(table, filter = undefined, id = undefined) {
+                let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/";
+                let computeHttpRequest;
+                if (filter !== undefined) {
+                    computeHttpRequest = table === "songs" ?
+                        `${baseHttpRequest}${table}?title=${filter}` :
+                        `${baseHttpRequest}${table}?name=${filter}`;
+                } else if (id !== undefined) {
+                    computeHttpRequest = `${baseHttpRequest}${table}/${id}`;
+                } else {
+                    computeHttpRequest = `${baseHttpRequest}${table}`;
+                }
+                return fetch(computeHttpRequest).then(response => response.json());
             }
         }
     </script>
     <style>
-        .isActivate{
+        .isActivate {
             background-color: #6EE7B7;
             border-color: #059669;
         }
