blob: 01a24fc552584ccfd151ffb252f739b6bbd29a2d (
plain) (
blame)
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
|
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import type { Item } from '../types';
import FeedItem from './FeedItem';
import './FeedItems.css';
export default function FeedItems() {
const { feedId, tagName } = useParams<{ feedId: string; tagName: string }>();
const [items, setItems] = useState<Item[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
useEffect(() => {
setLoading(true);
setError('');
let url = '/api/stream';
if (feedId) {
url = `/api/stream?feed_id=${feedId}`;
} else if (tagName) {
url = `/api/stream?tag=${encodeURIComponent(tagName)}`;
}
fetch(url)
.then((res) => {
if (!res.ok) {
throw new Error('Failed to fetch items');
}
return res.json();
})
.then((data) => {
setItems(data);
setLoading(false);
})
.catch((err) => {
setError(err.message);
setLoading(false);
});
}, [feedId, tagName]);
if (loading) return <div className="feed-items-loading">Loading items...</div>;
if (error) return <div className="feed-items-error">Error: {error}</div>;
return (
<div className="feed-items">
<h2>{tagName ? `Tag: ${tagName}` : 'Items'}</h2>
{items.length === 0 ? (
<p>No items found.</p>
) : (
<ul className="item-list">
{items.map((item) => (
<FeedItem key={item._id} item={item} />
))}
</ul>
)}
</div>
);
}
|
