<aside> 💡

Exercice 2

Implémenter le listing des parcours

</aside>

Nous pouvons ajouter, nous allons désormais effectuer le listing des parcours.

Création du composant pour la vue tableau

Commençons par créer un composant Table

• src/components/Table.tsx

<aside> ❓

Que signifie ces props ?

type Props<TData extends Record<string, any>>

</aside>

Ce composant utilise le typage générique afin de faciliter la complétion des données et d’éviter les erreurs.

Ici on spécifie que le tableau de donnée devra être un objet et que les clés des colonnes devront exister dans le tableau donné.

type Props<TData extends Record<string, unknown>> = {
  data?: TData[]
  columns: {
    key: keyof TData
    label: string
    render?: (data: TData) => ReactNode
  }[]
  onRowClick?: (row: TData) => void
}

Ajout du hook pour récupérer les parcours

parcours/hooks/useListParcours.tsx

import { useQuery } from "@tanstack/react-query"
import { apiFetch } from "@/lib/api"
import type { Parcours } from "../types"

export const useListParcours = () => {
  return useQuery({
    queryKey: ["parcours"],
    queryFn: async (): Promise<Parcours[]> => {
      const response = await apiFetch("/parcours", {
        method: "GET",
      })

      if (!response.ok) {
        const error = await response.json()
        throw new Error(error.error || "Failed to fetch parcours")
      }

      return response.json()
    },
  })
}

Intégration du composant

• Modification du composant de listing