1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
import { useState } from "react";
import type {
GetReadArticlesQuery,
GetUnreadArticlesQuery,
} from "../graphql/generated/graphql";
import { ArticleItem } from "./ArticleItem";
interface Props {
articles: NonNullable<
| GetUnreadArticlesQuery["unreadArticles"]
| GetReadArticlesQuery["readArticles"]
>;
isReadView?: boolean;
}
export function ArticleList({ articles, isReadView }: Props) {
const [hiddenArticleIds, setHiddenArticleIds] = useState<Set<string>>(
new Set(),
);
const handleArticleReadChange = (articleId: string, isRead: boolean) => {
if (isReadView !== isRead) {
setHiddenArticleIds((prev) => new Set(prev).add(articleId));
}
};
const visibleArticles = articles.filter(
(article) => !hiddenArticleIds.has(article.id),
);
if (visibleArticles.length === 0) {
return (
<div className="p-4 text-center text-gray-500">No articles found.</div>
);
}
// Group articles by feed
const articlesByFeed = visibleArticles.reduce(
(acc, article) => {
const feedId = article.feed.id;
if (!acc[feedId]) {
acc[feedId] = {
feed: article.feed,
articles: [],
};
}
acc[feedId].articles.push(article);
return acc;
},
{} as Record<
string,
{ feed: { id: string; title: string }; articles: typeof articles }
>,
);
return (
<div className="space-y-6 p-4">
{Object.values(articlesByFeed).map(({ feed, articles: feedArticles }) => (
<div key={feed.id} className="space-y-2">
<h3 className="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2">
{feed.title}
<span className="ml-2 text-sm font-normal text-gray-500">
({feedArticles.length} article
{feedArticles.length !== 1 ? "s" : ""})
</span>
</h3>
<div className="space-y-1">
{feedArticles.map((article) => (
<ArticleItem
key={article.id}
article={article}
onReadChange={handleArticleReadChange}
/>
))}
</div>
</div>
))}
</div>
);
}
|
