68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
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<Article | null>
|
|
showEmptyMessage?: boolean
|
|
}
|
|
|
|
export function UserArticles({
|
|
articles,
|
|
loading,
|
|
error,
|
|
onLoadContent,
|
|
showEmptyMessage = true,
|
|
}: UserArticlesProps) {
|
|
const [unlockedArticles, setUnlockedArticles] = useState<Set<string>>(new Set())
|
|
|
|
const handleUnlock = async (article: Article) => {
|
|
const fullArticle = await onLoadContent(article.id, article.pubkey)
|
|
if (fullArticle && fullArticle.paid) {
|
|
setUnlockedArticles((prev) => new Set([...prev, article.id]))
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<p className="text-gray-500">Loading articles...</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
|
|
<p className="text-red-800">{error}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (articles.length === 0 && showEmptyMessage) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<p className="text-gray-500">No articles published yet.</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{articles.map((article) => (
|
|
<ArticleCard
|
|
key={article.id}
|
|
article={{
|
|
...article,
|
|
paid: unlockedArticles.has(article.id) || article.paid,
|
|
}}
|
|
onUnlock={handleUnlock}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|