From 00d8af722fa44752471e5b9a59617c7b3bc79653 Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Mon, 7 Oct 2024 14:25:55 +0200
Subject: [PATCH] FEAT: get & show movie details datas

---
 README.md                  | 19 +------------------
 pages/details/[id].vue     | 24 ++++++++++++++++++++----
 server/api/details/[id].ts | 12 ++++++++++--
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 2ba2e68..a4e2dcf 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,4 @@
-Test technique
-Ce test a pour vocation à évaluer les compétences techniques et le savoir-faire sur la
-technologie. La qualité du test sera l’aspect le plus important dans ce rendu. Toute prise
-d’initiative supplémentaire sera évidemment prise en compte. En cas de doute sur certains
-points de ce test, ne pas hésiter à nous contacter à it@hellocse.fr.
-À l’aide de VueJS 3 vous allez devoir réaliser un interface de films de cinéma en utilisant
-l’API TMDB : https://developer.themoviedb.org/reference/intro/getting-started. Vous devrez
-réaliser 3 pages :
-- Liste des films
-- Ajouter un défilement infini
-- Ajouter un filtre de recherche sur le nom du film
-(https://developer.themoviedb.org/reference/search-movie)
-- Lorsque l’on clique sur un film, on souhaite voir le détail des informations de
-ce film.
-- Détail d’un film avec les informations relatives à ce film
-(https://developer.themoviedb.org/reference/movie-details)
-- Les données du film à afficher sur cette pages sont :
-- L’affiche, le titre, le synopsis, le réalisateur, les stars / têtes d’affiche,
+les stars / têtes d’affiche,
 les catégories, la note TMDB et le nombre de personnes ayant noté le
 film.
 - En dessous des informations du film, on souhaite pouvoir laisser des
diff --git a/pages/details/[id].vue b/pages/details/[id].vue
index 2b4076e..67c4ad4 100644
--- a/pages/details/[id].vue
+++ b/pages/details/[id].vue
@@ -1,12 +1,24 @@
 <template>
   <section>
     <img :src="config.public.IMG_BASE_URL + film.poster_path" :alt="film.title">
-    <span class="flex flex-row">
+    <span class="">
       {{ film.title }}
-      {{ film.original_title }}
+      {{ film.overview }}
+      {{ director }}
+      <ul>
+        <li v-for="star in film.credits.cast">
+          {{ star.name }}
+        </li>
+      </ul>
+      <ul>
+        <li v-for="genre in film.genres">
+          {{ genre.name }}
+        </li>
+      </ul>
+      <!-- {{ film.vote_count }} -->
+      <!-- {{ film.release_date }} -->
+      {{ film.vote_average }}
       {{ film.vote_count }}
-      {{ film.release_date }}
-      {{ film.id }}
     </span>
   </section>
 </template>
@@ -16,10 +28,14 @@ const config = useRuntimeConfig()
 const film = ref()
 const route = useRoute()
 const filmId = ref('')
+const director = ref('')
+
 filmId.value = route.params.id
 
 if (filmId.value !== '') {
   const { data } = await useFetch(`/api/details/${filmId.value}`)
   film.value = data.value
+  director.value = film.value.credits.crew.filter((member) => member.job === 'Director')
+  director.value = director.value[0].name
 }
 </script>
diff --git a/server/api/details/[id].ts b/server/api/details/[id].ts
index f0db726..79e7cc7 100644
--- a/server/api/details/[id].ts
+++ b/server/api/details/[id].ts
@@ -2,12 +2,20 @@ import fetch from 'node-fetch'
 
 export default eventHandler(async (req) => {
   const id = req.context.params?.id || ''
-  const url = `https://api.themoviedb.org/3/movie/${id}`
+  const url = `https://api.themoviedb.org/3/movie/${id}?language=fr-FR`
+  const url_credits = `https://api.themoviedb.org/3/movie/${id}/credits?language=fr-FR`
   const config = useRuntimeConfig(req)
 
   const response = await fetch(url, {
     method: 'get',
     headers: { 'Content-Type': 'application/json', 'Authorization': config.API_BEARER }
   })
-  return await response.json()
+  const response_credits = await fetch(url_credits, {
+    method: 'get',
+    headers: { 'Content-Type': 'application/json', 'Authorization': config.API_BEARER }
+  })
+
+  let details = await response.json()
+  details.credits = await response_credits.json()
+  return details
 })