2025-02-24

2025-02-24 00:19:17 +01:00 · 2025-02-24 00:19:17 +01:00 · a510899ff1
commit a510899ff1
parent 0f52ff0cef
17 changed files with 309 additions and 103 deletions
--- a/src/components/TmdbSearchResults.vue
+++ b/src/components/TmdbSearchResults.vue
@ -0,0 +1,53 @@
+<script setup lang="ts">
+  import type { TmdbMovieSearchResponse } from "@/libs/apis/tmdb/schemas";
+
+  const { searchResults } = defineProps<{
+    searchResults: typeof TmdbMovieSearchResponse.Type.results | undefined;
+  }>();
+</script>
+
+<template>
+  <p v-show="!searchResults || searchResults?.length === 0">Aucun résultat.</p>
+  <table v-show="searchResults?.length">
+    <thead>
+      <tr>
+        <th scope="col">Nom</th>
+        <th scope="col">Année</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr v-for="result in searchResults" :key="result.id">
+        <th class="name" scope="row">{{ result.original_title }}</th>
+        <td class="release-date">{{ result.release_date }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style lang="css" scoped>
+  table {
+    border-collapse: collapse;
+
+    :is(td, th) {
+      padding: var(--s-4);
+      text-align: left;
+    }
+
+    thead th {
+      font-weight: 120;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+  }
+
+  .name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .release-date {
+    min-inline-size: 6rem;
+  }
+</style>
--- a/src/libs/apis/tmdb/constants.ts
+++ b/src/libs/apis/tmdb/constants.ts
@ -1,9 +1,9 @@
 import type { TmdbMovieSearchQueryParams } from "./schemas";

-export const DEFAULT_SEARCH_MOVIE_PARAMS: TmdbMovieSearchQueryParams = {
+export const DEFAULT_SEARCH_MOVIE_PARAMS = {
  include_adult: false,
  language: "fr",
  page: 1,
  query: "",
  region: "fr-FR",
-};
+} satisfies TmdbMovieSearchQueryParams;
--- a/src/libs/apis/tmdb/schemas.ts
+++ b/src/libs/apis/tmdb/schemas.ts
@ -1,5 +1,7 @@
 import { Schema } from "effect";

+// Requête
+
 export class TmdbMovieSearchQueryParams extends Schema.Class<TmdbMovieSearchQueryParams>("TmdbMovieSearchArgs")({
  include_adult: Schema.Boolean.pipe(
    Schema.propertySignature,
@ -22,26 +24,30 @@ export class TmdbMovieSearchQueryParams extends Schema.Class<TmdbMovieSearchQuer
  year: Schema.String.pipe(Schema.optional),
 }) {}

+// Réponse
+
 export class TmdbMovieSearchResponse extends Schema.Class<TmdbMovieSearchResponse>("TmdbMovieSearchResponse")({
  page: Schema.NonNegativeInt,
-  results: Schema.Array(
-    Schema.Struct({
-      adult: Schema.Boolean,
-      backdrop_path: Schema.Union(Schema.String, Schema.Null),
-      genre_ids: Schema.Array(Schema.NonNegativeInt),
-      id: Schema.NonNegativeInt,
-      original_language: Schema.String,
-      original_title: Schema.String,
-      overview: Schema.String,
-      popularity: Schema.Number,
-      poster_path: Schema.Union(Schema.String, Schema.Null),
-      release_date: Schema.String,
-      title: Schema.String,
-      video: Schema.Boolean,
-      vote_average: Schema.Number,
-      vote_count: Schema.NonNegativeInt,
-    }),
-  ),
+  results: Schema.Array(TmdbMovieSearchResponseResults),
  total_pages: Schema.NonNegativeInt,
  total_results: Schema.NonNegativeInt,
 }) {}
+
+export class TmdbMovieSearchResponseResults
+  extends Schema.Class<TmdbMovieSearchResponseResults>("TmdbMovieSearchResponseResults")({
+    adult: Schema.Boolean,
+    backdrop_path: Schema.Union(Schema.String, Schema.Null),
+    genre_ids: Schema.Array(Schema.NonNegativeInt),
+    id: Schema.NonNegativeInt,
+    original_language: Schema.String,
+    original_title: Schema.String,
+    overview: Schema.String,
+    popularity: Schema.Number,
+    poster_path: Schema.Union(Schema.String, Schema.Null),
+    release_date: Schema.String,
+    title: Schema.String,
+    video: Schema.Boolean,
+    vote_average: Schema.Number,
+    vote_count: Schema.NonNegativeInt,
+  })
+{}
--- a/src/libs/search/search.ts
+++ b/src/libs/search/search.ts
@ -4,18 +4,17 @@ import { UrlParams } from "@effect/platform";
 import { Effect, pipe } from "effect";

 /**
- * Transform les valeurs d'un `FormData` en `Record` trié.
+ * Transforme les valeurs d'un `FormData` en `Record` trié.
 *
 * @param formData Les valeurs d'un formulaire.
 * @returns Un `Effect` des valeurs.
 */
-export const transformFormDataToRecord = (
-  formData: FormData,
-): Effect.Effect<Record<string, NonEmptyArray<string> | string>> =>
+const formDataToRecord = (formData: FormData): Effect.Effect<Record<string, NonEmptyArray<string> | string>> =>
  pipe(
    Effect.succeed(Array.from(formData.entries())),
    // @ts-expect-error -- Impossible de typer les valeurs de FormData comme string.
    Effect.andThen(formData => new URLSearchParams(formData)),
+    // La conversion en URLSearchParams permet de trier les entrées.
    Effect.andThen((urlSearchParams: URLSearchParams) => {
      urlSearchParams.sort();
      return urlSearchParams;
@ -23,3 +22,5 @@ export const transformFormDataToRecord = (
    Effect.andThen((urlSearchParams: URLSearchParams) => UrlParams.fromInput(urlSearchParams)),
    Effect.andThen((urlParams: UrlParams.UrlParams) => UrlParams.toRecord(urlParams)),
  );
+
+export default { formDataToRecord };
--- a/src/pages/SearchPage.vue
+++ b/src/pages/SearchPage.vue
@ -1,13 +1,17 @@
 <script setup lang="ts">
-  import { MEDIA_TYPES } from "@/db/schemas/constants";
-  import { DEFAULT_SEARCH_MOVIE_PARAMS } from "@/libs/apis/tmdb/constants";
-  import { TmdbMovieSearchQueryParams, TmdbMovieSearchResponse } from "@/libs/apis/tmdb/schemas";
-  import { SearchPageQueryParams } from "@/libs/search/schemas";
-  import { transformFormDataToRecord } from "@/libs/search/utils";
-  import { getCurrentYear } from "@/libs/utils/dates";
-  import { PrettyLogger } from "@/services/logger";
-  import { RuntimeClient } from "@/services/runtime-client";
-  import { TmdbApi } from "@/services/tmdb-api";
+  import type { NonEmptyArray } from "effect/Array";
+  import type { Ref } from "vue";
+
+  import TmdbSearchResults from "@/components/TmdbSearchResults.vue";
+  import { MEDIA_TYPES } from "@/db/schemas/constants.ts";
+  import { DEFAULT_SEARCH_MOVIE_PARAMS } from "@/libs/apis/tmdb/constants.ts";
+  import { TmdbMovieSearchQueryParams, TmdbMovieSearchResponse } from "@/libs/apis/tmdb/schemas.ts";
+  import { SearchPageQueryParams } from "@/libs/search/schemas.ts";
+  import Search from "@/libs/search/search.ts";
+  import { getCurrentYear } from "@/libs/utils/dates.ts";
+  import { PrettyLogger } from "@/services/logger.ts";
+  import { RuntimeClient } from "@/services/runtime-client.ts";
+  import { TmdbApi } from "@/services/tmdb-api.ts";
  import { Effect, pipe, Schema } from "effect";
  import { computed, onMounted } from "vue";
  import { ref } from "vue";
@ -16,54 +20,82 @@
  import { useRoute } from "vue-router";
  import { useRouter } from "vue-router";

+  /*
+   * Le formulaire reçoit en valeurs initiales les paramètres de l'URL.
+   * Quand le formulaire est soumis, les paramètres de l'URL sont mis à jour.
+   * Un effet est déclenché à chaque mise à jour des paramètres d'URL : une nouvelle recherche est déclenchée et les résultats sont mis à jour.
+   */
+
  const route = useRoute();
  const router = useRouter();
+  /** L'année courante pour la limite supérieure du champs Année de la recherché. */
  const currentYear: number = getCurrentYear();

-  const parsedQueryParams = computed(() => Schema.decodeUnknown(SearchPageQueryParams)(route.query));
+  /** Effet des paramètres validés de la route. */
+  const routeQueryParams = computed(() => Schema.decodeUnknown(SearchPageQueryParams)(route.query));
+  /** Le formulaire de recherche. */
  const form = useTemplateRef("form");
-  const formData = ref<SearchPageQueryParams>();
-  const searchResults = ref<TmdbMovieSearchResponse>();
+  /** Les valeurs du formulaire de recherche. */
+  const searchFormData = ref<SearchPageQueryParams>();
+  /** Le retour de la requête de recherche de films auprès de l'API TMDB. */
+  const search = ref<TmdbMovieSearchResponse>();
+  /** Les résultats de la requête de recherche de films auprès de l'API TMDB. */
+  const searchResults = computed(() => search.value?.results);
+  /** L'état de chargement de la requête auprès de l'API TMDB. */
+  const loading: Ref<boolean> = ref(false);
+
+  const updateUrlQuery = async (event?: Event): Promise<void> => {
+    event?.preventDefault();

-  const updateQueryParams = async (event?: Event): Promise<void> => {
-    if (event) {
-      event.preventDefault();
-    }
    await pipe(
      Effect.fromNullable(form.value),
-      Effect.andThen(form => new FormData(form)),
-      Effect.andThen(formData => transformFormDataToRecord(formData)),
-      Effect.tap(queryParams => router.push({ force: true, query: queryParams })),
-      Effect.catchAll(error => Effect.succeed(error)),
-      Effect.tap(Effect.logInfo),
+      Effect.andThen((form: HTMLFormElement) => new FormData(form)),
+      Effect.andThen((searchFormData: FormData) => Search.formDataToRecord(searchFormData)),
+      // Met à jour les paramètres de l'URL.
+      Effect.tap((routeQueryParams: Record<string, NonEmptyArray<string> | string>) =>
+        router.push({ force: true, query: routeQueryParams })
+      ),
+      Effect.tapError(Effect.logError),
+      Effect.ignore,
+      Effect.provide(PrettyLogger),
      Effect.runPromise,
    );
  };
-  const resetForm = async (event: Event): Promise<void> => {
+
+  const resetInitialState = async (event: Event): Promise<void> => {
    event.preventDefault();
+
    form.value?.reset();
-    formData.value = {
+    searchFormData.value = {
      query: "",
      type: MEDIA_TYPES.FILM,
      year: "",
    };
-    router.push({ force: true });
+    search.value = undefined;
+    await router.push({ force: true });
  };

-  const executeSearch = async (): Promise<TmdbMovieSearchResponse | undefined> =>
+  const getSearchResultsFromApi = async (): Promise<TmdbMovieSearchResponse | undefined> =>
    await RuntimeClient.runPromise(
      Effect.gen(function*() {
        // NOTE: Ne gère que la recherche de films pour l'instant.
-        const tmdbApi = yield* TmdbApi;
-        const validQueryParams = yield* parsedQueryParams.value;
-        const queryArgs = yield* Schema.decode(TmdbMovieSearchQueryParams)({
-          ...DEFAULT_SEARCH_MOVIE_PARAMS,
-          primary_release_year: validQueryParams.year,
-          query: validQueryParams.query,
+        const tmdbApi: TmdbApi = yield* TmdbApi;
+
+        const searchArgs: TmdbMovieSearchQueryParams = yield* Effect.gen(function*() {
+          return yield* pipe(
+            routeQueryParams.value,
+            Effect.andThen(params =>
+              Schema.decode(TmdbMovieSearchQueryParams)({
+                ...DEFAULT_SEARCH_MOVIE_PARAMS,
+                primary_release_year: params.year,
+                query: params.query,
+              })
+            ),
+          );
        });

        return yield* pipe(
-          tmdbApi.searchMovie(queryArgs),
+          tmdbApi.searchMovie(searchArgs),
          Effect.tapError(Effect.logError),
          Effect.orElseSucceed(() => undefined),
          Effect.tap(Effect.logInfo),
@ -71,12 +103,19 @@
        );
      }),
    );
-  const updateResults = async (): Promise<void> =>
+
+  const updateSearchResults = async (): Promise<void> =>
    pipe(
-      parsedQueryParams.value,
+      routeQueryParams.value,
      Effect.tap(async (args: SearchPageQueryParams) => {
-        formData.value = { ...args };
-        searchResults.value = await executeSearch();
+        loading.value = true;
+
+        // Met à jour les valeurs du formulaire.
+        searchFormData.value = { ...args };
+        // Récupère les résultats d'une recherche avec les nouveaux termes.
+        search.value = await getSearchResultsFromApi();
+
+        loading.value = false;
      }),
      Effect.tapError(Effect.logError),
      Effect.ignore,
@ -84,7 +123,10 @@
      Effect.runPromise,
    );

-  watch(route, async () => await updateResults(), { immediate: true });
+  //
+  watch(route, async () => {
+    await updateSearchResults();
+  }, { immediate: true });

  onMounted(() => {
    console.debug("SearchPage.vue -- Mounted");
@ -99,7 +141,7 @@
      <h3>Termes</h3>
      <form
        id="search-media-form" ref="form" class="cluster"
-        @submit="updateQueryParams"
+        @submit="updateUrlQuery"
      >
        <fieldset class="stack">
          <legend>Type du média</legend>
@ -108,7 +150,7 @@
            <div class="field">
              <input
                id="film" checked for="add-media-form"
-                name="type" type="radio" :v-model="formData?.type"
+                name="type" type="radio" :v-model="searchFormData?.type"
                value="film"
              >
              <label for="film">Film</label>
@ -116,7 +158,7 @@
            <div class="field">
              <input
                id="series" for="add-media-form" name="type"
-                type="radio" :v-model="formData?.type" value="series"
+                type="radio" :v-model="searchFormData?.type" value="series"
              >
              <label for="series">Série</label>
            </div>
@ -127,8 +169,8 @@
          <label for="query">Titre</label>
          <input
            id="query" for="add-media-form" name="query"
-            required type="text" :v-model="formData?.query"
-            :value="formData?.query"
+            required type="text" :v-model="searchFormData?.query"
+            :value="searchFormData?.query"
          >
        </div>
        <div class="field stack">
@ -136,25 +178,23 @@
          <input
            id="year" for="add-media-form" :max="currentYear"
            min="1900" name="year" type="number"
-            :v-model="formData?.year" :value="formData?.year"
+            :v-model="searchFormData?.year" :value="searchFormData?.year"
          >
        </div>

        <div class="cluster buttons">
          <button class="invert" type="submit">Rechercher</button>
-          <button for="search-media-form" type="reset" @click="resetForm">Réinitialiser</button>
+          <button for="search-media-form" type="reset" @click="resetInitialState">Réinitialiser</button>
        </div>
      </form>
    </section>

-    <template v-if="searchResults">
-      <section id="results" class="stack">
-        <h3>Résultats</h3>
-        <p v-for="result in searchResults.results" :key="result.id">
-          <span>{{ result.original_title }}</span>
-        </p>
-      </section>
-    </template>
+    <section id="results" class="stack">
+      <h3>Résultats</h3>
+
+      <p v-if="loading" class="loading">Recherche en cours</p>
+      <TmdbSearchResults v-else :search-results="searchResults"></TmdbSearchResults>
+    </section>
  </div>
 </template>

@ -170,13 +210,17 @@
  }

  #search-media-form {
-    padding: var(--s0);
+    padding: var(--s1);
    border: 4px double var(--color-primary);
-  }

-  form {
-    :is(legend) {
-      font-weight: 120;
+    .buttons {
+      flex-basis: 100%;
+      margin-block-start: var(--s1);
    }
  }
+
+  .loading::after {
+    content: "";
+    animation: loading 2s both infinite;
+  }
 </style>
--- a/src/styles/base/elements.css
+++ b/src/styles/base/elements.css
@ -5,8 +5,8 @@

 /* Désactive le comportement étrange des <legend> au sein de <fieldset>. */
 :where(fieldset > legend) {
-  width: 100%;
  float: left;
+  inline-size: 100%;
 }

 /* Hauteur de ligne plus étroite pour les éléments interactifs. */
--- a/src/styles/themes/default.css
+++ b/src/styles/themes/default.css
@ -27,7 +27,7 @@ h1 {
 }

 .container {
-  --max-width: 60rem;
+  --max-width: 90rem;
  --space: var(--s1);

  place-content: start;
@ -58,17 +58,17 @@ main {
 }

@keyframes fade-in {
-  to {
+  100% {
    opacity: 1;
  }
 }

@keyframes flicker {
-  from, 49% {
+  0%, 49% {
    opacity: 0;
  }

-  50%, to {
+  50%, 100% {
    opacity: 1;
  }
 }