blob: 865c0807d9b869d39a12ceb7fa72939efa729600 (
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
import { useState, memo } from 'react';
import type { Item } from '../types';
import './FeedItem.css';
import { apiFetch } from '../utils';
interface FeedItemProps {
item: Item;
onToggleStar?: (item: Item) => void;
onUpdate?: (item: Item) => void;
}
const FeedItem = memo(function FeedItem({ item, onToggleStar, onUpdate }: FeedItemProps) {
const [loading, setLoading] = useState(false);
// We rely on props.item for data.
// If we fetch full content, we notify the parent via onUpdate.
const handleToggleStar = (e: React.MouseEvent) => {
e.stopPropagation();
if (onToggleStar) {
onToggleStar(item);
} else {
// Fallback if no handler passed (backward compat or isolated usage)
// But really we should rely on parent.
// For now, let's keep the optimistic local update logic if we were standalone,
// but since we are optimizing, we assume parent handles it.
}
};
const loadFullContent = (e: React.MouseEvent) => {
e.stopPropagation();
setLoading(true);
apiFetch(`/api/item/${item._id}`)
.then((res) => {
if (!res.ok) throw new Error('Failed to fetch full content');
return res.json();
})
.then((data) => {
// Merge the new data (full_content) into the item and notify parent
const newItem = { ...item, ...data };
if (onUpdate) {
onUpdate(newItem);
}
setLoading(false);
})
.catch((err) => {
console.error('Error fetching full content:', err);
setLoading(false);
});
};
return (
<li className={`feed-item ${item.read ? 'read' : 'unread'} ${loading ? 'loading' : ''}`}>
<div className="item-header">
<a href={item.url} target="_blank" rel="noopener noreferrer" className="item-title">
{item.title || '(No Title)'}
</a>
<button
onClick={handleToggleStar}
className={`star-btn ${item.starred ? 'is-starred' : 'is-unstarred'}`}
title={item.starred ? 'Unstar' : 'Star'}
>
★
</button>
</div>
<div className="dateline">
<a href={item.url} target="_blank" rel="noopener noreferrer">
{new Date(item.publish_date).toLocaleDateString()}
{item.feed_title && ` - ${item.feed_title}`}
</a>
<div className="item-actions" style={{ display: 'inline-block', float: 'right' }}>
{!item.full_content && (
<button onClick={loadFullContent} className="scrape-btn" title="Load Full Content">
text
</button>
)}
</div>
</div>
{(item.full_content || item.description) && (
<div
className="item-description"
dangerouslySetInnerHTML={{ __html: item.full_content || item.description }}
/>
)}
</li>
);
});
export default FeedItem;
|
