-
- )
-}
-
-```
-
-```typescriptreact
-import type { Article } from '@/types/nostr'
-
-export type SortOption = 'newest' | 'oldest' | 'price-low' | 'price-high'
-
-export interface ArticleFilters {
- authorPubkey: string | null
- minPrice: number | null
- maxPrice: number | null
- sortBy: SortOption
-}
-
-interface ArticleFiltersProps {
- filters: ArticleFilters
- onFiltersChange: (filters: ArticleFilters) => void
- articles: Article[]
-}
-
-export function ArticleFiltersComponent({
- filters,
- onFiltersChange,
- articles,
-}: ArticleFiltersProps) {
- // Get unique authors from articles
- const authors = Array.from(
- new Map(articles.map((a) => [a.pubkey, a.pubkey])).values()
- )
-
- // Get price range from articles
- const prices = articles.map((a) => a.zapAmount).sort((a, b) => a - b)
- const minAvailablePrice = prices[0] || 0
- const maxAvailablePrice = prices[prices.length - 1] || 1000
-
- const handleAuthorChange = (e: React.ChangeEvent
-
-
-
- {localValue && (
-
- )}
-
-
- )
-}
-
-```
-
-Ajout de la logique de filtrage et de tri dans `useArticles.ts` :
-
-
-```typescript
-import type { Article } from '@/types/nostr'
-import type { ArticleFilters, SortOption } from '@/components/ArticleFilters'
-
-/**
- * Filter articles based on search query
- */
-export function filterArticlesBySearch(articles: Article[], searchQuery: string): Article[] {
- if (!searchQuery.trim()) {
- return articles
- }
-
- const query = searchQuery.toLowerCase().trim()
-
- return articles.filter((article) => {
- const titleMatch = article.title.toLowerCase().includes(query)
- const previewMatch = article.preview.toLowerCase().includes(query)
- const contentMatch = article.content.toLowerCase().includes(query)
-
- return titleMatch || previewMatch || contentMatch
- })
-}
-
-/**
- * Filter articles based on filters (author, price)
- */
-export function filterArticles(articles: Article[], filters: ArticleFilters): Article[] {
- let filtered = articles
-
- // Filter by author
- if (filters.authorPubkey) {
- filtered = filtered.filter((article) => article.pubkey === filters.authorPubkey)
- }
-
- // Filter by min price
- if (filters.minPrice !== null) {
- filtered = filtered.filter((article) => article.zapAmount >= filters.minPrice!)
- }
-
- // Filter by max price
- if (filters.maxPrice !== null) {
- filtered = filtered.filter((article) => article.zapAmount <= filters.maxPrice!)
- }
-
- return filtered
-}
-
-/**
- * Sort articles based on sort option
- */
-export function sortArticles(articles: Article[], sortBy: SortOption): Article[] {
- const sorted = [...articles]
-
- switch (sortBy) {
- case 'newest':
- return sorted.sort((a, b) => b.createdAt - a.createdAt)
-
- case 'oldest':
- return sorted.sort((a, b) => a.createdAt - b.createdAt)
-
- case 'price-low':
- return sorted.sort((a, b) => a.zapAmount - b.zapAmount)
-
- case 'price-high':
- return sorted.sort((a, b) => b.zapAmount - a.zapAmount)
-
- default:
- return sorted.sort((a, b) => b.createdAt - a.createdAt)
- }
-}
-
-/**
- * Apply all filters and sorting to articles
- */
-export function applyFiltersAndSort(
- articles: Article[],
- searchQuery: string,
- filters: ArticleFilters
-): Article[] {
- let result = articles
-
- // First apply search filter
- result = filterArticlesBySearch(result, searchQuery)
-
- // Then apply other filters
- result = filterArticles(result, filters)
-
- // Finally apply sorting
- result = sortArticles(result, filters.sortBy)
-
- return result
-}
-
-```
-
-```typescript
-import { useState, useEffect, useMemo } from 'react'
-import { nostrService } from '@/lib/nostr'
-import type { Article } from '@/types/nostr'
-import { applyFiltersAndSort } from '@/lib/articleFiltering'
-import type { ArticleFilters } from '@/components/ArticleFilters'
-
-export function useArticles(searchQuery: string = '', filters: ArticleFilters | null = null) {
- const [articles, setArticles] = useState
-
-
- Filters & Sort
- {hasActiveFilters && ( - - )} -
- {/* Author filter */}
-
-
-
-
-
-
- {/* Min price filter */}
-
-
-
-
-
- {/* Max price filter */}
-
-
-
-
-
- {/* Sort */}
-
-
-
-
-
-
- Nostr Paywall
-
-
- Publish Article
-
-
-
-
-
-
-
- {loading && (
- Articles
-- Read previews for free, unlock full content with {800} sats Lightning zaps -
-
-
- )}
-
- {error && (
- Loading articles...
-
-
- )}
-
- {!loading && articles.length === 0 && (
- {error}
-
-
- )}
-
- No articles found. Check back later!
-
- {articles.map((article) => (
-
-
-
- Nostr Paywall
-
-
- Publish Article
-
-
-
-
-
-
-
- {/* Filters */}
- {!loading && allArticles.length > 0 && (
- Articles
-- Read previews for free, unlock full content with {800} sats Lightning zaps -
- - {/* Search Bar */} -
-
-
-
- )}
-
- {error && (
- Loading articles...
-
-
- )}
-
- {!loading && articles.length === 0 && (
- {error}
-
-
- )}
-
- No articles found. Check back later!
-
- {articles.map((article) => (
-
-
-
- Nostr Paywall
-
-
- Publish Article
-
-
-
-
-
-
-
- {/* Filters */}
- {!loading && allArticles.length > 0 && (
- Articles
-- Read previews for free, unlock full content with {800} sats Lightning zaps -
- - {/* Search Bar */} -
-
-
-
- )}
-
- {error && (
- Loading articles...
-
-
- )}
-
- {!loading && articles.length === 0 && (
- {error}
-
-
- )}
-
- {!loading && articles.length > 0 && (
- - {allArticles.length === 0 - ? 'No articles found. Check back later!' - : 'No articles match your search or filters.'} -
-
- Showing {articles.length} of {allArticles.length} article{allArticles.length !== 1 ? 's' : ''}
-
- )}
-
-
- {articles.map((article) => (
-
-
-
- )
-}
-
-```
-
-```typescriptreact
-import { useState } from 'react'
-import { ArticleCard } from './ArticleCard'
-import type { Article } from '@/types/nostr'
-
-interface UserArticlesProps {
- articles: Article[]
- loading: boolean
- error: string | null
- onLoadContent: (articleId: string, authorPubkey: string) => Promise
- {/* Profile Picture */}
- {profile.picture ? (
- 
- ) : (
-
-
-
- {displayName.charAt(0).toUpperCase()}
-
-
- )}
-
- {/* Profile Info */}
-
-
-
- {/* Stats */}
- {articleCount !== undefined && (
- {displayName}
-{displayPubkey}
- {profile.nip05 && ( -{profile.nip05}
- )} - {profile.about && ( -{profile.about}
- )} -
-
- )}
- {articleCount}
- Article{articleCount !== 1 ? 's' : ''}
-
-
- )
- }
-
- if (error) {
- return (
- Loading articles...
-
-
- )
- }
-
- if (articles.length === 0 && showEmptyMessage) {
- return (
- {error}
-
-
- )
- }
-
- return (
- No articles published yet.
-
- {articles.map((article) => (
-
- )
-}
-
-```
-
-```typescriptreact
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import Head from 'next/head'
-import { ConnectButton } from '@/components/ConnectButton'
-import { UserProfile } from '@/components/UserProfile'
-import { UserArticles } from '@/components/UserArticles'
-import { SearchBar } from '@/components/SearchBar'
-import { ArticleFiltersComponent, type ArticleFilters } from '@/components/ArticleFilters'
-import { useNostrConnect } from '@/hooks/useNostrConnect'
-import { useUserArticles } from '@/hooks/useUserArticles'
-import { nostrService } from '@/lib/nostr'
-import type { NostrProfile } from '@/types/nostr'
-
-export default function ProfilePage() {
- const router = useRouter()
- const { connected, pubkey: currentPubkey } = useNostrConnect()
- const [profile, setProfile] = useState
-
- Nostr Paywall
-
-
- Publish Article
-
-
-
-
-
-
-
-
- {/* Profile Section */}
- {loadingProfile ? (
-
-
- ) : profile ? (
- Loading profile...
-
-
-
- {/* Articles Count */}
- {!loading && articles.length > 0 && (
- My Articles
-
-
- {!loading && allArticles.length > 0 && (
-
- Showing {articles.length} of {allArticles.length} article{allArticles.length !== 1 ? 's' : ''}
-
- )}
-
- {/* Articles List */}
-
-
- {profile?.picture && (
-
- )}
-
- {profile?.name || pubkey.slice(0, 8) + '...'}
-
-
-
-
- )
- }
-
- return (
-
-
- {error && (
-
- )
-}
-
-```
-
-Corrigeant `useUserArticles` pour gérer correctement l'unsubscribe :
-
-
-```typescript
-import { useState, useEffect, useMemo } from 'react'
-import { nostrService } from '@/lib/nostr'
-import type { Article } from '@/types/nostr'
-import { applyFiltersAndSort } from '@/lib/articleFiltering'
-import type { ArticleFilters } from '@/components/ArticleFilters'
-
-/**
- * Hook to fetch articles published by a specific user
- */
-export function useUserArticles(
- userPubkey: string,
- searchQuery: string = '',
- filters: ArticleFilters | null = null
-) {
- const [articles, setArticles] = useState{error}
- )} -
-
-
- {isOpen && (
- <>
- {/* Backdrop */}
-
-
- {/* Notification Panel */}
-
- )
-}
-
-```
-
-Corrigeant l'utilisation de `deleteNotification` dans `NotificationCenter.tsx` :
-
-
-```typescriptreact
-
- {/* Header */}
-
-
- )}
-
-
-
- {/* Notifications List */}
- Notifications
-
- {unreadCount > 0 && (
-
- )}
-
-
-
- {notifications.length === 0 ? (
-
-
-
- ) : (
- No notifications yet
-
- {notifications.map((notification) => (
-
- )}
- handleNotificationClick(notification)}
- >
-
- ))}
-
-
-
-
-
-
- - {notification.title} -
- {!notification.read && ( - - )} -{notification.message}
- {notification.articleId && ( - e.stopPropagation()} - className="text-xs text-blue-600 hover:text-blue-700 mt-1 inline-block" - > - View article → - - )} -
-
- {formatTime(notification.timestamp)}
-
-
-
-