components Settings.tsx

- -
- 80% - Statements - 60/75 -
- - -
- 66.66% - Branches - 20/30 -
- - -
- 85.18% - Functions - 23/27 -
- - -
- 87.87% - Lines - 58/66 -
- - -
- 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
-123
-124
-125
-126
-127
-128
-129
-130
-131
-132
-133
-134
-135
-136
-137
-138
-139
-140
-141
-142
-143
-144
-145
-146
-147
-148
-149
-150
-151
-152
-153
-154
-155
-156
-157
-158
-159
-160
-161
-162
-163
-164
-165
-166
-167
-168
-169
-170
-171
-172
-173
-174
-175
-176
-177
-178
-179
-180
-181
-182
-183
-184
-185
-186
-187
-188
-189
-190
-191
-192
-193
-194
-195
-196
-197
-198
-199
-200
-201
-202
-203
-204
-205
-206
-207
-208
-209
-210
-211
-212
-213
-214
-215
-216
-217
-218
-219
-220
-221
-222
-223
-224
-225
-226
-227
-228
-229
-230
-231
-232
-233
-234
-235
-236
-237  
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-34x
- 
-34x
-34x
-34x
- 
-34x
- 
- 
-34x
-9x
-9x
- 
-9x
-9x
- 
- 
-9x
-9x
- 
- 
- 
- 
- 
- 
- 
-34x
- 
-7x
- 
- 
- 
-34x
-2x
-2x
- 
-2x
-2x
- 
- 
- 
- 
- 
-2x
-1x
- 
- 
-1x
-1x
- 
- 
-1x
-1x
- 
- 
- 
-34x
-1x
- 
-1x
-1x
- 
- 
- 
-1x
-1x
-1x
- 
- 
- 
- 
- 
- 
- 
-34x
-1x
-1x
- 
-1x
-1x
-1x
-1x
- 
-1x
- 
- 
- 
- 
-1x
-1x
- 
- 
-1x
-1x
-1x
- 
- 
- 
- 
- 
- 
- 
-34x
-1x
-1x
- 
- 
- 
-1x
-1x
- 
- 
-1x
-1x
- 
- 
- 
- 
- 
- 
- 
-34x
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-1x
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-2x
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-1x
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-6x
- 
- 
- 
- 
- 
-1x
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-  import React, { useEffect, useState } from 'react';
-import type { Feed } from '../types';
-import './Settings.css';
-import { apiFetch } from '../utils';
- 
-interface SettingsProps {
-  fontTheme?: string;
-  setFontTheme?: (t: string) => void;
-}
- 
-export default function Settings({ fontTheme, setFontTheme }: SettingsProps) {
-  const [feeds, setFeeds] = useState<Feed[]>([]);
-  /* ... existing state ... */
-  const [newFeedUrl, setNewFeedUrl] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
- 
-  const [importFile, setImportFile] = useState<File | null>(null);
- 
-  /* ... existing fetchFeeds ... */
-  const fetchFeeds = React.useCallback(() => {
-    setLoading(true);
-    apiFetch('/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);
-      });
-  }, []);
- 
-  useEffect(() => {
-    // eslint-disable-next-line
-    fetchFeeds();
-  }, [fetchFeeds]);
- 
-  /* ... existing handlers ... */
-  const handleAddFeed = (e: React.FormEvent) => {
-    e.preventDefault();
-    Iif (!newFeedUrl) return;
- 
-    setLoading(true);
-    apiFetch('/api/feed/', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ url: newFeedUrl }),
-    })
-      .then((res) => {
-        if (!res.ok) throw new Error('Failed to add feed');
-        return res.json();
-      })
-      .then(() => {
-        setNewFeedUrl('');
-        fetchFeeds();
-      })
-      .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);
-    apiFetch(`/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);
-      });
-  };
- 
-  const handleImport = (e: React.FormEvent) => {
-    e.preventDefault();
-    Iif (!importFile) return;
- 
-    setLoading(true);
-    const formData = new FormData();
-    formData.append('file', importFile);
-    formData.append('format', 'opml');
- 
-    apiFetch('/api/import', {
-      method: 'POST',
-      body: formData,
-    })
-      .then((res) => {
-        Iif (!res.ok) throw new Error('Failed to import feeds');
-        return res.json();
-      })
-      .then(() => {
-        setImportFile(null);
-        fetchFeeds();
-        alert('Import successful!');
-      })
-      .catch((err) => {
-        setError(err.message);
-        setLoading(false);
-      });
-  };
- 
-  const handleCrawl = () => {
-    setLoading(true);
-    apiFetch('/api/crawl', {
-      method: 'POST',
-    })
-      .then((res) => {
-        Iif (!res.ok) throw new Error('Failed to start crawl');
-        return res.json();
-      })
-      .then(() => {
-        setLoading(false);
-        alert('Crawl started!');
-      })
-      .catch((err) => {
-        setError(err.message);
-        setLoading(false);
-      });
-  };
- 
-  return (
-    <div className="settings-page variant-glass">
-      <h2>Settings</h2>
- 
-      {setFontTheme && (
-        <div className="appearance-section">
-          <h3>Appearance</h3>
-          <div className="font-selector">
-            <label htmlFor="font-theme-select">Font Theme:</label>
-            <select
-              id="font-theme-select"
-              value={fontTheme || 'default'}
-              onChange={(e) => setFontTheme(e.target.value)}
-              className="font-select"
-            >
-              <option value="default">Default</option>
-              <option value="serif">Serif</option>
-              <option value="sans">Sans-Serif</option>
-              <option value="mono">Monospace</option>
-            </select>
-          </div>
-        </div>
-      )}
- 
-      <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>
-      </div>
- 
-      <div className="import-export-section">
-        <div className="import-section">
-          <h3>Import Feeds (OPML)</h3>
-          <form onSubmit={handleImport} className="import-form">
-            <input
-              type="file"
-              accept=".opml,.xml,.txt"
-              aria-label="Import Feeds"
-              onChange={(e) => setImportFile(e.target.files?.[0] || null)}
-              className="file-input"
-              disabled={loading}
-            />
-            <button type="submit" disabled={!importFile || loading}>
-              Import
-            </button>
-          </form>
-        </div>
- 
-        <div className="export-section">
-          <h3>Export Feeds</h3>
-          <div className="export-buttons">
-            <a href="/api/export/opml" className="export-btn">OPML</a>
-            <a href="/api/export/text" className="export-btn">Text</a>
-            <a href="/api/export/json" className="export-btn">JSON</a>
-          </div>
-        </div>
- 
-        <div className="crawl-section">
-          <h3>Actions</h3>
-          <button onClick={handleCrawl} disabled={loading} className="crawl-btn">
-            Crawl All Feeds Now
-          </button>
-        </div>
-      </div>
- 
-      {error && <p className="error-message">{error}</p>}
- 
-      <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>
-  );
-}
-
- -