aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/App.css78
-rw-r--r--frontend/src/App.test.tsx10
-rw-r--r--frontend/src/App.tsx23
-rw-r--r--frontend/src/components/FeedList.css48
-rw-r--r--frontend/src/components/FeedList.test.tsx61
-rw-r--r--frontend/src/components/FeedList.tsx50
-rw-r--r--frontend/src/components/Login.test.tsx2
-rw-r--r--frontend/src/types.ts7
8 files changed, 240 insertions, 39 deletions
diff --git a/frontend/src/App.css b/frontend/src/App.css
index b9d355d..57800a4 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,42 +1,60 @@
-#root {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
+/* Resets and Base Styles */
+* {
+ box-sizing: border-box;
}
-.logo {
- height: 6em;
- padding: 1.5em;
- will-change: filter;
- transition: filter 300ms;
-}
-.logo:hover {
- filter: drop-shadow(0 0 2em #646cffaa);
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
-.logo.react:hover {
- filter: drop-shadow(0 0 2em #61dafbaa);
+
+/* Dashboard Layout */
+.dashboard {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ overflow: hidden;
+ /* Prevent body scroll */
}
-@keyframes logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+.dashboard-header {
+ background: #2c3e50;
+ color: white;
+ padding: 0.75rem 1.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-shrink: 0;
}
-@media (prefers-reduced-motion: no-preference) {
- a:nth-of-type(2) .logo {
- animation: logo-spin infinite 20s linear;
- }
+.dashboard-header h1 {
+ margin: 0;
+ font-size: 1.25rem;
+ font-weight: 600;
}
-.card {
- padding: 2em;
+.dashboard-content {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
}
-.read-the-docs {
- color: #888;
+.dashboard-sidebar {
+ width: 300px;
+ background: #f8f9fa;
+ border-right: 1px solid #ddd;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
}
+
+.dashboard-main {
+ flex: 1;
+ padding: 2rem;
+ overflow-y: auto;
+ background: #fff;
+} \ No newline at end of file
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
index 8e3d805..37a7fab 100644
--- a/frontend/src/App.test.tsx
+++ b/frontend/src/App.test.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+import '@testing-library/jest-dom';
import { render, screen, waitFor } from '@testing-library/react';
import App from './App';
import { describe, it, expect, vi, beforeEach } from 'vitest';
@@ -18,15 +20,15 @@ describe('App', () => {
});
it('renders dashboard when authenticated', async () => {
- (global.fetch as any).mockResolvedValueOnce({
- ok: true,
- });
+ (global.fetch as any)
+ .mockResolvedValueOnce({ ok: true }) // /api/auth
+ .mockResolvedValueOnce({ ok: true, json: async () => [] }); // /api/feed/
window.history.pushState({}, 'Test page', '/v2/');
render(<App />);
await waitFor(() => {
- expect(screen.getByText(/dashboard/i)).toBeInTheDocument();
+ expect(screen.getByText(/neko reader/i)).toBeInTheDocument();
});
});
});
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b986198..7d26025 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -31,14 +31,27 @@ function RequireAuth({ children }: { children: React.ReactElement }) {
return children;
}
+import FeedList from './components/FeedList';
+
function Dashboard() {
- // Placeholder for now
return (
- <div>
- <h1>Dashboard</h1>
- <p>Welcome to the new Neko/v2 frontend.</p>
+ <div className="dashboard">
+ <header className="dashboard-header">
+ <h1>Neko Reader</h1>
+ <nav>
+ {/* Add logout later */}
+ </nav>
+ </header>
+ <div className="dashboard-content">
+ <aside className="dashboard-sidebar">
+ <FeedList />
+ </aside>
+ <main className="dashboard-main">
+ <p>Select a feed to view items.</p>
+ </main>
+ </div>
</div>
- )
+ );
}
function App() {
diff --git a/frontend/src/components/FeedList.css b/frontend/src/components/FeedList.css
new file mode 100644
index 0000000..f35ed59
--- /dev/null
+++ b/frontend/src/components/FeedList.css
@@ -0,0 +1,48 @@
+.feed-list {
+ padding: 1rem;
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.feed-list h2 {
+ margin-top: 0;
+ border-bottom: 1px solid #eee;
+ padding-bottom: 0.5rem;
+}
+
+.feed-list-items {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.feed-item {
+ padding: 0.75rem 0;
+ border-bottom: 1px solid #f0f0f0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.feed-item:last-child {
+ border-bottom: none;
+}
+
+.feed-title {
+ text-decoration: none;
+ color: #333;
+ font-weight: 500;
+}
+
+.feed-title:hover {
+ color: #007bff;
+}
+
+.feed-category {
+ background: #e9ecef;
+ padding: 0.2rem 0.5rem;
+ border-radius: 4px;
+ font-size: 0.8rem;
+ color: #666;
+} \ No newline at end of file
diff --git a/frontend/src/components/FeedList.test.tsx b/frontend/src/components/FeedList.test.tsx
new file mode 100644
index 0000000..578e3c2
--- /dev/null
+++ b/frontend/src/components/FeedList.test.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import FeedList from './FeedList';
+
+describe('FeedList Component', () => {
+ beforeEach(() => {
+ vi.resetAllMocks();
+ global.fetch = vi.fn();
+ });
+
+ it('renders loading state initially', () => {
+ (global.fetch as any).mockImplementation(() => new Promise(() => { }));
+ render(<FeedList />);
+ expect(screen.getByText(/loading feeds/i)).toBeInTheDocument();
+ });
+
+ it('renders list of feeds', async () => {
+ const mockFeeds = [
+ { _id: 1, title: 'Feed One', url: 'http://example.com/rss', web_url: 'http://example.com', category: 'Tech' },
+ { _id: 2, title: 'Feed Two', url: 'http://test.com/rss', web_url: 'http://test.com', category: 'News' },
+ ];
+
+ (global.fetch as any).mockResolvedValueOnce({
+ ok: true,
+ json: async () => mockFeeds,
+ });
+
+ render(<FeedList />);
+
+ await waitFor(() => {
+ expect(screen.getByText('Feed One')).toBeInTheDocument();
+ expect(screen.getByText('Feed Two')).toBeInTheDocument();
+ expect(screen.getByText('Tech')).toBeInTheDocument();
+ });
+ });
+
+ it('handles fetch error', async () => {
+ (global.fetch as any).mockRejectedValueOnce(new Error('API Error'));
+
+ render(<FeedList />);
+
+ await waitFor(() => {
+ expect(screen.getByText(/error: api error/i)).toBeInTheDocument();
+ });
+ });
+
+ it('handles empty feed list', async () => {
+ (global.fetch as any).mockResolvedValueOnce({
+ ok: true,
+ json: async () => [],
+ });
+
+ render(<FeedList />);
+
+ await waitFor(() => {
+ expect(screen.getByText(/no feeds found/i)).toBeInTheDocument();
+ });
+ });
+});
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>
+ );
+}
diff --git a/frontend/src/components/Login.test.tsx b/frontend/src/components/Login.test.tsx
index 44d1371..ef946e2 100644
--- a/frontend/src/components/Login.test.tsx
+++ b/frontend/src/components/Login.test.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+import '@testing-library/jest-dom';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import { describe, it, expect, vi, beforeEach } from 'vitest';
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
new file mode 100644
index 0000000..905b1dc
--- /dev/null
+++ b/frontend/src/types.ts
@@ -0,0 +1,7 @@
+export interface Feed {
+ _id: number;
+ url: string;
+ web_url: string;
+ title: string;
+ category: string;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-25 21:10:05 +0000