170 lines
5.3 KiB
Markdown
170 lines
5.3 KiB
Markdown
# 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** :
|
|
```typescript
|
|
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** :
|
|
```typescript
|
|
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** :
|
|
```typescript
|
|
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
|