story-research-zapwall/features/filtering-search-implementation.md

Implémentation du filtrage et de la recherche d'articles

Date : Décembre 2024 Status : ✅ Complété

Objectif

Permettre aux utilisateurs de rechercher et filtrer les articles sur la page d'accueil.

Fonctionnalités implémentées

1. Recherche par texte

• Barre de recherche permettant de rechercher dans les titres, aperçus et contenus des articles
• Recherche insensible à la casse
• Bouton pour effacer la recherche rapidement

2. Filtres

• Filtre par auteur : Sélectionner un auteur spécifique parmi les auteurs disponibles
• Filtre par prix minimum : Filtrer les articles avec un prix minimum en satoshis
• Filtre par prix maximum : Filtrer les articles avec un prix maximum en satoshis

3. Tri

• Plus récent (par défaut) : Articles les plus récents en premier
• Plus ancien : Articles les plus anciens en premier
• Prix croissant : Articles du moins cher au plus cher
• Prix décroissant : Articles du plus cher au moins cher

4. Affichage des résultats

• Compteur affichant le nombre d'articles correspondant aux filtres
• Message lorsque aucun article ne correspond aux critères

Fichiers créés

components/SearchBar.tsx

Composant de barre de recherche avec :

• Icône de recherche
• Champ de saisie
• Bouton pour effacer la recherche
• Gestion de l'état local avec synchronisation

components/ArticleFilters.tsx

Composant de filtres avec :

• Filtre par auteur (dropdown)
• Filtres par prix min/max (inputs numériques)
• Tri (dropdown)
• Bouton "Clear all" pour réinitialiser tous les filtres
• Affichage conditionnel du bouton "Clear all" seulement si des filtres sont actifs

Types exportés :

• SortOption : Type pour les options de tri
• ArticleFilters : Interface pour les filtres

lib/articleFiltering.ts

Logique de filtrage et de tri avec :

• filterArticlesBySearch() : Filtre par texte de recherche
• filterArticles() : Filtre par auteur et prix
• sortArticles() : Trie les articles selon l'option sélectionnée
• applyFiltersAndSort() : Applique tous les filtres et le tri

Fichiers modifiés

hooks/useArticles.ts

• Ajout des paramètres searchQuery et filters au hook
• Utilisation de useMemo pour optimiser le filtrage
• Retour de allArticles (tous les articles non filtrés) pour permettre au composant de filtres de connaître les options disponibles
• Retour de articles (articles filtrés et triés) pour l'affichage

Signature modifiée :

export function useArticles(
  searchQuery: string = '',
  filters: ArticleFilters | null = null
)

Retour modifié :

{
  articles: Article[],        // Articles filtrés et triés
  allArticles: Article[],     // Tous les articles (pour les filtres)
  loading: boolean,
  error: string | null,
  loadArticleContent: (articleId: string, authorPubkey: string) => Promise<Article | null>
}

pages/index.tsx

• Ajout de l'état pour searchQuery et filters
• Intégration du composant SearchBar
• Intégration du composant ArticleFilters
• Passage des paramètres au hook useArticles
• Affichage du compteur d'articles filtrés
• Message amélioré lorsque aucun article ne correspond

Impact

Utilisateur

• Recherche rapide d'articles par mots-clés
• Filtrage précis par auteur et prix
• Tri flexible pour trouver facilement ce qui intéresse
• Interface intuitive avec boutons de réinitialisation

Technique

• Code modulaire et réutilisable
• Performance optimisée avec useMemo
• Types TypeScript stricts pour la sécurité
• Séparation claire des responsabilités (UI vs logique)

Tests recommandés

1. Recherche :

   • Rechercher par titre
   • Rechercher par contenu d'aperçu
   • Rechercher avec plusieurs mots
   • Effacer la recherche

2. Filtres :

   • Filtrer par auteur
   • Filtrer par prix minimum
   • Filtrer par prix maximum
   • Combiner plusieurs filtres
   • Réinitialiser les filtres

3. Tri :

   • Trier par date (nouveaux/anciens)
   • Trier par prix (croissant/décroissant)
   • Combiner tri et filtres

4. Performance :

   • Vérifier que le filtrage ne bloque pas l'UI
   • Vérifier avec un grand nombre d'articles

Notes techniques

• Le filtrage est effectué côté client (pas de requête au serveur/relay)
• Les articles sont filtrés et triés à chaque changement de recherche ou filtres
• L'utilisation de useMemo évite de recalculer les filtres à chaque render
• Les filtres sont appliqués dans l'ordre : recherche → filtres → tri