ça fonctionne bien maintenant

app.riot

@@ -1,6 +1,7 @@
 <app>
-    <filters></filters>
+    <filters currentPageNum="{state.currentMovieList.page}" maxPageNum="{state.currentMovieList.total_pages}"
-    <movie-container movieList="{state.currentMovieList.results}"></movie-container>
+            getMovieList="{getMovieList}" updateMovieList="{updateMovieList}"></filters>
+    <movie-container getGenres="{movieUtils.getGenres()}" movieList="{state.currentMovieList.results}"></movie-container>
     <script>
 
     export default {
@@ -8,46 +9,64 @@
             this.state = {
                 currentMovieList: [],
             }
+            this.initGenres();
         },
 
         onMounted() {
             this.updateMovieList();
-            console.log("helo")
-            console.log(this.state.currentMovieList.results)
         },
 
         async updateMovieList() {
-            console.log("updating")
+            currentPage = localStorage.getItem("curr_page");
+            localStorage.setItem('curr_page', 1);
             switch(localStorage.getItem("currfilter")) {
                 case "popular":
                     console.log("loading popular")
                     this.update ({
-                    currentMovieList : await movieUtils.getPopularMovies()
+                    currentMovieList : await movieUtils.getPopularMovies(currentPage)
                     })
                     break
 
                 case "top_rated":
                     console.log("loading top_rated")
                     this.update ({
-                    currentMovieList : await movieUtils.getTopRatedMovies()
+                    currentMovieList : await movieUtils.getTopRatedMovies(currentPage)
                     })
                     break
 
                 case "coming_soon":
                     console.log("loading coming_soon")
                     this.update ({
-                    currentMovieList : await movieUtils.getComingSoonMovies()
+                    currentMovieList : await movieUtils.getComingSoonMovies(currentPage)
                     })
                     break
 
                 case "new":
                     console.log("loading new")
                     this.update ({
-                    currentMovieList : await movieUtils.getNewMovies()
+                    currentMovieList : await movieUtils.getNewMovies(currentPage)
+                    })
+                    break
+                    
+                default:
+                    console.log("loading new")
+                    this.update ({
+                    currentMovieList : await movieUtils.getNewMovies(currentPage)
                     })
                     break
             }
         },
+
+        getMovieList() {
+            this.updateMovieList();
+            return this.currentMovieList;
+        },
+
+        async initGenres() {
+            let genres = [];
+            console.log("genres")
+            genres = await movieUtils.getGenres().then(data => localStorage.setItem("genres", JSON.stringify(data)));
+        }
     }
 </script>
 </app>

filters.riot

@@ -1,21 +1,53 @@
 <filters>
-    <div class="buttons">
+    <div class="buttons-filters">
 		<button onclick={setFilter} class="w3-button w3-blue w3-round" id="popular">Populaires</button>
 		<button onclick={setFilter} class="w3-button w3-blue w3-round" id="top_rated">Mieux notés</button>
 		<button onclick={setFilter} class="w3-button w3-blue w3-round" id="coming_soon">À venir</button>
 		<button onclick={setFilter} class="w3-button w3-blue w3-round" id="new">À l'affiche</button>
 	</div>
 
+    <ul class="filters">
+        <li>
+            <button onclick={toPreviousPage}><</button>
+                {this.props.currentPageNum}/{this.props.maxPageNum}
+            <button onclick={toNextPage}>></button>
+        </li>
+    </ul>
+
     <script>
         export default {
             onBeforeMount (props,state) {
                 console.log(localStorage.getItem('currfilter'));
+                console.log(props.getMovieList());
 		    },
 
             setFilter(e) {
                 localStorage.setItem('currfilter', e.target.id);
-                console.log("set")
+                this.props.updateMovieList();
-                this.update()
+            },
+
+            toPreviousPage() {
+                if (this.props.currentPageNum > 1) {
+                    localStorage.setItem('curr_page', this.props.currentPageNum-1);
+                    this.props.updateMovieList();
+                }
+
+                else {
+                    localStorage.setItem('curr_page', this.props.maxPageNum);
+                    this.props.updateMovieList();
+                }
+            },
+
+            toNextPage() {
+                if (this.props.currentPageNum < this.props.maxPageNum) {
+                    localStorage.setItem('curr_page', this.props.currentPageNum+1);
+                    this.props.updateMovieList();
+                }
+
+                else {
+                    localStorage.setItem('curr_page', 1);
+                    this.props.updateMovieList();
+                }
             },
         }
     </script>

index.html

@@ -2,7 +2,7 @@
 
 <html>
 	<head>
-		<title>Riot todo</title>
+		<title>Cinéma HAMMERSCHMIDT</title>
 		<meta charset="UTF-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<script src="app.riot" type="riot"></script>
