Mise en place d'un model pour le fetch des crédits + interface.

Ajout fonction dans le composable useTMDB. Modification interface et model Movie pour ajouter la liaison avec Credit. Ajout du fetch des credit dans la page détails.

Mise en place d'un model pour le fetch des crédits + interface.
Ajout fonction dans le composable useTMDB. Modification interface et model Movie pour ajouter la liaison avec Credit. Ajout du fetch des credit dans la page détails.
Bruno Predot
Commit 785892e39e881eb473cb7a2df5c44399dbcfd36d 785892e3 1 parent d42071f0
Showing 6 changed files with 126 additions and 51 deletions
composables/tMDB.ts
interfaces/credit.ts
interfaces/movie.ts
models/credit.ts
models/movie.ts
pages/movies/[id]/index.vue
--- a/composables/tMDB.ts
View file @785892e
+++ b/composables/tMDB.ts
View file @785892e
 import type { RuntimeConfig } from "nuxt/schema";
-export const useTMDB = function() {
+export const useTMDB = function () {
   const runtimeconfig: RuntimeConfig = useRuntimeConfig();
   const apiUrl = runtimeconfig.public.apiTMDBUrl;
   const apiKey = runtimeconfig.public.apiTMDBSecret;
@@ -11,9 +11,7 @@ export const useTMDB = function() {
    */
   const fetchPopularMovies = async (page: number) => {
     try {
-      const response = await fetch(
+      const response = await fetch(`${apiUrl}/movie/popular?api_key=${apiKey}&language=fr-FR&page=${page}`);
-        `${apiUrl}/movie/popular?api_key=${apiKey}&language=fr-FR&page=${page}`,
-      );
       if (!response.ok) {
         console.error("An error occurred when fetching popular movies:");
       } else {
@@ -48,11 +46,9 @@ export const useTMDB = function() {
    * Fetch movie details by id.
    * @param id
    */
-  const fetchMovieDetails = async (id: number|string) => {
+  const fetchMovieDetails = async (id: number | string) => {
     try {
-      const response = await fetch(
+      const response = await fetch(`${apiUrl}/movie/${id}?api_key=${apiKey}&language=fr-FR`);
-        `${apiUrl}/movie/${id}?api_key=${apiKey}&language=fr-FR`,
-      );
       if (!response.ok) {
         console.error("An error occurred when fetching movie details:");
       } else {
@@ -63,5 +59,21 @@ export const useTMDB = function() {
     }
   };
-  return { fetchPopularMovies, searchMovies, fetchMovieDetails }
+  /**
-}
+   * Fetch movie credits
+   */
+  const fetchMovieCredits = async (id: number | string) => {
+    try {
+      const response = await fetch(`${apiUrl}/movie/${id}/credits?api_key=${apiKey}&language=fr-FR`);
+      if (!response.ok) {
+        console.error("An error occurred when fetching movie credits:");
+      } else {
+        return await response.json();
+      }
+    } catch (error) {
+      console.error("Error fetching movie credits:", error);
+    }
+  };
+
+  return { fetchPopularMovies, searchMovies, fetchMovieDetails, fetchMovieCredits };
+};
--- a/interfaces/credit.ts 0 → 100644
View file @785892e
+++ b/interfaces/credit.ts 0 → 100644
View file @785892e
+import type { MovieInterface } from "~/interfaces/movie";
+
+export interface CreditInterface {
+  id: number;
+  name: string;
+  job?: string;
+  character?: string;
+}
+
+export type CreditsResponse = {
+  id: number;
+  cast: CreditInterface[],
+  crew: CreditInterface[],
+  movie_id: unknown;
+  movie: MovieInterface;
+}
--- a/interfaces/movie.ts
View file @785892e
+++ b/interfaces/movie.ts
View file @785892e
+import type { CreditInterface } from "~/interfaces/credit";
+
 export interface MovieInterface {
   id: number;
   adult: boolean;
@@ -15,6 +17,7 @@ export interface MovieInterface {
   video: boolean;
   vote_average: number;
   vote_count: number;
+  credit: CreditInterface;
 }
 type Genre = {
--- a/models/credit.ts 0 → 100644
View file @785892e
+++ b/models/credit.ts 0 → 100644
View file @785892e
+import { Model } from "pinia-orm";
+import { Movie } from "~/models/movie";
+
+export class Credit extends Model {
+  /**
+   *
+   * @return {string}
+   */
+  static get entity() {
+    return "Credit";
+  }
+
+  /**
+   *
+   * @return {string}
+   */
+  static get primaryKey() {
+    return "id";
+  }
+
+  static fields() {
+    return {
+      // Attributs.
+      id: this.number(null),
+      cast: this.attr([]),
+      crew: this.attr([]),
+      // Relations.
+      movie_id: this.attr(null),
+      movie: this.belongsTo(Movie, "movie_id", "id"),
+    };
+  }
+
+  static piniaOptions = {
+    persist: true,
+  };
+}
--- a/models/movie.ts
View file @785892e
+++ b/models/movie.ts
View file @785892e
 import { Model } from "pinia-orm";
+import { Credit } from "~/models/credit";
 export class Movie extends Model {
   /**
@@ -48,11 +49,11 @@ export class Movie extends Model {
       vote_average: this.number(null),
       vote_count: this.number(null),
       // Relations.
+      credit: this.hasOne(Credit, "movie_id", "id"),
     };
   }
   static piniaOptions = {
     persist: true,
   };
-
+}
-}
--- a/pages/movies/[id]/index.vue
View file @785892e
+++ b/pages/movies/[id]/index.vue
View file @785892e
-<script setup lang="ts">
+<script lang="ts" setup>
 //#region --import--.
 import { ArrowLeftIcon, FilmIcon } from "lucide-vue-next";
 import { useTMDB } from "~/composables/tMDB";
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import { Movie } from "~/models/movie";
 import type { MovieInterface } from "~/interfaces/movie";
+import { Credit } from "~/models/credit";
+import type { CreditInterface, CreditsResponse } from "~/interfaces/credit";
 //#endregion
 //#region --Declaration--.
-const { fetchPopularMovies, searchMovies, fetchMovieDetails } = useTMDB();
+const { fetchMovieDetails, fetchMovieCredits } = useTMDB();
 //#endregion
 //#region --Declaration--.
 const { currentRoute } = useRouter();
 //#endregion
+//#region --Data/ref--.
+const isLoading = ref(true);
+//#endregion
+
 //#region --Computed--.
 const movieId = computed(() => {
   if (currentRoute.value.params.id) {
-    if (typeof currentRoute.value.params.id === 'string') {
+    if (typeof currentRoute.value.params.id === "string") {
       if (typeof Number(+currentRoute.value.params.id) === "number") {
         return +currentRoute.value.params.id as number;
       } else {
@@ -35,48 +41,44 @@ const movieId = computed(() => {
 const movie = computed(() => {
   if (unref(movieId)) {
     // Todo : revoir ici.
-    return useRepo(Movie).query().where('id', movieId.value).withAll().first() as unknown as MovieInterface;
+    return useRepo(Movie).query().where("id", movieId.value).withAll().first() as unknown as MovieInterface;
   } else {
     return null;
   }
 });
 //#endregion
-
-
 //#region --Function--.
 /**
  * Fetch movie details
  */
-const fetchDetails = async (id: number|string) => {
+const fetchDetails = async (id: number | string) => {
   try {
-    // isLoading.value = true
+    isLoading.value = true;
     const data = await fetchMovieDetails(id);
-    console.log('data', data)
     // Add to store collection.
     useRepo(Movie).save(data);
   } catch (error) {
-    console.error('Error fetching movie details:', error)
+    console.error("Error fetching movie details:", error);
-    // movie.value = null
   } finally {
-    // isLoading.value = false
+    isLoading.value = false;
   }
-}
+};
 /**
  * Format runtime
  * @param minutes
  */
 const formatRuntime = (minutes: number) => {
-  if (!minutes) return 'Durée inconnue';
+  if (!minutes) return "Durée inconnue";
   // Find nb hours.
   const hours = Math.floor(minutes / 60);
   // Find last minutes.
   const mins = minutes % 60;
   return `${hours}h ${mins}min`;
-}
+};
 /**
  * Format vote count if > 1000.
@@ -84,21 +86,33 @@ const formatRuntime = (minutes: number) => {
  */
 const formatVoteCount = (count: number) => {
   if (count >= 1000) {
-    return `${(count / 1000).toFixed(1)}k votes`
+    return `${(count / 1000).toFixed(1)}k votes`;
+  }
+  return `${count} votes`;
+};
+
+async function fetchCredits(id: number|string) {
+  try {
+    const data = await fetchMovieCredits(id) as CreditsResponse;
+    data.movie_id = id;
+    // Add to store collection.
+    console.log('credit response', data)
+
+    useRepo(Credit).save(data);
+  } catch (error) {
+    console.error("Error fetching movie credits:", error);
   }
-  return `${count} votes`
 }
 //#endregion
-
 //#region --Global event--.
 onMounted(() => {
   // Fetch data on component mount.
   if (unref(movieId)) {
-    const id = unref(movieId) as string|number;
+    const id = unref(movieId) as string | number;
-    fetchDetails(id)
+    fetchDetails(id);
+    fetchCredits(id)
   }
-  // fetchMovieCredits()
   // loadComments()
 });
 //#endregion
@@ -107,19 +121,19 @@ onMounted(() => {
 <template>
   <section>
     <!-- Skeleton loader pendant le chargement -->
-    <ui-components-skeleton-movie-detail-loader />
+    <ui-components-skeleton-movie-detail-loader v-if="isLoading" />
     <!-- Contenu du film -->
-    <div v-if="movie" class="relative">
+    <div v-else-if="movie" class="relative">
       <!-- Backdrop image -->
       <div class="absolute inset-0 h-[500px] overflow-hidden z-0">
-        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-gray-900"/>
+        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-gray-900" />
         <img
           v-if="movie.backdrop_path"
-          :src="`https://image.tmdb.org/t/p/original${movie.backdrop_path}`"
           :alt="movie.title"
+          :src="`https://image.tmdb.org/t/p/original${movie.backdrop_path}`"
           class="w-full h-full object-cover opacity-30"
-        >
+        />
       </div>
       <!-- Contenu principal -->
@@ -138,10 +152,10 @@ onMounted(() => {
             <div class="rounded-lg overflow-hidden shadow-lg bg-gray-800">
               <img
                 v-if="movie.poster_path"
-                :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`"
                 :alt="movie.title"
+                :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`"
                 class="w-full h-auto"
-              >
+              />
               <div v-else class="aspect-[2/3] bg-gray-700 flex items-center justify-center">
                 <FilmIcon :size="64" class="text-gray-500" />
               </div>
@@ -169,11 +183,7 @@ onMounted(() => {
             <!-- Genres -->
             <div class="mb-6">
               <div class="flex flex-wrap gap-2">
-                <span
+                <span v-for="genre in movie.genres" :key="genre.id" class="px-3 py-1 bg-gray-800 rounded-full text-sm">
-                  v-for="genre in movie.genres"
-                  :key="genre.id"
-                  class="px-3 py-1 bg-gray-800 rounded-full text-sm"
-                >
                   {{ genre.name }}
                 </span>
               </div>
@@ -182,9 +192,8 @@ onMounted(() => {
             <!-- Synopsis -->
             <div class="mb-6">
               <h2 class="text-xl font-bold mb-2">Synopsis</h2>
-              <p class="text-gray-300">{{ movie.overview || 'Aucun synopsis disponible.' }}</p>
+              <p class="text-gray-300">{{ movie.overview || "Aucun synopsis disponible." }}</p>
             </div>
-
           </div>
         </div>
       </div>
@@ -192,6 +201,4 @@ onMounted(() => {
   </section>
 </template>
-<style scoped>
+<style scoped></style>
-
-</style>