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