Bruno Predot

Sauvegarde de la réponde de la fonction fetchMovies() dans le model Movie et suppression de la ref.

@@ -11,35 +11,37 @@ const { fetchPopularMovies } = useTMDB(); @@ -11,35 +11,37 @@ const { fetchPopularMovies } = useTMDB();
11 //#endregion 11 //#endregion
12 12
13 //#region --Type--. 13 //#region --Type--.
14 -interface Movie { 14 +// interface Movie {
15 - id: number; 15 +// id: number;
16 - title: string; 16 +// title: string;
17 - poster_path: string | null; 17 +// poster_path: string | null;
18 - vote_average: number; 18 +// vote_average: number;
19 - release_date: string; 19 +// release_date: string;
20 -} 20 +// }
21 //#endregion 21 //#endregion
22 22
23 //#region --Data/refs--. 23 //#region --Data/refs--.
24 const isInitialLoading = ref(true); 24 const isInitialLoading = ref(true);
25 const isLoadingMore = ref(false); 25 const isLoadingMore = ref(false);
26 -const movies = ref<Movie[]>([]);  
27 const currentPage = ref(1); 26 const currentPage = ref(1);
28 const totalPages = ref(0); 27 const totalPages = ref(0);
29 //#endregion 28 //#endregion
30 29
  30 +//#region --Computed--.
  31 +const movies = computed(() => {
  32 + return useRepo(Movie).all();
  33 +});
  34 +//#endregion
  35 +
31 //#region --Function--. 36 //#region --Function--.
32 -// Fetch popular movies 37 +/**
  38 + * Fetch popular movies
  39 + * @param page
  40 + */
33 const fetchMovies = async (page: number) => { 41 const fetchMovies = async (page: number) => {
34 try { 42 try {
35 isLoadingMore.value = true; 43 isLoadingMore.value = true;
36 const data = await fetchPopularMovies(page); 44 const data = await fetchPopularMovies(page);
37 -  
38 - if (page === 1) {  
39 - movies.value = data.results;  
40 - } else {  
41 - movies.value = [...movies.value, ...data.results];  
42 - }  
43 // Save in Movie model. 45 // Save in Movie model.
44 useRepo(Movie).save(data.results); 46 useRepo(Movie).save(data.results);
45 47
@@ -64,7 +66,7 @@ fetchMovies(1) @@ -64,7 +66,7 @@ fetchMovies(1)
64 <!-- Loading Skeleton --> 66 <!-- Loading Skeleton -->
65 <skeleton-movies-loader :is-initial-loading="isInitialLoading" :skeleton-number="20" /> 67 <skeleton-movies-loader :is-initial-loading="isInitialLoading" :skeleton-number="20" />
66 <!-- Liste des films --> 68 <!-- Liste des films -->
67 - <pre>{{ movies }}</pre> 69 +<!-- <pre>{{ movies }}</pre>-->
68 </section> 70 </section>
69 </template> 71 </template>
70 72