From a5cd9538b0db731a0d0e10e58804ef8ad32211b7 Mon Sep 17 00:00:00 2001 From: Adam Mathes Date: Fri, 13 Feb 2026 07:13:18 -0800 Subject: Implement Frontend Settings with tests --- frontend/coverage/src/App.css.html | 2 +- frontend/coverage/src/App.tsx.html | 54 ++- frontend/coverage/src/components/FeedItem.css.html | 2 +- frontend/coverage/src/components/FeedItem.tsx.html | 2 +- .../coverage/src/components/FeedItems.css.html | 2 +- .../coverage/src/components/FeedItems.tsx.html | 2 +- frontend/coverage/src/components/FeedList.css.html | 2 +- frontend/coverage/src/components/FeedList.tsx.html | 2 +- frontend/coverage/src/components/Login.css.html | 2 +- frontend/coverage/src/components/Login.tsx.html | 2 +- frontend/coverage/src/components/Settings.css.html | 331 +++++++++++++++ frontend/coverage/src/components/Settings.tsx.html | 448 +++++++++++++++++++++ frontend/coverage/src/components/index.html | 48 ++- frontend/coverage/src/index.html | 34 +- 14 files changed, 889 insertions(+), 44 deletions(-) create mode 100644 frontend/coverage/src/components/Settings.css.html create mode 100644 frontend/coverage/src/components/Settings.tsx.html (limited to 'frontend/coverage/src') diff --git a/frontend/coverage/src/App.css.html b/frontend/coverage/src/App.css.html index d927374..a833e51 100644 --- a/frontend/coverage/src/App.css.html +++ b/frontend/coverage/src/App.css.html @@ -295,7 +295,7 @@ body { + + + + + + \ No newline at end of file diff --git a/frontend/coverage/src/components/Settings.tsx.html b/frontend/coverage/src/components/Settings.tsx.html new file mode 100644 index 0000000..eaed089 --- /dev/null +++ b/frontend/coverage/src/components/Settings.tsx.html @@ -0,0 +1,448 @@ + + + + + + Code coverage report for src/components/Settings.tsx + + + + + + + + + +
+
+

All files / src/components Settings.tsx

+
+ +
+ 75.55% + Statements + 34/45 +
+ + +
+ 56.25% + Branches + 9/16 +
+ + +
+ 82.35% + Functions + 14/17 +
+ + +
+ 84.61% + Lines + 33/39 +
+ + +
+

+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +

+ +
+
+

+
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 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122  +  +  +  +  +14x +14x +14x +14x +  +14x +3x +  +  +14x +4x +4x +  +4x +4x +  +  +4x +4x +  +  +  +  +  +  +  +14x +1x +1x +  +1x +1x +  +  +  +  +  +1x +1x +  +  +1x +1x +  +  +  +  +  +  +  +14x +1x +  +1x +1x +  +  +  +1x +1x +1x +  +  +  +  +  +  +  +14x +  +  +  +  +  +  +  +  +  +1x +  +  +  +  +  +  +  +  +  +  +  +  +  +  +  +  +  +5x +  +  +  +  +  +1x +  +  +  +  +  +  +  +  +  +  +  +  +  + 
import React, { useEffect, useState } from 'react';
+import type { Feed } from '../types';
+import './Settings.css';
+ 
+export default function Settings() {
+    const [feeds, setFeeds] = useState<Feed[]>([]);
+    const [newFeedUrl, setNewFeedUrl] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+ 
+    useEffect(() => {
+        fetchFeeds();
+    }, []);
+ 
+    const fetchFeeds = () => {
+        setLoading(true);
+        fetch('/api/feed/')
+            .then((res) => {
+                Iif (!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);
+            });
+    };
+ 
+    const handleAddFeed = (e: React.FormEvent) => {
+        e.preventDefault();
+        Iif (!newFeedUrl) return;
+ 
+        setLoading(true);
+        fetch('/api/feed/', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url: newFeedUrl }),
+        })
+            .then((res) => {
+                Iif (!res.ok) throw new Error('Failed to add feed');
+                return res.json();
+            })
+            .then(() => {
+                setNewFeedUrl('');
+                fetchFeeds(); // Refresh list (or we could append if server returns full feed object)
+            })
+            .catch((err) => {
+                setError(err.message);
+                setLoading(false);
+            });
+    };
+ 
+    const handleDeleteFeed = (id: number) => {
+        Iif (!globalThis.confirm('Are you sure you want to delete this feed?')) return;
+ 
+        setLoading(true);
+        fetch(`/api/feed/${id}`, {
+            method: 'DELETE',
+        })
+            .then((res) => {
+                Iif (!res.ok) throw new Error('Failed to delete feed');
+                setFeeds(feeds.filter((f) => f._id !== id));
+                setLoading(false);
+            })
+            .catch((err) => {
+                setError(err.message);
+                setLoading(false);
+            });
+    };
+ 
+    return (
+        <div className="settings-page">
+            <h2>Settings</h2>
+ 
+            <div className="add-feed-section">
+                <h3>Add New Feed</h3>
+                <form onSubmit={handleAddFeed} className="add-feed-form">
+                    <input
+                        type="url"
+                        value={newFeedUrl}
+                        onChange={(e) => setNewFeedUrl(e.target.value)}
+                        placeholder="https://example.com/feed.xml"
+                        required
+                        className="feed-input"
+                        disabled={loading}
+                    />
+                    <button type="submit" disabled={loading}>
+                        Add Feed
+                    </button>
+                </form>
+                {error && <p className="error-message">{error}</p>}
+            </div>
+ 
+            <div className="feed-list-section">
+                <h3>Manage Feeds</h3>
+                {loading && <p>Loading...</p>}
+                <ul className="settings-feed-list">
+                    {feeds.map((feed) => (
+                        <li key={feed._id} className="settings-feed-item">
+                            <div className="feed-info">
+                                <span className="feed-title">{feed.title || '(No Title)'}</span>
+                                <span className="feed-url">{feed.url}</span>
+                            </div>
+                            <button
+                                onClick={() => handleDeleteFeed(feed._id)}
+                                className="delete-btn"
+                                disabled={loading}
+                                title="Delete Feed"
+                            >
+                                Delete
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    );
+}
+ 
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/frontend/coverage/src/components/index.html b/frontend/coverage/src/components/index.html index 6af23d0..ec5db40 100644 --- a/frontend/coverage/src/components/index.html +++ b/frontend/coverage/src/components/index.html @@ -23,30 +23,30 @@
- 93.42% + 86.77% Statements - 71/76 + 105/121
- 82.69% + 76.47% Branches - 43/52 + 52/68
- 95.45% + 89.74% Functions - 21/22 + 35/39
- 93.05% + 90.09% Lines - 67/72 + 100/111
@@ -198,6 +198,36 @@ 17/17 + + Settings.css + +
+ + 0% + 0/0 + 0% + 0/0 + 0% + 0/0 + 0% + 0/0 + + + + Settings.tsx + +
+ + 75.55% + 34/45 + 56.25% + 9/16 + 82.35% + 14/17 + 84.61% + 33/39 + +
@@ -206,7 +236,7 @@