Merge tag '0.5.0' into develop

0.5.0

+0.5.0:
+- Mise en place du plugin oFetch pour personnaliser la gestion des requêtes.
+- Ajout interface/response/TMDB.
+- Factorisation du composable tMDB afin de remplacer les appels fetch natif par useFetch.
+
 0.4.0:
 - 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.
 - Lintfix selon les règles de @antfu/eslint-config.

-import type { RuntimeConfig } from "nuxt/schema";
+import type { MovieInterface } from "~/interfaces/movie";
+import type { TMDBCollectionResponse } from "~/interfaces/response/TMDB";
 
 export function useTMDB() {
-  const runtimeconfig: RuntimeConfig = useRuntimeConfig();
-  const apiUrl = runtimeconfig.public.apiTMDBUrl;
-  const apiKey = runtimeconfig.public.apiTMDBSecret;
+  const paramsBase = {
+    language: "fr-FR",
+  };
 
   /**
    * Fetch popular movies.
    * @param page
    */
   const fetchPopularMovies = async (page: number) => {
-    try {
-      const response = await fetch(`${apiUrl}/movie/popular?api_key=${apiKey}&language=fr-FR&page=${page}`);
-      if (!response.ok) throw new Error("An error occurred when fetching popular movies");
-      return await response.json();
-    }
-    catch (error) {
-      throw new Error(`Error fetching popular movies: ${error}`);
-    }
+    const { data, status, error, execute } = await useFetch(`/movie/popular`, {
+      params: { ...paramsBase, page },
+    });
+    if (unref(status) === "idle") await execute();
+    if (unref(status) === "error" && unref(error)) throw new Error(`Error fetching popular movies: ${error}`);
+    return unref(data) as TMDBCollectionResponse;
   };
 
   /**
@@ -26,16 +25,12 @@ export function useTMDB() {
    * @param page
    */
   const searchMovies = async (query: string, page: number) => {
-    try {
-      const response = await fetch(
-        `${apiUrl}/search/movie?api_key=${apiKey}&language=fr-FR&query=${encodeURIComponent(query)}&page=${page}`,
-      );
-      if (!response.ok) throw new Error("An error occurred when searching movies");
-      return await response.json();
-    }
-    catch (error) {
-      throw new Error(`Error searching movies: ${error}`);
-    }
+    const { data, status, error, execute } = await useFetch(`/search/movie`, {
+      params: { ...paramsBase, page, query: encodeURIComponent(query) },
+    });
+    if (unref(status) === "idle") await execute();
+    if (unref(status) === "error" && unref(error)) throw new Error(`Error searching movies: ${error}`);
+    return unref(data) as TMDBCollectionResponse;
   };
 
   /**
@@ -43,28 +38,24 @@ export function useTMDB() {
    * @param id
    */
   const fetchMovieDetails = async (id: number | string) => {
-    try {
-      const response = await fetch(`${apiUrl}/movie/${id}?api_key=${apiKey}&language=fr-FR`);
-      if (!response.ok) throw new Error("An error occurred when fetching movie details");
-      return await response.json();
-    }
-    catch (error) {
-      throw new Error(`Error fetching details: ${error}`);
-    }
+    const { data, status, error, execute } = await useFetch(`/movie/${id}`, {
+      params: { ...paramsBase },
+    });
+    if (unref(status) === "idle") await execute();
+    if (unref(status) === "error" && unref(error)) throw new Error(`An error occurred when fetching movie details: ${error}`);
+    return unref(data) as MovieInterface;
   };
 
   /**
    * Fetch movie credits
    */
   const fetchMovieCredits = async (id: number | string) => {
-    try {
-      const response = await fetch(`${apiUrl}/movie/${id}/credits?api_key=${apiKey}&language=fr-FR`);
-      if (!response.ok) throw new Error("An error occurred when fetching movie credits");
-      return await response.json();
-    }
-    catch (error) {
-      throw new Error(`Error fetching movie credits: ${error}`);
-    }
+    const { data, status, error, execute } = await useFetch(`/movie/${id}/credits`, {
+      params: { ...paramsBase },
+    });
+    if (unref(status) === "idle") await execute();
+    if (unref(status) === "error" && unref(error)) throw new Error(`Error fetching movie credits: ${error}`);
+    return unref(data);
   };
 
   return { fetchPopularMovies, searchMovies, fetchMovieDetails, fetchMovieCredits };

+export interface TMDBCollectionResponse {
+  page: number;
+  results: Array<unknown>;
+  total_pages: number;
+  total_results: number;
+}

@@ -23,12 +23,6 @@ export default defineNuxtConfig({
 
   // css: ['~/assets/css/main.scss'],
 
-  eslint: {
-    config: {
-      stylistic: true,
-    },
-  },
-
   modules: [
     "@nuxt/icon",
     "@nuxt/image",
@@ -75,8 +69,8 @@ export default defineNuxtConfig({
     apiSecret: "123",
     // Keys within public are also exposed client-side.
     public: {
-      apiTMDBSecret: process.env.NUXT_ENV_TMDB_API_KEY,
       apiTMDBUrl: process.env.NUXT_ENV_TMDB_URL,
+      apiTMDBBearer: process.env.NUXT_ENV_TMDB_BEARER,
       apiTinyMceSecret: process.env.NUXT_ENV_TINY_MCE_API_KEY,
     },
   },

 {
   "name": "nuxt-app",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nuxt-app",
-      "version": "0.4.0",
+      "version": "0.5.0",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxt/icon": "^1.12.0",

 {
   "name": "nuxt-app",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": true,
   "type": "module",
   "scripts": {

+import type { $Fetch } from "nitropack";
+import type { RuntimeConfig } from "nuxt/schema";
+import { ofetch } from "ofetch";
+
+/**
+ * Ce plugin est essentiel !
+ * Il sert à paramétrer 'ofetch' qui est d'office utilisé par Nuxt à l'initialisation de notre app.
+ * (Sert par exemple pour toutes les méthodes liées au provider d'authentification).
+ */
+export default defineNuxtPlugin(async (_nuxtApp) => {
+  // Récupération des variables d'environnement (hydratées dans le nuxt.config.ts).
+  const runtimeConfig: RuntimeConfig = useRuntimeConfig();
+  // On rend la configuration que l'on crée globale grâce à 'globalThis.$fetch'.
+  globalThis.$fetch = ofetch.create({
+    /**
+     * Request interceptor.
+     */
+    onRequest({ request, options }) {
+      if (typeof request === "string" && request.includes("movie")) {
+        /** empty */
+        // Set the baseURL to the TMDB API URL.
+        // Base url example : https://nom-de-domaine/something.
+        options.baseURL = runtimeConfig.public.apiTMDBUrl;
+
+        // Set the request headers
+        // note that this relies on ofetch >= 1.4.0 - you may need to refresh your lockfile.
+        options.headers.set("Authorization", `Bearer ${runtimeConfig.public.apiTMDBBearer}`);
+      }
+    },
+    /**
+     * Request error interceptor.
+     */
+    onRequestError({ request, options, error }) {
+      // Handle the request errors
+      // Do something before request error sent.
+      if (request) { /** empty */ }
+      if (options) { /** empty */ }
+      if (error) { /** empty */ }
+    },
+    /**
+     * Response interceptor.
+     */
+    onResponse({ request, response, options }) {
+      // Process the response data
+      if (request) { /** empty */ }
+      if (response) { /** empty */ }
+      // If response return 401 code.
+      // if (
+      //   (response && response.code && response.code === 401)
+      //   || (response && response.status && response.status === 401)
+      // ) {
+      //   // Do something if 401.
+      // }
+      if (options) { /** empty */ }
+    },
+    onResponseError({ request, response, options }) {
+      // Handle the response errors
+      if (request) { /** empty */ }
+      if (response) { /** empty */ }
+      if (options) { /** empty */ }
+    },
+  }) as unknown as $Fetch;
+});