Implement Frontend Feed List with tests

1 files changed, 50 insertions, 0 deletions

diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
new file mode 100644
index 0000000..fb7c1de
--- /dev/null
+++ b/frontend/src/components/FeedList.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import type { Feed } from '../types';
+import './FeedList.css';
+
+export default function FeedList() {
+    const [feeds, setFeeds] = useState<Feed[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        fetch('/api/feed/')
+            .then((res) => {
+                if (!res.ok) {
+                    throw new Error('Failed to fetch feeds');
+                }
+                return res.json();
+            })
+            .then((data) => {
+                setFeeds(data);
+                setLoading(false);
+            })
+            .catch((err) => {
+                setError(err.message);
+                setLoading(false);
+            });
+    }, []);
+
+    if (loading) return <div className="feed-list-loading">Loading feeds...</div>;
+    if (error) return <div className="feed-list-error">Error: {error}</div>;
+
+    return (
+        <div className="feed-list">
+            <h2>Feeds</h2>
+            {feeds.length === 0 ? (
+                <p>No feeds found.</p>
+            ) : (
+                <ul className="feed-list-items">
+                    {feeds.map((feed) => (
+                        <li key={feed._id} className="feed-item">
+                            <a href={feed.web_url} target="_blank" rel="noopener noreferrer" className="feed-title">
+                                {feed.title || feed.url}
+                            </a>
+                            {feed.category && <span className="feed-category">{feed.category}</span>}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}