# 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** :
```typescript
export function useArticles(
  searchQuery: string = '',
  filters: ArticleFilters | null = null
)
```

**Retour modifié** :
```typescript
{
  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