lintfix selon les règles de @antfu/eslint-config.

 <script lang="ts" setup>
 <script lang="ts" setup>
-//#region --Props--.
+import type { MovieInterface } from "~/interfaces/movie";
+// #region --Props--.
 import { useDateFormat } from "@vueuse/core";
 import { useDateFormat } from "@vueuse/core";
 import { FilmIcon } from "lucide-vue-next";
 import { FilmIcon } from "lucide-vue-next";
-import type { MovieInterface } from "~/interfaces/movie";
-//#endregion
+// #endregion
 
 
-//#region --Props--.
+// #region --Props--.
 /** Typescript typage */
 /** Typescript typage */
 defineProps<{
 defineProps<{
   movie: MovieInterface;
   movie: MovieInterface;
@@ -18,7 +18,7 @@ defineProps<{
 //     nullable: false,
 //     nullable: false,
 //   },
 //   },
 // });
 // });
-//#endregion
+// #endregion
 </script>
 </script>
 
 
 <template>
 <template>

 <script lang="ts" setup>
 <script lang="ts" setup>
-//#region --Import--.
+// #region --Import--.
 import type { MovieCommentInterface } from "~/interfaces/movieComment";
 import type { MovieCommentInterface } from "~/interfaces/movieComment";
 import { MessageSquareIcon } from "lucide-vue-next";
 import { MessageSquareIcon } from "lucide-vue-next";
-//#endregion
+// #endregion
 
 
-//#region --Props--.
+// #region --Props--.
 /** Typescript typage */
 /** Typescript typage */
 const props = defineProps<{
 const props = defineProps<{
   comments: Array<MovieCommentInterface>;
   comments: Array<MovieCommentInterface>;
@@ -17,9 +17,9 @@ const props = defineProps<{
 //     nullable: false,
 //     nullable: false,
 //   },
 //   },
 // });
 // });
-//#endregion
+// #endregion
 
 
-//#region --Watch--.
+// #region --Watch--.
 watch(
 watch(
   () => props.comments,
   () => props.comments,
   (comments) => {
   (comments) => {
@@ -34,7 +34,7 @@ watch(
   },
   },
   { immediate: true },
   { immediate: true },
 );
 );
-//#endregion
+// #endregion
 </script>
 </script>
 
 
 <template>
 <template>

 <script lang="ts" setup>
 <script lang="ts" setup>
-//#region --import--.
+import type { MovieInterface } from "~/interfaces/movie";
+import { SearchXIcon } from "lucide-vue-next";
+// #region --import--.
 import { onBeforeUnmount, ref } from "vue";
 import { onBeforeUnmount, ref } from "vue";
 import { useTMDB } from "~/composables/tMDB";
 import { useTMDB } from "~/composables/tMDB";
 import { Movie } from "~/models/movie";
 import { Movie } from "~/models/movie";
-import { SearchXIcon } from "lucide-vue-next";
-import type { MovieInterface } from "~/interfaces/movie";
-//#endregion
+// #endregion
 
 
-//#region --Declaration--.
+// #region --Declaration--.
 const { fetchPopularMovies, searchMovies } = useTMDB();
 const { fetchPopularMovies, searchMovies } = useTMDB();
-//#endregion
+// #endregion
 
 
-//#region --Data/refs--.
+// #region --Data/refs--.
 const isInitialLoading = ref(true);
 const isInitialLoading = ref(true);
 const isLoadingMore = ref(false);
 const isLoadingMore = ref(false);
 const currentPage = ref(1);
 const currentPage = ref(1);
@@ -21,20 +21,20 @@ const searchQuery = ref("");
 const loadMoreTrigger = ref<HTMLElement | null>(null);
 const loadMoreTrigger = ref<HTMLElement | null>(null);
 /** Instance de IntersectionObserver */
 /** Instance de IntersectionObserver */
 const observer = ref<IntersectionObserver | null>(null);
 const observer = ref<IntersectionObserver | null>(null);
-//#endregion
+// #endregion
 
 
-//#region --Computed--.
+// #region --Computed--.
 const movies = computed(() => {
 const movies = computed(() => {
   return useRepo(Movie).query().orderBy("popularity", "desc").get() as unknown as MovieInterface[];
   return useRepo(Movie).query().orderBy("popularity", "desc").get() as unknown as MovieInterface[];
 });
 });
-//#endregion
+// #endregion
 
 
-//#region --Function--.
+// #region --Function--.
 /**
 /**
  * Fetch popular movies
  * Fetch popular movies
  * @param page
  * @param page
  */
  */
-const fetchMovies = async (page: number) => {
+async function fetchMovies(page: number) {
   try {
   try {
     isLoadingMore.value = true;
     isLoadingMore.value = true;
     const data = await fetchPopularMovies(page);
     const data = await fetchPopularMovies(page);
@@ -42,26 +42,29 @@ const fetchMovies = async (page: number) => {
     if (isInitialLoading.value) {
     if (isInitialLoading.value) {
       // First fetch, erase old data before save.
       // First fetch, erase old data before save.
       useRepo(Movie).fresh(data.results);
       useRepo(Movie).fresh(data.results);
-    } else {
+    }
+    else {
       // Add to store collection.
       // Add to store collection.
       useRepo(Movie).save(data.results);
       useRepo(Movie).save(data.results);
     }
     }
     totalPages.value = data.total_pages;
     totalPages.value = data.total_pages;
     currentPage.value = page;
     currentPage.value = page;
-  } catch (error) {
+  }
+  catch (error) {
     console.error("Error fetching popular movies:", error);
     console.error("Error fetching popular movies:", error);
-  } finally {
+  }
+  finally {
     isInitialLoading.value = false;
     isInitialLoading.value = false;
     isLoadingMore.value = false;
     isLoadingMore.value = false;
   }
   }
-};
+}
 
 
 /**
 /**
  * Search movies
  * Search movies
  * @param query
  * @param query
  * @param page
  * @param page
  */
  */
-const search = async (query: string, page: number) => {
+async function search(query: string, page: number) {
   // If empty search, fetch popular movies.
   // If empty search, fetch popular movies.
   if (!query.trim()) {
   if (!query.trim()) {
     await fetchMovies(1);
     await fetchMovies(1);
@@ -77,19 +80,22 @@ const search = async (query: string, page: number) => {
     if (isInitialLoading.value) {
     if (isInitialLoading.value) {
       // First fetch, erase old data before save.
       // First fetch, erase old data before save.
       useRepo(Movie).fresh(data.results);
       useRepo(Movie).fresh(data.results);
-    } else {
+    }
+    else {
       // Add to store collection.
       // Add to store collection.
       useRepo(Movie).save(data.results);
       useRepo(Movie).save(data.results);
     }
     }
     totalPages.value = data.total_pages;
     totalPages.value = data.total_pages;
     currentPage.value = page;
     currentPage.value = page;
-  } catch (error) {
+  }
+  catch (error) {
     console.error("Error searching movies:", error);
     console.error("Error searching movies:", error);
-  } finally {
+  }
+  finally {
     isInitialLoading.value = false;
     isInitialLoading.value = false;
     isLoadingMore.value = false;
     isLoadingMore.value = false;
   }
   }
-};
+}
 
 
 function createIntersectionObserver() {
 function createIntersectionObserver() {
   return new IntersectionObserver(
   return new IntersectionObserver(
@@ -99,7 +105,8 @@ function createIntersectionObserver() {
         if (searchQuery.value) {
         if (searchQuery.value) {
           // Continue searching query if already active.
           // Continue searching query if already active.
           search(searchQuery.value, currentPage.value + 1);
           search(searchQuery.value, currentPage.value + 1);
-        } else {
+        }
+        else {
           // Continue fetching popular movies.
           // Continue fetching popular movies.
           fetchMovies(currentPage.value + 1);
           fetchMovies(currentPage.value + 1);
         }
         }
@@ -122,9 +129,9 @@ function handleClearSearchEvent() {
   fetchMovies(1);
   fetchMovies(1);
 }
 }
 
 
-//#endregion
+// #endregion
 
 
-//#region --Global event--.
+// #region --Global event--.
 onMounted(() => {
 onMounted(() => {
   // First loading.
   // First loading.
   fetchMovies(1);
   fetchMovies(1);
@@ -146,7 +153,7 @@ onBeforeUnmount(() => {
     observer.value.disconnect();
     observer.value.disconnect();
   }
   }
 });
 });
-//#endregion
+// #endregion
 </script>
 </script>
 
 
 <template>
 <template>
@@ -157,8 +164,8 @@ onBeforeUnmount(() => {
     <!-- Barre de recherche -->
     <!-- Barre de recherche -->
     <ui-components-search-bar
     <ui-components-search-bar
       placeholder="Rechercher un film..."
       placeholder="Rechercher un film..."
-      @event:search="handleSearchEvent"
-      @event:clear_search="handleClearSearchEvent"
+      @event-search="handleSearchEvent"
+      @event-clear-search="handleClearSearchEvent"
     />
     />
 
 
     <!-- Loading Skeleton -->
     <!-- Loading Skeleton -->

 <script lang="ts" setup>
 <script lang="ts" setup>
-//#region --Import--.
+// #region --Import--.
 import type { Genre } from "~/interfaces/movie";
 import type { Genre } from "~/interfaces/movie";
-//#endregion
+// #endregion
 
 
-//#region --Props--.
+// #region --Props--.
 defineProps({
 defineProps({
   genres: {
   genres: {
     type: Array<Genre>,
     type: Array<Genre>,
@@ -11,7 +11,7 @@ defineProps({
     nullable: false,
     nullable: false,
   },
   },
 });
 });
-//#endregion
+// #endregion
 </script>
 </script>
 
 
 <template>
 <template>

 <script lang="ts" setup>
 <script lang="ts" setup>
-//#region --Props--.
+// #region --Props--.
 /** Typescript typage */
 /** Typescript typage */
 defineProps<{
 defineProps<{
   score: number;
   score: number;
@@ -18,20 +18,20 @@ defineProps<{
 //     nullable: false,
 //     nullable: false,
 //   },
 //   },
 // });
 // });
-//#endregion
+// #endregion
 
 
-//#region --Function--.
+// #region --Function--.
 /**
 /**
  * Format vote count if > 1000.
  * Format vote count if > 1000.
  * @param count
  * @param count
  */
  */
-const formatVoteCount = (count: number) => {
+function formatVoteCount(count: number) {
   if (count >= 1000) {
   if (count >= 1000) {
     return `${(count / 1000).toFixed(1)}k votes`;
     return `${(count / 1000).toFixed(1)}k votes`;
   }
   }
   return `${count} votes`;
   return `${count} votes`;
-};
-//#endregion
+}
+// #endregion
 </script>
 </script>
 
 
 <template>
 <template>

 <script lang="ts" setup>
 <script lang="ts" setup>
-//#region --Import--.
+import type { Comment } from "~/type/commentForm";
+// #region --Import--.
 import { useVuelidate } from "@vuelidate/core";
 import { useVuelidate } from "@vuelidate/core";
 import { helpers, maxLength, maxValue, minLength, minValue, required } from "@vuelidate/validators";
 import { helpers, maxLength, maxValue, minLength, minValue, required } from "@vuelidate/validators";
-import type { Comment } from "~/type/commentForm";
-//#endregion
+// #endregion
 
 
-//#region --Emit--.
-const emit = defineEmits(["event:submit"]);
-//#endregion
-
-//#region --Props--.
+// #region --Props--.
 defineProps({
 defineProps({
   isSubmitting: {
   isSubmitting: {
     type: Boolean,
     type: Boolean,
@@ -18,9 +14,13 @@ defineProps({
     default: false,
     default: false,
   },
   },
 });
 });
-//#endregion
+// #endregion
+
+// #region --Emit--.
+const emit = defineEmits(["eventSubmit"]);
+// #endregion
 
 
-//#region --Data/ref--.
+// #region --Data/ref--.
 const initialState: Comment = {
 const initialState: Comment = {
   username: "",
   username: "",
   message: "",
   message: "",
@@ -35,6 +35,7 @@ const rules = {
     maxLength: helpers.withMessage("Le nom d'utilisateur ne peut pas dépasser 50 caractères", maxLength(50)),
     maxLength: helpers.withMessage("Le nom d'utilisateur ne peut pas dépasser 50 caractères", maxLength(50)),
     alpha: helpers.withMessage(
     alpha: helpers.withMessage(
       "Le nom d'utilisateur ne peut contenir que des lettres",
       "Le nom d'utilisateur ne peut contenir que des lettres",
+      // eslint-disable-next-line regexp/no-obscure-range
       helpers.regex(/^[a-zA-ZÀ-ÿ\s]+$/),
       helpers.regex(/^[a-zA-ZÀ-ÿ\s]+$/),
     ),
     ),
   },
   },
@@ -54,15 +55,15 @@ const formData = reactive({
   ...initialState,
   ...initialState,
 });
 });
 const v$ = useVuelidate(rules, formData);
 const v$ = useVuelidate(rules, formData);
-//#endregion
+// #endregion
 
 
 // const errormessages = computed(() => {
 // const errormessages = computed(() => {
 //   return v$.value.message.$errors.map((e) => e.$message);
 //   return v$.value.message.$errors.map((e) => e.$message);
 // });
 // });
 
 
-//#region --Function--.
+// #region --Function--.
 async function submitComment() {
 async function submitComment() {
-  emit("event:submit", formData);
+  emit("eventSubmit", formData);
 }
 }
 
 
 function clear() {
 function clear() {
@@ -80,7 +81,7 @@ function handleMessageEvent(event: string) {
   // console.log(formData.message.replace(/(&lt;([^&gt;]+)&gt;)/ig, ''));
   // console.log(formData.message.replace(/(&lt;([^&gt;]+)&gt;)/ig, ''));
 }
 }
 
 
-//#endregion
+// #endregion
 </script>
 </script>
 
 
 <template>
 <template>
@@ -105,7 +106,7 @@ function handleMessageEvent(event: string) {
         @blur="v$.rating.$touch"
         @blur="v$.rating.$touch"
         @input="v$.rating.$touch"
         @input="v$.rating.$touch"
       />
       />
-      <!--      <pre>{{ errormessages }}</pre>-->
+      <!--      <pre>{{ errormessages }}</pre> -->
       <ui-components-tiny-mce-field-editor
       <ui-components-tiny-mce-field-editor
         :error-message="v$?.message?.$errors[0]?.$message ? (v$.message.$errors[0].$message as string) : ''"
         :error-message="v$?.message?.$errors[0]?.$message ? (v$.message.$errors[0].$message as string) : ''"
         :model-value="formData.message"
         :model-value="formData.message"

-import { describe, expect, it } from "vitest";
 import { mount } from "@vue/test-utils";
 import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
 
 
 import HelloWorld from "./HelloWorld.vue";
 import HelloWorld from "./HelloWorld.vue";
 
 
-describe("HelloWorld", () => {
+describe("helloWorld", () => {
   it("component renders Hello world properly", () => {
   it("component renders Hello world properly", () => {
     const wrapper = mount(HelloWorld);
     const wrapper = mount(HelloWorld);
     expect(wrapper.text()).toContain("Hello world");
     expect(wrapper.text()).toContain("Hello world");

 <script lang="ts" setup>
 <script lang="ts" setup>
-//#region --Props--.
+// #region --Props--.
 defineProps({
 defineProps({
   src: {
   src: {
     type: String,
     type: String,
@@ -12,11 +12,11 @@ defineProps({
     nullable: false,
     nullable: false,
   },
   },
 });
 });
-//#endregion
+// #endregion
 
 
-//#region --Declaration--.
+// #region --Declaration--.
 const w: Window = window;
 const w: Window = window;
-//#endregion
+// #endregion
 </script>
 </script>
 
 
 <template>
 <template>

 <script lang="ts" setup>
 <script lang="ts" setup>
-//#region --Props--.
+// #region --Props--.
 defineProps({
 defineProps({
   isLoading: {
   isLoading: {
     type: Boolean,
     type: Boolean,
@@ -13,7 +13,7 @@ defineProps({
     default: false,
     default: false,
   },
   },
 });
 });
-//#endregion
+// #endregion
 </script>
 </script>
 
 
 <template>
 <template>

 <script setup lang="ts">
 <script setup lang="ts">
-//#region --Props--.
+// #region --Props--.
 import { FilmIcon } from "lucide-vue-next";
 import { FilmIcon } from "lucide-vue-next";
 
 
 defineProps({
 defineProps({
@@ -14,7 +14,7 @@ defineProps({
     nullable: false,
     nullable: false,
   },
   },
 });
 });
-//#endregion
+// #endregion
 </script>
 </script>
 
 
 <template>
 <template>

 <script lang="ts" setup>
 <script lang="ts" setup>
-//#region --import--.
+import { useDebounceFn } from "@vueuse/core";
+// #region --import--.
 import { SearchIcon, XIcon } from "lucide-vue-next";
 import { SearchIcon, XIcon } from "lucide-vue-next";
 import { ref } from "vue";
 import { ref } from "vue";
-import { useDebounceFn } from "@vueuse/core";
-//#endregion
+// #endregion
 
 
-//#region --Emits--.
-const emit = defineEmits(["event:search", "event:clear_search"]);
-//#endregion
-
-//#region --Props--.
+// #region --Props--.
 defineProps({
 defineProps({
   placeholder: {
   placeholder: {
     type: String,
     type: String,
@@ -18,25 +14,29 @@ defineProps({
     default: "",
     default: "",
   },
   },
 });
 });
-//#endregion
+// #endregion
+
+// #region --Emits--.
+const emit = defineEmits(["eventSearch", "eventClearSearch"]);
+// #endregion
 
 
-//#region --Data/refs--.
+// #region --Data/refs--.
 const searchQuery = ref("");
 const searchQuery = ref("");
-//#endregion
+// #endregion
 
 
-//#region --Function--.
+// #region --Function--.
 /**
 /**
  * Debounced function
  * Debounced function
  */
  */
 const handleSearchEvent = useDebounceFn(() => {
 const handleSearchEvent = useDebounceFn(() => {
-  emit("event:search", searchQuery.value);
+  emit("eventSearch", searchQuery.value);
 }, 500);
 }, 500);
 
 
 function handleClearSearchEvent() {
 function handleClearSearchEvent() {
   searchQuery.value = "";
   searchQuery.value = "";
-  emit("event:clear_search");
+  emit("eventClearSearch");
 }
 }
-//#endregion
+// #endregion
 </script>
 </script>
 
 
 <template>
 <template>

 <script lang="ts" setup>
 <script lang="ts" setup>
-//#region --Props--.
+// #region --Props--.
 defineProps({
 defineProps({
   isInitialLoading: {
   isInitialLoading: {
     type: Boolean,
     type: Boolean,
@@ -13,7 +13,7 @@ defineProps({
     default: 12,
     default: 12,
   },
   },
 });
 });
-//#endregion
+// #endregion
 </script>
 </script>
 
 
 <template>
 <template>

 <script lang="ts" setup>
 <script lang="ts" setup>
-//#region --Import--.
+// #region --Import--.
 import Editor from "@tinymce/tinymce-vue";
 import Editor from "@tinymce/tinymce-vue";
 import { ref, watch } from "vue";
 import { ref, watch } from "vue";
-//#endregion
+// #endregion
 
 
-//#region --Declaration--.
-const runtimeConfig = useRuntimeConfig();
-//#endregion
+// #region --Props--.
+const props = defineProps<{
+  modelValue: string;
+  errorMessage: string;
+}>();
+// #endregion
 
 
-//#region --Emit--.
+// #region --Emit--.
 const emit = defineEmits<{
 const emit = defineEmits<{
   (e: "update:modelValue", value: string): void;
   (e: "update:modelValue", value: string): void;
 }>();
 }>();
-//#endregion
+// #endregion
 
 
-//#region --Props--.
-const props = defineProps<{
-  modelValue: string;
-  errorMessage: string;
-}>();
-//#endregion
+// #region --Declaration--.
+const runtimeConfig = useRuntimeConfig();
+// #endregion
 
 
-//#region --Data/ref--.
+// #region --Data/ref--.
 const content = ref(props.modelValue);
 const content = ref(props.modelValue);
 const init = {
 const init = {
   height: 300,
   height: 300,
@@ -48,10 +48,10 @@ const init = {
     "wordcount",
     "wordcount",
   ],
   ],
   toolbar:
   toolbar:
-    "undo redo | blocks |  bold italic underline strikethrough |" +
-    "bold italic forecolor | alignleft aligncenter " +
-    "alignright alignjustify | bullist numlist outdent indent | " +
-    "removeformat | help",
+    "undo redo | blocks |  bold italic underline strikethrough |"
+    + "bold italic forecolor | alignleft aligncenter "
+    + "alignright alignjustify | bullist numlist outdent indent | "
+    + "removeformat | help",
   content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
   content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
   skin: "oxide-dark",
   skin: "oxide-dark",
   content_css: "dark",
   content_css: "dark",
@@ -59,9 +59,9 @@ const init = {
   // valid_elements: [],
   // valid_elements: [],
   // entity_encoding : "raw",
   // entity_encoding : "raw",
 };
 };
-//#endregion
+// #endregion
 
 
-//#region --Watch--.
+// #region --Watch--.
 watch(content, (newValue) => {
 watch(content, (newValue) => {
   emit("update:modelValue", newValue);
   emit("update:modelValue", newValue);
 });
 });
@@ -74,12 +74,12 @@ watch(
     }
     }
   },
   },
 );
 );
-//#endregion
+// #endregion
 </script>
 </script>
 
 
 <template>
 <template>
   <div>
   <div>
-    <editor
+    <Editor
       v-model="content"
       v-model="content"
       :api-key="runtimeConfig.public.apiTinyMceSecret"
       :api-key="runtimeConfig.public.apiTinyMceSecret"
       :init="init"
       :init="init"

 import type { RuntimeConfig } from "nuxt/schema";
 import type { RuntimeConfig } from "nuxt/schema";
 
 
-export const useTMDB = function () {
+export function useTMDB() {
   const runtimeconfig: RuntimeConfig = useRuntimeConfig();
   const runtimeconfig: RuntimeConfig = useRuntimeConfig();
   const apiUrl = runtimeconfig.public.apiTMDBUrl;
   const apiUrl = runtimeconfig.public.apiTMDBUrl;
   const apiKey = runtimeconfig.public.apiTMDBSecret;
   const apiKey = runtimeconfig.public.apiTMDBSecret;
@@ -14,10 +14,12 @@ export const useTMDB = function () {
       const response = await fetch(`${apiUrl}/movie/popular?api_key=${apiKey}&language=fr-FR&page=${page}`);
       const response = await fetch(`${apiUrl}/movie/popular?api_key=${apiKey}&language=fr-FR&page=${page}`);
       if (!response.ok) {
       if (!response.ok) {
         console.error("An error occurred when fetching popular movies:");
         console.error("An error occurred when fetching popular movies:");
-      } else {
+      }
+      else {
         return await response.json();
         return await response.json();
       }
       }
-    } catch (error) {
+    }
+    catch (error) {
       console.error("Error fetching popular movies:", error);
       console.error("Error fetching popular movies:", error);
     }
     }
   };
   };
@@ -34,10 +36,12 @@ export const useTMDB = function () {
       );
       );
       if (!response.ok) {
       if (!response.ok) {
         console.error("An error occurred when searching movies:");
         console.error("An error occurred when searching movies:");
-      } else {
+      }
+      else {
         return await response.json();
         return await response.json();
       }
       }
-    } catch (error) {
+    }
+    catch (error) {
       console.error("Error searching movies:", error);
       console.error("Error searching movies:", error);
     }
     }
   };
   };
@@ -51,10 +55,12 @@ export const useTMDB = function () {
       const response = await fetch(`${apiUrl}/movie/${id}?api_key=${apiKey}&language=fr-FR`);
       const response = await fetch(`${apiUrl}/movie/${id}?api_key=${apiKey}&language=fr-FR`);
       if (!response.ok) {
       if (!response.ok) {
         console.error("An error occurred when fetching movie details:");
         console.error("An error occurred when fetching movie details:");
-      } else {
+      }
+      else {
         return await response.json();
         return await response.json();
       }
       }
-    } catch (error) {
+    }
+    catch (error) {
       console.error("Error fetching details:", error);
       console.error("Error fetching details:", error);
     }
     }
   };
   };
@@ -67,13 +73,15 @@ export const useTMDB = function () {
       const response = await fetch(`${apiUrl}/movie/${id}/credits?api_key=${apiKey}&language=fr-FR`);
       const response = await fetch(`${apiUrl}/movie/${id}/credits?api_key=${apiKey}&language=fr-FR`);
       if (!response.ok) {
       if (!response.ok) {
         console.error("An error occurred when fetching movie credits:");
         console.error("An error occurred when fetching movie credits:");
-      } else {
+      }
+      else {
         return await response.json();
         return await response.json();
       }
       }
-    } catch (error) {
+    }
+    catch (error) {
       console.error("Error fetching movie credits:", error);
       console.error("Error fetching movie credits:", error);
     }
     }
   };
   };
 
 
   return { fetchPopularMovies, searchMovies, fetchMovieDetails, fetchMovieCredits };
   return { fetchPopularMovies, searchMovies, fetchMovieDetails, fetchMovieCredits };
-};
+}

@@ -7,10 +7,10 @@ export interface CreditInterface {
   character?: string;
   character?: string;
 }
 }
 
 
-export type CreditsResponse = {
+export interface CreditsResponse {
   id: number;
   id: number;
   cast: CreditInterface[];
   cast: CreditInterface[];
   crew: CreditInterface[];
   crew: CreditInterface[];
   movie_id: unknown;
   movie_id: unknown;
   movie: MovieInterface;
   movie: MovieInterface;
-};
+}

@@ -20,7 +20,7 @@ export interface MovieInterface {
   credit: CreditsResponse;
   credit: CreditsResponse;
 }
 }
 
 
-export type Genre = {
+export interface Genre {
   id: number;
   id: number;
   name: string;
   name: string;
-};
+}

 <script lang="ts" setup>
 <script lang="ts" setup>
-//#region --import--.
+import type { WhereSecondaryClosure } from "pinia-orm";
+import type { CreditsResponse } from "~/interfaces/credit";
+import type { MovieInterface } from "~/interfaces/movie";
+import type { MovieCommentInterface } from "~/interfaces/movieComment";
+// #region --import--.
 import { AlertTriangleIcon, ArrowLeftIcon } from "lucide-vue-next";
 import { AlertTriangleIcon, ArrowLeftIcon } from "lucide-vue-next";
-import { useTMDB } from "~/composables/tMDB";
 import { computed, onMounted, ref } from "vue";
 import { computed, onMounted, ref } from "vue";
-import { Movie } from "~/models/movie";
-import type { MovieInterface } from "~/interfaces/movie";
+import { useTMDB } from "~/composables/tMDB";
 import { Credit } from "~/models/credit";
 import { Credit } from "~/models/credit";
-import type { CreditsResponse } from "~/interfaces/credit";
-import type { MovieCommentInterface } from "~/interfaces/movieComment";
+import { Movie } from "~/models/movie";
 import { MovieComment } from "~/models/movieComment";
 import { MovieComment } from "~/models/movieComment";
-import type { WhereSecondaryClosure } from "pinia-orm";
-//#endregion
+// #endregion
 
 
-//#region --Declaration--.
+// #region --Declaration--.
 const { fetchMovieDetails, fetchMovieCredits } = useTMDB();
 const { fetchMovieDetails, fetchMovieCredits } = useTMDB();
-//#endregion
+// #endregion
 
 
-//#region --Declaration--.
+// #region --Declaration--.
 const { currentRoute } = useRouter();
 const { currentRoute } = useRouter();
-//#endregion
+// #endregion
 
 
-//#region --Data/ref--.
+// #region --Data/ref--.
 const isLoading = ref(true);
 const isLoading = ref(true);
 const isSubmitting = ref(false);
 const isSubmitting = ref(false);
-//#endregion
+// #endregion
 
 
-//#region --Computed--.
+// #region --Computed--.
 const movieId = computed(() => {
 const movieId = computed(() => {
   if (currentRoute.value.params.id) {
   if (currentRoute.value.params.id) {
     if (typeof currentRoute.value.params.id === "string") {
     if (typeof currentRoute.value.params.id === "string") {
       if (typeof Number(+currentRoute.value.params.id) === "number") {
       if (typeof Number(+currentRoute.value.params.id) === "number") {
         return +currentRoute.value.params.id as number;
         return +currentRoute.value.params.id as number;
-      } else {
+      }
+      else {
         return currentRoute.value.params.id as string;
         return currentRoute.value.params.id as string;
       }
       }
-    } else {
+    }
+    else {
       return null;
       return null;
     }
     }
-  } else {
+  }
+  else {
     return null;
     return null;
   }
   }
 });
 });
@@ -49,7 +52,8 @@ const movie = computed(() => {
       .where("id", movieId.value as WhereSecondaryClosure<never> | null | undefined)
       .where("id", movieId.value as WhereSecondaryClosure<never> | null | undefined)
       .withAll()
       .withAll()
       .first() as unknown as MovieInterface;
       .first() as unknown as MovieInterface;
-  } else {
+  }
+  else {
     return null;
     return null;
   }
   }
 });
 });
@@ -59,8 +63,9 @@ const movie = computed(() => {
  */
  */
 const director = computed(() => {
 const director = computed(() => {
   if (unref(movie)?.credit?.crew) {
   if (unref(movie)?.credit?.crew) {
-    return movie.value?.credit.crew.find((person) => person.job === "Director");
-  } else {
+    return movie.value?.credit.crew.find(person => person.job === "Director");
+  }
+  else {
     return null;
     return null;
   }
   }
 });
 });
@@ -78,39 +83,42 @@ const comments = computed(() => {
     .orderBy("createdAt", "desc")
     .orderBy("createdAt", "desc")
     .get();
     .get();
 });
 });
-//#endregion
+// #endregion
 
 
-//#region --Function--.
+// #region --Function--.
 /**
 /**
  * Fetch movie details
  * Fetch movie details
  */
  */
-const fetchDetails = async (id: number | string) => {
+async function fetchDetails(id: number | string) {
   try {
   try {
     isLoading.value = true;
     isLoading.value = true;
 
 
     const data = await fetchMovieDetails(id);
     const data = await fetchMovieDetails(id);
     // Add to store collection.
     // Add to store collection.
     useRepo(Movie).save(data);
     useRepo(Movie).save(data);
-  } catch (error) {
+  }
+  catch (error) {
     console.error("Error fetching movie details:", error);
     console.error("Error fetching movie details:", error);
-  } finally {
+  }
+  finally {
     isLoading.value = false;
     isLoading.value = false;
   }
   }
-};
+}
 
 
 /**
 /**
  * Format runtime
  * Format runtime
  * @param minutes
  * @param minutes
  */
  */
-const formatRuntime = (minutes: number) => {
-  if (!minutes) return "Durée inconnue";
+function formatRuntime(minutes: number) {
+  if (!minutes)
+    return "Durée inconnue";
   // Find nb hours.
   // Find nb hours.
   const hours = Math.floor(minutes / 60);
   const hours = Math.floor(minutes / 60);
   // Find last minutes.
   // Find last minutes.
   const mins = minutes % 60;
   const mins = minutes % 60;
 
 
   return `${hours}h ${mins}min`;
   return `${hours}h ${mins}min`;
-};
+}
 
 
 async function fetchCredits(id: number | string) {
 async function fetchCredits(id: number | string) {
   try {
   try {
@@ -118,12 +126,13 @@ async function fetchCredits(id: number | string) {
     data.movie_id = id;
     data.movie_id = id;
     // Add to store collection.
     // Add to store collection.
     useRepo(Credit).save(data);
     useRepo(Credit).save(data);
-  } catch (error) {
+  }
+  catch (error) {
     console.error("Error fetching movie credits:", error);
     console.error("Error fetching movie credits:", error);
   }
   }
 }
 }
 
 
-//Ce n'est pas le film du siècle cependant, il est suffisamment intéressant pour passer une bonne soirée !
+// Ce n'est pas le film du siècle cependant, il est suffisamment intéressant pour passer une bonne soirée !
 function handleSubmitEvent(event: MovieCommentInterface) {
 function handleSubmitEvent(event: MovieCommentInterface) {
   isSubmitting.value = true;
   isSubmitting.value = true;
   event.movie_id = unref(movieId);
   event.movie_id = unref(movieId);
@@ -132,9 +141,9 @@ function handleSubmitEvent(event: MovieCommentInterface) {
   isSubmitting.value = false;
   isSubmitting.value = false;
 }
 }
 
 
-//#endregion
+// #endregion
 
 
-//#region --Global event--.
+// #region --Global event--.
 onMounted(() => {
 onMounted(() => {
   // Fetch data on component mount.
   // Fetch data on component mount.
   if (unref(movieId)) {
   if (unref(movieId)) {
@@ -144,7 +153,7 @@ onMounted(() => {
   }
   }
   // loadComments()
   // loadComments()
 });
 });
-//#endregion
+// #endregion
 </script>
 </script>
 
 
 <template>
 <template>
@@ -245,7 +254,7 @@ onMounted(() => {
             <h3 class="text-xl font-bold mt-8 mb-4">
             <h3 class="text-xl font-bold mt-8 mb-4">
               Ajouter un commentaire
               Ajouter un commentaire
             </h3>
             </h3>
-            <form-movie-comment-form @event:submit="handleSubmitEvent" />
+            <form-movie-comment-form @event-submit="handleSubmitEvent" />
 
 
             <!-- Liste des commentaires -->
             <!-- Liste des commentaires -->
             <movie-comment-list :comments="comments as unknown as MovieCommentInterface[]" />
             <movie-comment-list :comments="comments as unknown as MovieCommentInterface[]" />

-//#region --Import--.
-import { describe, expect, it } from "vitest";
+import type { Genre } from "~/interfaces/movie";
 import { mount } from "@vue/test-utils";
 import { mount } from "@vue/test-utils";
+// #region --Import--.
+import { describe, expect, it } from "vitest";
 import MovieGender from "../../components/details/MovieGender.vue";
 import MovieGender from "../../components/details/MovieGender.vue";
-import type { Genre } from "~/interfaces/movie";
-//#endregion
+// #endregion
 
 
-describe("MovieGender", () => {
+describe("movieGender", () => {
   it("affiche correctement les genres", () => {
   it("affiche correctement les genres", () => {
     // Données de test.
     // Données de test.
     const genres: Genre[] = [
     const genres: Genre[] = [

-//#region --Import--.
-import { describe, expect, it } from "vitest";
 import { mount } from "@vue/test-utils";
 import { mount } from "@vue/test-utils";
+// #region --Import--.
+import { describe, expect, it } from "vitest";
 import ScoreAndVote from "../../components/details/ScoreAndVote.vue";
 import ScoreAndVote from "../../components/details/ScoreAndVote.vue";
-//#endregion
+// #endregion
 
 
-describe("ScoreAndVote", () => {
+describe("scoreAndVote", () => {
   it("affiche correctement le score", () => {
   it("affiche correctement le score", () => {
     // Monter le composant avec ses props.
     // Monter le composant avec ses props.
     const wrapper = mount(ScoreAndVote, {
     const wrapper = mount(ScoreAndVote, {

-export type Comment = {
+export interface Comment {
   username: string;
   username: string;
   message: string;
   message: string;
   rating: number;
   rating: number;
-};
+}

-import { defineVitestConfig } from "@nuxt/test-utils/config";
 import { fileURLToPath } from "node:url";
 import { fileURLToPath } from "node:url";
+import { defineVitestConfig } from "@nuxt/test-utils/config";
 
 
 export default defineVitestConfig({
 export default defineVitestConfig({
   /**
   /**