aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src/components/FeedItem.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/FeedItem.tsx')
-rw-r--r--frontend/src/components/FeedItem.tsx90
1 files changed, 0 insertions, 90 deletions
diff --git a/frontend/src/components/FeedItem.tsx b/frontend/src/components/FeedItem.tsx
deleted file mode 100644
index 865c080..0000000
--- a/frontend/src/components/FeedItem.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-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;