@@ -14,10 +14,6 @@
 		<script src="https://cdn.jsdelivr.net/npm/riot@6.1.2/riot+compiler.min.js"></script>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
-	</head>
-
-	<body>
-		<app></app>
 
 		<script>
 
@@ -34,5 +30,9 @@
 
 			})()
 		</script>
+	</head>
+
+	<body>
+		<app></app>
 	</body>
 </html>

movie-container.riot

@@ -7,7 +7,12 @@
 <script>
         export default {
             onBeforeMount (props,state) {
+                console.log(props);
 		    },
+
+            onMounted() {
+                console.log(this.props);
+            }
         }
         
     </script>

movie-page.html

@@ -0,0 +1,39 @@
+<!doctype html>
+
+<html>
+	<head>
+		<title>Cinéma HAMMERSCHMIDT</title>
+		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<script src="movie-page.riot" type="riot"></script>
+		<link rel="stylesheet" href="movie.css">
+        <script src="movie.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/riot@6.1.2/riot+compiler.min.js"></script>
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+
+        <script>
+			(async () => {
+				await riot.compile()
+				movieUtils = getMovieUtils()
+
+				riot.install(function(component){
+					component.movieUtils = movieUtils
+				})
+
+				let url = new URLSearchParams(window.location.search);	 
+				let movie_id = url.get('id')
+
+				let movie = await movieUtils.getMovieById(movie_id)
+				//let credits = await movieUtils.getMovieCredits(movie_id)
+
+				riot.mount('movie-page', {movie})
+
+			})()
+		</script>
+	</head>
+
+	<body>
+		<movie-page></movie-page>
+	</body>
+</html>

movie-page.riot

@@ -0,0 +1,106 @@
+<movie-page>
+    <div class="movie-page-container">
+
+        <div>
+            <h1 style="font-weight: bold;">{props.movie.title}</h1>
+            <img src="https://image.tmdb.org/t/p/w500/{props.movie.poster_path}"><img>
+        </div>
+
+        <div class="right-part">
+            <ul>
+                <li class="genre" each={genre in state.movie_genres}>{genre}</li>
+            </ul>
+
+            <br>
+
+            <p >{props.movie.release_date}</p>
+
+            <br>
+
+            <ul>
+                <li class="language" each={language in props.movie.spoken_languages}>{(language.iso_639_1).toUpperCase()}</li>
+            </ul>
+
+            <br>
+
+            <p class="overview">{props.movie.overview}</p>
+        </div>
+    </div>
+
+    <script>
+
+        export default {
+            onBeforeMount(props, state) {
+                this.state = {
+                    movie_genres: this.getGenresFromIds(),
+                }
+            },
+
+            getGenresFromIds() {
+                let ret = []
+                let genres = []
+                genres = JSON.parse(localStorage.getItem("genres")).genres;
+
+                for(let i = 0; i<genres.length; i++)
+                {
+                    for(let j = 0; j< this.props.movie.genres.length; j++) {
+                        if(genres[i].id == this.props.movie.genres[j].id) {
+                            ret.push(genres[i].name)
+                        }
+                    }
+                }
+                console.log(ret)
+                return ret	
+            },
+        }
+    </script>
+
+    <style>
+        .movie-page-container {
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
+            justify-content: center;
+        }
+
+        .movie-page-container div {
+            margin: 20px;
+        }
+
+        .right-part {
+            padding-top: 3%;
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: column;
+        }
+
+        ul {
+            padding-left: 0px;
+            list-style: none;
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
+        }
+
+        .genre {
+            font-weight: bold;
+            padding-right: 14px;
+        }
+
+        .language {
+            margin-right: 14px;
+            text-align: center;
+            list-style: none;
+            border-radius: 10px;
+            padding: 10px;
+            margin-bottom: 10px;
+            color: #50713e;
+            background-color: #daf1e0;
+        }
+
+        .overview {
+            word-wrap: break-word;
+            width: 400px;
+        }
+    </style>
+</movie-page>

movie.css

@@ -1,3 +1,4 @@
+
 .movie-container {
     display: flex;
     flex-wrap: wrap;
@@ -12,7 +13,25 @@
     align-items: center;
 }
 
