Implement Frontend Feed Items View with tests

5 files changed, 203 insertions, 6 deletions

diff --git a/frontend/src/components/FeedItems.css b/frontend/src/components/FeedItems.css
new file mode 100644
index 0000000..a057a40
--- /dev/null
+++ b/frontend/src/components/FeedItems.css
@@ -0,0 +1,60 @@
+.feed-items {
+    padding: 1rem;
+}
+
+.feed-items h2 {
+    margin-top: 0;
+    border-bottom: 2px solid #eee;
+    padding-bottom: 0.5rem;
+}
+
+.item-list {
+    list-style: none;
+    padding: 0;
+}
+
+.item {
+    border-bottom: 1px solid #f0f0f0;
+    padding: 1rem 0;
+}
+
+.item.read .item-title {
+    color: #888;
+    font-weight: normal;
+}
+
+.item.unread .item-title {
+    font-weight: bold;
+}
+
+.item-title {
+    font-size: 1.2rem;
+    text-decoration: none;
+    color: #333;
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+.item-title:hover {
+    text-decoration: underline;
+    color: #007bff;
+}
+
+.item-meta {
+    font-size: 0.85rem;
+    color: #666;
+    margin-bottom: 0.5rem;
+}
+
+.item-description {
+    color: #444;
+    line-height: 1.5;
+    font-size: 0.95rem;
+}
+
+.item-description img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 1rem 0;
+}
\ No newline at end of file
diff --git a/frontend/src/components/FeedItems.test.tsx b/frontend/src/components/FeedItems.test.tsx
new file mode 100644
index 0000000..9c271c4
--- /dev/null
+++ b/frontend/src/components/FeedItems.test.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import FeedItems from './FeedItems';
+
+describe('FeedItems Component', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+        global.fetch = vi.fn();
+    });
+
+    it('renders loading state', () => {
+        (global.fetch as any).mockImplementation(() => new Promise(() => { }));
+        render(
+            <MemoryRouter initialEntries={['/feed/1']}>
+                <Routes>
+                    <Route path="/feed/:feedId" element={<FeedItems />} />
+                </Routes>
+            </MemoryRouter>
+        );
+        expect(screen.getByText(/loading items/i)).toBeInTheDocument();
+    });
+
+    it('renders items for a feed', async () => {
+        const mockItems = [
+            { _id: 101, title: 'Item One', url: 'http://example.com/1', publish_date: '2023-01-01', read: false },
+            { _id: 102, title: 'Item Two', url: 'http://example.com/2', publish_date: '2023-01-02', read: true },
+        ];
+
+        (global.fetch as any).mockResolvedValueOnce({
+            ok: true,
+            json: async () => mockItems,
+        });
+
+        render(
+            <MemoryRouter initialEntries={['/feed/1']}>
+                <Routes>
+                    <Route path="/feed/:feedId" element={<FeedItems />} />
+                </Routes>
+            </MemoryRouter>
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('Item One')).toBeInTheDocument();
+            expect(screen.getByText('Item Two')).toBeInTheDocument();
+        });
+
+        expect(global.fetch).toHaveBeenCalledWith('/api/stream?feed_id=1');
+    });
+});
diff --git a/frontend/src/components/FeedItems.tsx b/frontend/src/components/FeedItems.tsx
new file mode 100644
index 0000000..048bed7
--- /dev/null
+++ b/frontend/src/components/FeedItems.tsx
@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import type { Item } from '../types';
+import './FeedItems.css';
+
+export default function FeedItems() {
+    const { feedId } = useParams<{ feedId: string }>();
+    const [items, setItems] = useState<Item[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        setLoading(true);
+        setError('');
+
+        const url = feedId
+            ? `/api/stream?feed_id=${feedId}`
+            : '/api/stream'; // Default or "all" view? For now let's assume we need a feedId or handle "all" logic later
+
+        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]);
+
+    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>Items</h2>
+            {/* TODO: Add Feed Title here if possible, maybe pass from location state or fetch feed details */}
+            {items.length === 0 ? (
+                <p>No items found.</p>
+            ) : (
+                <ul className="item-list">
+                    {items.map((item) => (
+                        <li key={item._id} className={`item ${item.read ? 'read' : 'unread'}`}>
+                            <a href={item.url} target="_blank" rel="noopener noreferrer" className="item-title">
+                                {item.title || '(No Title)'}
+                            </a>
+                            <div className="item-meta">
+                                <span className="item-date">{new Date(item.publish_date).toLocaleDateString()}</span>
+                                {item.feed_title && <span className="item-feed"> - {item.feed_title}</span>}
+                            </div>
+                            {item.description && (
+                                <div className="item-description" dangerouslySetInnerHTML={{ __html: item.description }} />
+                            )}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}
diff --git a/frontend/src/components/FeedList.test.tsx b/frontend/src/components/FeedList.test.tsx
index 578e3c2..92ff345 100644
--- a/frontend/src/components/FeedList.test.tsx
+++ b/frontend/src/components/FeedList.test.tsx
@@ -4,6 +4,8 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import FeedList from './FeedList';
 
+import { BrowserRouter } from 'react-router-dom';
+
 describe('FeedList Component', () => {
     beforeEach(() => {
         vi.resetAllMocks();
@@ -12,7 +14,11 @@ describe('FeedList Component', () => {
 
     it('renders loading state initially', () => {
         (global.fetch as any).mockImplementation(() => new Promise(() => { }));
-        render(<FeedList />);
+        render(
+            <BrowserRouter>
+                <FeedList />
+            </BrowserRouter>
+        );
         expect(screen.getByText(/loading feeds/i)).toBeInTheDocument();
     });
 
@@ -27,7 +33,11 @@ describe('FeedList Component', () => {
             json: async () => mockFeeds,
         });
 
-        render(<FeedList />);
+        render(
+            <BrowserRouter>
+                <FeedList />
+            </BrowserRouter>
+        );
 
         await waitFor(() => {
             expect(screen.getByText('Feed One')).toBeInTheDocument();
@@ -39,7 +49,11 @@ describe('FeedList Component', () => {
     it('handles fetch error', async () => {
         (global.fetch as any).mockRejectedValueOnce(new Error('API Error'));
 
-        render(<FeedList />);
+        render(
+            <BrowserRouter>
+                <FeedList />
+            </BrowserRouter>
+        );
 
         await waitFor(() => {
             expect(screen.getByText(/error: api error/i)).toBeInTheDocument();
@@ -52,7 +66,11 @@ describe('FeedList Component', () => {
             json: async () => [],
         });
 
-        render(<FeedList />);
+        render(
+            <BrowserRouter>
+                <FeedList />
+            </BrowserRouter>
+        );
 
         await waitFor(() => {
             expect(screen.getByText(/no feeds found/i)).toBeInTheDocument();
diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
index fb7c1de..f913293 100644
--- a/frontend/src/components/FeedList.tsx
+++ b/frontend/src/components/FeedList.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 import type { Feed } from '../types';
 import './FeedList.css';
 
@@ -37,9 +38,9 @@ export default function FeedList() {
                 <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">
+                            <Link to={`/feed/${feed._id}`} className="feed-title">
                                 {feed.title || feed.url}
-                            </a>
+                            </Link>
                             {feed.category && <span className="feed-category">{feed.category}</span>}
                         </li>
                     ))}