Showing
7 changed files
with
107 additions
and
48 deletions
| 1 | +0.5.0: | ||
| 2 | +- Mise en place du plugin oFetch pour personnaliser la gestion des requêtes. | ||
| 3 | +- Ajout interface/response/TMDB. | ||
| 4 | +- Factorisation du composable tMDB afin de remplacer les appels fetch natif par useFetch. | ||
| 5 | + | ||
| 1 | 0.4.0: | 6 | 0.4.0: | 
| 2 | - Modification de la config eslint avec la suppression de tout ce qui concerne prettier, suppression du module @nuxt/eslint, contenant le module eslint/recommanded, et remplacement par le module @antfu/eslint-config, plus complet et simple. | 7 | - Modification de la config eslint avec la suppression de tout ce qui concerne prettier, suppression du module @nuxt/eslint, contenant le module eslint/recommanded, et remplacement par le module @antfu/eslint-config, plus complet et simple. | 
| 3 | - Lintfix selon les règles de @antfu/eslint-config. | 8 | - Lintfix selon les règles de @antfu/eslint-config. | 
| 1 | -import type { RuntimeConfig } from "nuxt/schema"; | 1 | +import type { MovieInterface } from "~/interfaces/movie"; | 
| 2 | +import type { TMDBCollectionResponse } from "~/interfaces/response/TMDB"; | ||
| 2 | 3 | ||
| 3 | export function useTMDB() { | 4 | export function useTMDB() { | 
| 4 | - const runtimeconfig: RuntimeConfig = useRuntimeConfig(); | 5 | + const paramsBase = { | 
| 5 | - const apiUrl = runtimeconfig.public.apiTMDBUrl; | 6 | + language: "fr-FR", | 
| 6 | - const apiKey = runtimeconfig.public.apiTMDBSecret; | 7 | + }; | 
| 7 | 8 | ||
| 8 | /** | 9 | /** | 
| 9 | * Fetch popular movies. | 10 | * Fetch popular movies. | 
| 10 | * @param page | 11 | * @param page | 
| 11 | */ | 12 | */ | 
| 12 | const fetchPopularMovies = async (page: number) => { | 13 | const fetchPopularMovies = async (page: number) => { | 
| 13 | - try { | 14 | + const { data, status, error, execute } = await useFetch(`/movie/popular`, { | 
| 14 | - const response = await fetch(`${apiUrl}/movie/popular?api_key=${apiKey}&language=fr-FR&page=${page}`); | 15 | + params: { ...paramsBase, page }, | 
| 15 | - if (!response.ok) throw new Error("An error occurred when fetching popular movies"); | 16 | + }); | 
| 16 | - return await response.json(); | 17 | + if (unref(status) === "idle") await execute(); | 
| 17 | - } | 18 | + if (unref(status) === "error" && unref(error)) throw new Error(`Error fetching popular movies: ${error}`); | 
| 18 | - catch (error) { | 19 | + return unref(data) as TMDBCollectionResponse; | 
| 19 | - throw new Error(`Error fetching popular movies: ${error}`); | ||
| 20 | - } | ||
| 21 | }; | 20 | }; | 
| 22 | 21 | ||
| 23 | /** | 22 | /** | 
| @@ -26,16 +25,12 @@ export function useTMDB() { | @@ -26,16 +25,12 @@ export function useTMDB() { | ||
| 26 | * @param page | 25 | * @param page | 
| 27 | */ | 26 | */ | 
| 28 | const searchMovies = async (query: string, page: number) => { | 27 | const searchMovies = async (query: string, page: number) => { | 
| 29 | - try { | 28 | + const { data, status, error, execute } = await useFetch(`/search/movie`, { | 
| 30 | - const response = await fetch( | 29 | + params: { ...paramsBase, page, query: encodeURIComponent(query) }, | 
| 31 | - `${apiUrl}/search/movie?api_key=${apiKey}&language=fr-FR&query=${encodeURIComponent(query)}&page=${page}`, | 30 | + }); | 
| 32 | - ); | 31 | + if (unref(status) === "idle") await execute(); | 
| 33 | - if (!response.ok) throw new Error("An error occurred when searching movies"); | 32 | + if (unref(status) === "error" && unref(error)) throw new Error(`Error searching movies: ${error}`); | 
| 34 | - return await response.json(); | 33 | + return unref(data) as TMDBCollectionResponse; | 
| 35 | - } | ||
| 36 | - catch (error) { | ||
| 37 | - throw new Error(`Error searching movies: ${error}`); | ||
| 38 | - } | ||
| 39 | }; | 34 | }; | 
| 40 | 35 | ||
| 41 | /** | 36 | /** | 
| @@ -43,28 +38,24 @@ export function useTMDB() { | @@ -43,28 +38,24 @@ export function useTMDB() { | ||
| 43 | * @param id | 38 | * @param id | 
| 44 | */ | 39 | */ | 
| 45 | const fetchMovieDetails = async (id: number | string) => { | 40 | const fetchMovieDetails = async (id: number | string) => { | 
| 46 | - try { | 41 | + const { data, status, error, execute } = await useFetch(`/movie/${id}`, { | 
| 47 | - const response = await fetch(`${apiUrl}/movie/${id}?api_key=${apiKey}&language=fr-FR`); | 42 | + params: { ...paramsBase }, | 
| 48 | - if (!response.ok) throw new Error("An error occurred when fetching movie details"); | 43 | + }); | 
| 49 | - return await response.json(); | 44 | + if (unref(status) === "idle") await execute(); | 
| 50 | - } | 45 | + if (unref(status) === "error" && unref(error)) throw new Error(`An error occurred when fetching movie details: ${error}`); | 
| 51 | - catch (error) { | 46 | + return unref(data) as MovieInterface; | 
| 52 | - throw new Error(`Error fetching details: ${error}`); | ||
| 53 | - } | ||
| 54 | }; | 47 | }; | 
| 55 | 48 | ||
| 56 | /** | 49 | /** | 
| 57 | * Fetch movie credits | 50 | * Fetch movie credits | 
| 58 | */ | 51 | */ | 
| 59 | const fetchMovieCredits = async (id: number | string) => { | 52 | const fetchMovieCredits = async (id: number | string) => { | 
| 60 | - try { | 53 | + const { data, status, error, execute } = await useFetch(`/movie/${id}/credits`, { | 
| 61 | - const response = await fetch(`${apiUrl}/movie/${id}/credits?api_key=${apiKey}&language=fr-FR`); | 54 | + params: { ...paramsBase }, | 
| 62 | - if (!response.ok) throw new Error("An error occurred when fetching movie credits"); | 55 | + }); | 
| 63 | - return await response.json(); | 56 | + if (unref(status) === "idle") await execute(); | 
| 64 | - } | 57 | + if (unref(status) === "error" && unref(error)) throw new Error(`Error fetching movie credits: ${error}`); | 
| 65 | - catch (error) { | 58 | + return unref(data); | 
| 66 | - throw new Error(`Error fetching movie credits: ${error}`); | ||
| 67 | - } | ||
| 68 | }; | 59 | }; | 
| 69 | 60 | ||
| 70 | return { fetchPopularMovies, searchMovies, fetchMovieDetails, fetchMovieCredits }; | 61 | return { fetchPopularMovies, searchMovies, fetchMovieDetails, fetchMovieCredits }; | 
interfaces/response/TMDB.ts
0 → 100644
| @@ -23,12 +23,6 @@ export default defineNuxtConfig({ | @@ -23,12 +23,6 @@ export default defineNuxtConfig({ | ||
| 23 | 23 | ||
| 24 | // css: ['~/assets/css/main.scss'], | 24 | // css: ['~/assets/css/main.scss'], | 
| 25 | 25 | ||
| 26 | - eslint: { | ||
| 27 | - config: { | ||
| 28 | - stylistic: true, | ||
| 29 | - }, | ||
| 30 | - }, | ||
| 31 | - | ||
| 32 | modules: [ | 26 | modules: [ | 
| 33 | "@nuxt/icon", | 27 | "@nuxt/icon", | 
| 34 | "@nuxt/image", | 28 | "@nuxt/image", | 
| @@ -75,8 +69,8 @@ export default defineNuxtConfig({ | @@ -75,8 +69,8 @@ export default defineNuxtConfig({ | ||
| 75 | apiSecret: "123", | 69 | apiSecret: "123", | 
| 76 | // Keys within public are also exposed client-side. | 70 | // Keys within public are also exposed client-side. | 
| 77 | public: { | 71 | public: { | 
| 78 | - apiTMDBSecret: process.env.NUXT_ENV_TMDB_API_KEY, | ||
| 79 | apiTMDBUrl: process.env.NUXT_ENV_TMDB_URL, | 72 | apiTMDBUrl: process.env.NUXT_ENV_TMDB_URL, | 
| 73 | + apiTMDBBearer: process.env.NUXT_ENV_TMDB_BEARER, | ||
| 80 | apiTinyMceSecret: process.env.NUXT_ENV_TINY_MCE_API_KEY, | 74 | apiTinyMceSecret: process.env.NUXT_ENV_TINY_MCE_API_KEY, | 
| 81 | }, | 75 | }, | 
| 82 | }, | 76 | }, | 
| 1 | { | 1 | { | 
| 2 | "name": "nuxt-app", | 2 | "name": "nuxt-app", | 
| 3 | - "version": "0.4.0", | 3 | + "version": "0.5.0", | 
| 4 | "lockfileVersion": 3, | 4 | "lockfileVersion": 3, | 
| 5 | "requires": true, | 5 | "requires": true, | 
| 6 | "packages": { | 6 | "packages": { | 
| 7 | "": { | 7 | "": { | 
| 8 | "name": "nuxt-app", | 8 | "name": "nuxt-app", | 
| 9 | - "version": "0.4.0", | 9 | + "version": "0.5.0", | 
| 10 | "hasInstallScript": true, | 10 | "hasInstallScript": true, | 
| 11 | "dependencies": { | 11 | "dependencies": { | 
| 12 | "@nuxt/icon": "^1.12.0", | 12 | "@nuxt/icon": "^1.12.0", | 
plugins/oFetch.ts
0 → 100644
| 1 | +import type { $Fetch } from "nitropack"; | ||
| 2 | +import type { RuntimeConfig } from "nuxt/schema"; | ||
| 3 | +import { ofetch } from "ofetch"; | ||
| 4 | + | ||
| 5 | +/** | ||
| 6 | + * Ce plugin est essentiel ! | ||
| 7 | + * Il sert à paramétrer 'ofetch' qui est d'office utilisé par Nuxt à l'initialisation de notre app. | ||
| 8 | + * (Sert par exemple pour toutes les méthodes liées au provider d'authentification). | ||
| 9 | + */ | ||
| 10 | +export default defineNuxtPlugin(async (_nuxtApp) => { | ||
| 11 | + // Récupération des variables d'environnement (hydratées dans le nuxt.config.ts). | ||
| 12 | + const runtimeConfig: RuntimeConfig = useRuntimeConfig(); | ||
| 13 | + // On rend la configuration que l'on crée globale grâce à 'globalThis.$fetch'. | ||
| 14 | + globalThis.$fetch = ofetch.create({ | ||
| 15 | + /** | ||
| 16 | + * Request interceptor. | ||
| 17 | + */ | ||
| 18 | + onRequest({ request, options }) { | ||
| 19 | + if (typeof request === "string" && request.includes("movie")) { | ||
| 20 | + /** empty */ | ||
| 21 | + // Set the baseURL to the TMDB API URL. | ||
| 22 | + // Base url example : https://nom-de-domaine/something. | ||
| 23 | + options.baseURL = runtimeConfig.public.apiTMDBUrl; | ||
| 24 | + | ||
| 25 | + // Set the request headers | ||
| 26 | + // note that this relies on ofetch >= 1.4.0 - you may need to refresh your lockfile. | ||
| 27 | + options.headers.set("Authorization", `Bearer ${runtimeConfig.public.apiTMDBBearer}`); | ||
| 28 | + } | ||
| 29 | + }, | ||
| 30 | + /** | ||
| 31 | + * Request error interceptor. | ||
| 32 | + */ | ||
| 33 | + onRequestError({ request, options, error }) { | ||
| 34 | + // Handle the request errors | ||
| 35 | + // Do something before request error sent. | ||
| 36 | + if (request) { /** empty */ } | ||
| 37 | + if (options) { /** empty */ } | ||
| 38 | + if (error) { /** empty */ } | ||
| 39 | + }, | ||
| 40 | + /** | ||
| 41 | + * Response interceptor. | ||
| 42 | + */ | ||
| 43 | + onResponse({ request, response, options }) { | ||
| 44 | + // Process the response data | ||
| 45 | + if (request) { /** empty */ } | ||
| 46 | + if (response) { /** empty */ } | ||
| 47 | + // If response return 401 code. | ||
| 48 | + // if ( | ||
| 49 | + // (response && response.code && response.code === 401) | ||
| 50 | + // || (response && response.status && response.status === 401) | ||
| 51 | + // ) { | ||
| 52 | + // // Do something if 401. | ||
| 53 | + // } | ||
| 54 | + if (options) { /** empty */ } | ||
| 55 | + }, | ||
| 56 | + onResponseError({ request, response, options }) { | ||
| 57 | + // Handle the response errors | ||
| 58 | + if (request) { /** empty */ } | ||
| 59 | + if (response) { /** empty */ } | ||
| 60 | + if (options) { /** empty */ } | ||
| 61 | + }, | ||
| 62 | + }) as unknown as $Fetch; | ||
| 63 | +}); | 
- 
Please register or login to post a comment