story-research-zapwall/features/user-profile-implementation.md

Implémentation du profil utilisateur et des articles de l'utilisateur

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

Objectif

Permettre aux utilisateurs de visualiser leur profil et la liste de leurs articles publiés.

Fonctionnalités implémentées

1. Page de profil

• Page /profile accessible uniquement aux utilisateurs connectés
• Affichage des informations du profil (nom, photo, description, pubkey, nip05)
• Redirection automatique vers la page d'accueil si non connecté
• Compteur d'articles publiés

2. Liste des articles de l'utilisateur

• Affichage de tous les articles publiés par l'utilisateur connecté
• Recherche et filtres (comme sur la page d'accueil)
• Tri des articles (nouveaux/anciens, prix)
• Compteur d'articles affichés vs total

3. Lien vers le profil

• Le nom/avatar dans ConnectButton est maintenant cliquable
• Lien vers /profile pour accéder rapidement au profil

4. Gestion du profil minimal

• Si aucun profil Nostr n'existe, affichage d'un profil minimal avec le pubkey
• Pas d'erreur si le profil n'existe pas

Fichiers créés

hooks/useUserArticles.ts

Hook personnalisé pour charger les articles d'un utilisateur spécifique :

• Filtre automatiquement les articles par pubkey de l'auteur
• Supporte la recherche et les filtres (comme useArticles)
• Gestion de l'état de chargement et des erreurs
• Méthode loadArticleContent pour charger le contenu privé

Signature :

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

components/UserProfile.tsx

Composant d'affichage du profil utilisateur :

• Affichage de la photo de profil (ou initiale si pas de photo)
• Nom, pubkey tronqué, nip05
• Description/about si disponible
• Compteur d'articles publiés

Props :

interface UserProfileProps {
  profile: NostrProfile
  pubkey: string
  articleCount?: number
}

components/UserArticles.tsx

Composant pour afficher la liste des articles de l'utilisateur :

• Réutilise ArticleCard pour la cohérence UI
• Gestion de l'état de chargement
• Gestion des erreurs
• Message si aucun article publié
• Gestion du déverrouillage des articles payants

Props :

interface UserArticlesProps {
  articles: Article[]
  loading: boolean
  error: string | null
  onLoadContent: (articleId: string, authorPubkey: string) => Promise<Article | null>
  showEmptyMessage?: boolean
}

pages/profile.tsx

Page de profil utilisateur :

• Vérifie la connexion et redirige si non connecté
• Charge le profil de l'utilisateur connecté
• Affiche le profil avec UserProfile
• Affiche les articles avec recherche et filtres
• Header cohérent avec le reste de l'application
• Bouton retour vers la page d'accueil

Fichiers modifiés

components/ConnectButton.tsx

• Ajout d'un Link autour du nom/avatar de l'utilisateur
• Lien vers /profile pour accéder au profil
• Hover effect pour indiquer que c'est cliquable

Changements :

• Import de Link de next/link
• Le nom/avatar est maintenant dans un Link vers /profile

Flux utilisateur

1. Accès au profil :

   • L'utilisateur clique sur son nom/avatar dans le header
   • Redirection vers /profile
   • Si non connecté, redirection vers /

2. Visualisation du profil :

   • Affichage des informations du profil
   • Compteur d'articles publiés

3. Gestion des articles :

   • Liste de tous les articles publiés
   • Possibilité de rechercher et filtrer
   • Possibilité de déverrouiller les articles payants (si l'utilisateur les a payés)

Impact

Utilisateur

• Accès facile à son profil et ses articles
• Vue d'ensemble de ses publications
• Recherche et filtres pour trouver rapidement un article spécifique

Technique

• Code modulaire et réutilisable
• Hook personnalisé pour charger les articles par auteur
• Composants réutilisables (UserProfile, UserArticles)
• Cohérence UI avec le reste de l'application

Limitations et améliorations futures

Limitations actuelles

• Pas de statistiques détaillées (vues, paiements reçus)
• Pas d'édition/suppression d'articles
• Le profil ne peut être modifié que via Nostr (pas d'édition dans l'app)

Améliorations possibles

• Statistiques : Ajouter un composant ArticleStats pour afficher :
  • Nombre total de vues
  • Nombre de paiements reçus
  • Revenus totaux
• Édition d'articles : Permettre d'éditer/supprimer les articles publiés
• Profil public : Créer /user/[pubkey] pour voir le profil de n'importe quel utilisateur
• Optimisation : Filtrer les articles par auteur au niveau du relay (au lieu du client)

Tests recommandés

1. Accès au profil :

   • Se connecter et cliquer sur le nom/avatar
   • Vérifier la redirection vers /profile
   • Se déconnecter et essayer d'accéder à /profile directement

2. Affichage du profil :

   • Vérifier l'affichage du nom, photo, description
   • Vérifier le compteur d'articles
   • Tester avec un profil qui n'a pas de photo/nom

3. Articles :

   • Publier quelques articles et vérifier qu'ils apparaissent
   • Tester la recherche et les filtres
   • Vérifier le compteur d'articles

4. Performance :

   • Tester avec un grand nombre d'articles
   • Vérifier que le chargement n'est pas bloquant