FEAT: get & show movie details datas

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

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>

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
 })