Affichage des tracks disponibles

Nous allons maintenant préparer notre page d'édition, en affichant la liste des tracks non présentes dans la playlist.

Exercice

En mode edition, afficher sur la page de la playlist les tracks non présentes dans la playlist.

Pour cela vous pouvez vous aider de la méthode findAvailableTracksNotIn dans le repository tracks.

Guide

💿 Identifier le mode edition

Pour pouvoir récuperer le pathname nous allons créer une URL à partir de la propriété url de la request que l'on récupére dans les paramètres de la fonction loader :

const url = new URL(request.url);

Nous allons ensuite pouvoir réutiliser notre fonction isEditionUrl.

💿 Ajouter les tracks disponibles dans la réponse du loader

Avec cela, nous allons pouvoir récupérer les tracks disponibles avec la méthode findAvailableTracksNotIn du repository tracks lorsque nous sommes en mode edition pour le retourner dans la réponse.

Voir une solution

app/routes/_layout.playlists.$id.(edit).tsx

const isEditionUrl = (pathname: string) => pathname.endsWith("/edit");

export const loader = async ({ request, params }: LoaderArgs) => {
  const id = params.id;
  const playlist = await playlists.find(id || "");
  if (!playlist) {
    throw new Error("playlist not found");
  }

  let availableTracks: Track[] = [];
  const url = new URL(request.url);

  if (isEditionUrl(url.pathname)) {
    availableTracks = await tracks.findAvailableTracksNotIn(playlist.tracks);
  }

  return json({ playlist, availableTracks });
};

💿 Adapter le composant à la nouvelle réponse du loader

Vous avez maintenant une erreur dans votre composant car vous avez changé le type de réponse du loader.

Nous allons donc modifier le code permettant de récupérer les données avec le hook useLoaderData

Voir une solution

app/routes/_layout.playlists.$id.(edit).tsx

// ...
export default function Playlists() {
  const { playlist } = useLoaderData<typeof loader>();
  //...
}

💿 Afficher les tracks disponibles

Nous allons maintenant pouvoir afficher les tracks disponibles en récupérant les données en sortie du useLoaderData

Voir une solution

app/routes/_layout.playlists.$id.(edit).tsx

// ...
export default function Playlists() {
  const { playlist, availableTracks } = useLoaderData<typeof loader>();
  //...
}

Nous pouvons maintenant les afficher.

Voir une solution

app/routes/_layout.playlists.$id.(edit).tsx

export default function Playlists() {
  const { playlist, availableTracks } = useLoaderData<typeof loader>();

  return (
    <div className="...">
      <h1>{/* Nom de la playlist */}</h1>
      <div>
        {/*...*/}
        <ul className="flex-1">
          {availableTracks.map((track) => (
            <li key={track.id}>
              <span>
                {track.name} · {track.artist}
              </span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

👏 Nous avons une page d'édition prête à effectuer des modifications.

Voyons comment éditer notre playlist.