L'objectif va être d'ajouter des paramètres, sous forme d'une « query string », à la requête HTTP permettant d'obtenir une collection de films. Pour l'instant, la fonction générant la requête HTTP ne prend qu'un paramètre page qui correspond au numéro de la page à obtenir, mais plusieurs paramètres pourrez lui être ajoutés.

Afin de simplifier l'écriture et l'utilisation de la fonction getAllMovies(), celle-ci recevra un unique paramètre urlSearchParams de type URLSearchParams.

Comme ce paramètre sera utilisé directement, via sa méthode de conversion vers une chaîne de caractères, pour construire l'URL de la requête HTTP, vous vous assurerez de la validité du type de paramètre à l'aide de l'opérateur instanceof. En cas d'erreur de type, la fonction getAllMovies() retournera une promesse rejetée.

Dans la fonction updateMoviesElt(), vous créerez une instance de URLSearchParams contenant le paramètre page de la fonction comme paramètre d'URL. Vous passerez cette instance de URLSearchParams comme paramètre lors de l'invocation de la fonction getAllMovies().

Enfin, si ce n'est pas déjà fait, vous ajouterez un gestionnaire de promesses rejetées aux promesses retournées par la fonction getAllMovies(), dont le rôle sera simplement de capturer les erreurs, car la mise en place d'un système de notifications dépasse le cadre de ce TP.

Vous ajouterez une fonction appendSortToQuery(urlSearchParams) qui extraira le critère de tri sélectionné dans la page pour l'ajouter aux paramètres d'URL transmis dans urlSearchParams. La valeur du bouton radio vous fournira le nom du critère de tri et vous lui associerez la valeur « asc », pour obtenir des tris croissants.

Vous utiliserez cette fonction dans updateMoviesElt() pour enrichir l'instance de URLSearchParams utilisée pour construire l'URL de la requête HTTP.

Pour le moment, la sélection d'un critère de tri ne rafraîchit pas la collection des films, il faut changer de page pour que le critère soit pris en compte.

Vous ajouterez la fonction setSortButtonsEltsEvents() dont l'objectif sera d'attacher un gestionnaire d'événements sur l'événement « change » à l'élément DOM contenant les boutons radio. En effet, vous pouvez profiter du bouillonnement des événements pour gérer de manière centralisée les événements d'une liste d'éléments DOM dans un ancêtre commun, il s'agit de la délégation d'événement.

Lors du changement de valeur des boutons radio, vous invoquerez la fonction updateMoviesElt() pour provoquer une mise à jour de la liste des films.

Cette fonction sera appelée depuis « index.js » afin d'initialiser l'interface lors du chargement de la page.

Il est maintenant possible de réaliser plusieurs requêtes HTTP en même temps si l'utilisateur clique sur plusieurs boutons de tri successivement, pouvant ainsi provoquer un affichage incohérent si la dernière réponse ne correspond pas à la dernière requête HTTP.

Vous ajouterez un nouveau paramètre abortController à la fonction getAllMovies(), qui contiendra une instance de AbortController. Vous transmettrez le signal de cette instance à la fonction fetch() afin de pouvoir abandonner cette requête HTTP.

Vous ajouterez une instance de AbortController à votre script « movies-ui.js » que vous transmettrez comme paramètre à la fonction getAllMovies().

Dans la fonction updateMoviesElt(), vous ferez en sorte d'abandonner la requête HTTP précédente avant d'en réaliser une nouvelle.