Bruno Predot

Merge tag '0.5.0' into develop

0.5.0
  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 };
  1 +export interface TMDBCollectionResponse {
  2 + page: number;
  3 + results: Array<unknown>;
  4 + total_pages: number;
  5 + total_results: number;
  6 +}
@@ -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",
1 { 1 {
2 "name": "nuxt-app", 2 "name": "nuxt-app",
3 - "version": "0.4.0", 3 + "version": "0.5.0",
4 "private": true, 4 "private": true,
5 "type": "module", 5 "type": "module",
6 "scripts": { 6 "scripts": {
  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 +});