-.buttons {
+movie .genre {
+    text-align: center;
+    list-style: none;
+    border-radius: 10px;
+    padding: 10px;
+    margin-bottom: 10px;
+    color: #50713e;
+    background-color: #daf1e0;
+}
+
+.buttons-filters {
+    margin: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.filters {
+    list-style: none;
     margin: 10px;
     display: flex;
     flex-wrap: wrap;

movie.js

@@ -9,29 +9,31 @@ function getMovieUtils() {
         getPopularMovies,
         getComingSoonMovies,
         getNewMovies,
-        getCurrentFilter
+        getCurrentFilter,
+        getGenres,
+        getMovieById
     };
 
     function getTopRatedMovies(page_index) {
-        return fetch(url + "movie/top_rated?api_key=" + api_key + "&page=" + page_index)
+        return fetch(url + "movie/top_rated?api_key=" + api_key + "&page=" + page_index + "&language=fr")
         .then(response => response.json())
         .then(data => data);
     }
 
     function getPopularMovies(page_index) {
-        return fetch(url + "movie/popular?api_key=" + api_key + "&page=" + page_index)
+        return fetch(url + "movie/popular?api_key=" + api_key + "&page=" + page_index + "&language=fr")
         .then(response => response.json())
         .then(data => data);
     }
 
     function getComingSoonMovies(page_index) {
-        return fetch(url + "movie/upcoming?api_key=" + api_key + "&page=" + page_index)
+        return fetch(url + "movie/upcoming?api_key=" + api_key + "&page=" + page_index + "&language=fr")
         .then(response => response.json())
         .then(data => data);
     }
 
     function getNewMovies(page_index) {
-        return fetch(url + "movie/now_playing?api_key=" + api_key + "&page=" + page_index)
+        return fetch(url + "movie/now_playing?api_key=" + api_key + "&page=" + page_index + "&language=fr")
         .then(response => response.json())
         .then(data => data);
     }
@@ -40,5 +42,17 @@ function getMovieUtils() {
         return localStorage.getItem("currfilter");
     }
 
+    function getGenres() {
+		return fetch(url + "genre/movie/list?api_key=" + api_key + "&language=fr")
+		.then(response => response.json())
+		.then(data => data)
+	}
+
+    function getMovieById(id) {
+		return fetch(url + "movie/" + id + "?api_key=" + api_key + "&language=fr")
+		.then(response => response.json())
+		.then(data=>data)
+	}
+
     return utils;
 }

movie.riot

@@ -1,30 +1,42 @@
 <movie>
-    <a href="TODO">{props.movie.title}</a>
+    <a href="./movie-page.html?id={props.movie.id}">{props.movie.title}</a>
     <img src='https://image.tmdb.org/t/p/w300{props.movie.poster_path}'></img>
     <label>{props.movie.vote_average}/10</label>
     <label>{props.movie.vote_count} votes</label>
-    <li each={ genre in props.movie.genres_id }>{genre}</li>
+    <ul class="genres">
+        <li class="genre" each={ genre in state.movie_genres }>{genre}</li>
+    </ul>
 
     <script>
 
     export default {
         onBeforeMount(props, state) {
-            console.log(props)
+            this.state = {
+                movie_genres: this.getGenresFromIds(),
+            }
         },
 
-        edit(e) {
+        getGenresFromIds() {
-            // update only the text state
+            let ret = []
-            this.update({
+            let genres = []
-            items : [{results: getPopularMovies()}]
+            genres = JSON.parse(localStorage.getItem("genres")).genres;
-            //getTopRatedMovies().then(data => items : data);
+            this.props.movie.genre_ids.length
-            })
+			for(let i = 0; i<genres.length; i++)
+            {
+				for(let j = 0; j< this.props.movie.genre_ids.length; j++) {
+					if(genres[i].id == this.props.movie.genre_ids[j]) {
+						ret.push(genres[i].name)
+                    }
+                }
+            }
+
+			//console.log(ret)	
+			return ret	
         },
 
-        test(item) {
+        onBeforeUpdate(props, state) {
-            items : [{results: getPopularMovies()}]
+            this.state.movie_genres = this.getGenresFromIds();
-            console.log(item)
+        },
-            this.update();
-        } 
     }
 </script>
 </movie>

package.json

@@ -1 +0,0 @@
-{"dependencies":{"riot":"^6.1.2"},"name":"cinema","version":"1.0.0","main":"index.js","devDependencies":{"@riotjs/cli":"^6.0.5","@riotjs/compiler":"^6.0.1","chai":"^4.3.4","esm":"^3.2.25","jsdom":"^16.6.0","jsdom-global":"^3.0.2","mocha":"^8.4.0","nyc":"^15.1.0","riot":"^6.0.2"},"scripts":{"test":"npm run build && nyc --require esm --require jsdom-global/register mocha test.js","cov":"nyc report --reporter=text-lcov","cov-html":"nyc report --reporter=html","build":"riot -c riot.config my-component.riot","prepublishOnly":"npm test"},"author":"Adil HAMMERSCHMIDT","license":"ISC","description":""}