components FeedList.tsx

- -
- 87.27% - Statements - 48/55 -
- - -
- 70% - Branches - 35/50 -
- - -
- 78.94% - Functions - 15/19 -
- - -
- 90% - Lines - 45/50 -
- - -
- 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  
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-22x
-22x
-22x
-22x
-22x
-22x
-22x
-22x
-22x
-22x
-22x
- 
-22x
- 
-22x
-11x
-11x
- 
- 
- 
- 
- 
-22x
- 
- 
-22x
-1x
-1x
-1x
- 
- 
- 
-22x
-2x
- 
- 
-22x
- 
- 
- 
-22x
-1x
-1x
- 
- 
- 
-22x
-9x
- 
-7x
-7x
- 
- 
-7x
-7x
- 
- 
- 
-7x
-7x
-7x
- 
- 
-1x
-1x
- 
- 
- 
-22x
-13x
- 
-12x
-2x
- 
- 
-12x
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-1x
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-4x
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-2x
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-  import { useEffect, useState } from 'react';
-import { Link, useNavigate, useSearchParams, useLocation, useParams } from 'react-router-dom';
-import type { Feed, Category } from '../types';
-import './FeedList.css';
-import './FeedListVariants.css';
-import { apiFetch } from '../utils';
- 
-export default function FeedList({
-  theme,
-  setTheme,
-  setSidebarVisible,
-  isMobile,
-}: {
-  theme: string;
-  setTheme: (t: string) => void;
-  setSidebarVisible: (visible: boolean) => void;
-  isMobile: boolean;
-}) {
-  const [feeds, setFeeds] = useState<Feed[]>([]);
-  const [tags, setTags] = useState<Category[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const [feedsExpanded, setFeedsExpanded] = useState(false);
-  const [tagsExpanded, setTagsExpanded] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const location = useLocation();
-  const { feedId, tagName } = useParams();
- 
-  const sidebarVariant = searchParams.get('sidebar') || localStorage.getItem('neko-sidebar-variant') || 'glass';
- 
-  useEffect(() => {
-    const variant = searchParams.get('sidebar');
-    Iif (variant) {
-      localStorage.setItem('neko-sidebar-variant', variant);
-    }
-  }, [searchParams]);
- 
-  const currentFilter =
-    searchParams.get('filter') ||
-    (location.pathname === '/' && !feedId && !tagName ? 'unread' : '');
- 
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    Eif (searchQuery.trim()) {
-      navigate(`/?q=${encodeURIComponent(searchQuery.trim())}`);
-    }
-  };
- 
-  const toggleFeeds = () => {
-    setFeedsExpanded(!feedsExpanded);
-  };
- 
-  const toggleTags = () => {
-    setTagsExpanded(!tagsExpanded);
-  };
- 
-  const handleLinkClick = () => {
-    Eif (isMobile) {
-      setSidebarVisible(false);
-    }
-  };
- 
-  useEffect(() => {
-    Promise.all([
-      apiFetch('/api/feed/').then((res) => {
-        Iif (!res.ok) throw new Error('Failed to fetch feeds');
-        return res.json() as Promise<Feed[]>;
-      }),
-      apiFetch('/api/tag').then((res) => {
-        Iif (!res.ok) throw new Error('Failed to fetch tags');
-        return res.json() as Promise<Category[]>;
-      }),
-    ])
-      .then(([feedsData, tagsData]) => {
-        setFeeds(feedsData);
-        setTags(tagsData);
-        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>;
- 
-  const handleLogout = () => {
-    apiFetch('/api/logout', { method: 'POST' }).then(() => (window.location.href = '/v2/login'));
-  };
- 
-  return (
-    <div className={`feed-list variant-${sidebarVariant}`}>
-      <h1 className="logo" onClick={() => setSidebarVisible(false)}>
-        🐱
-      </h1>
- 
-      <div className="search-section">
-        <form onSubmit={handleSearch} className="search-form">
-          <input
-            type="search"
-            placeholder="search..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="search-input"
-          />
-        </form>
-      </div>
- 
-      <div className="filter-section">
-        <ul className="filter-list">
-          <li className="unread_filter">
-            <Link to="/?filter=unread" className={currentFilter === 'unread' ? 'active' : ''} onClick={handleLinkClick}>
-              unread
-            </Link>
-          </li>
-          <li className="all_filter">
-            <Link to="/?filter=all" className={currentFilter === 'all' ? 'active' : ''} onClick={handleLinkClick}>
-              all
-            </Link>
-          </li>
-          <li className="starred_filter">
-            <Link to="/?filter=starred" className={currentFilter === 'starred' ? 'active' : ''} onClick={handleLinkClick}>
-              starred
-            </Link>
-          </li>
-        </ul>
-      </div>
- 
-      <div className="tag-section">
-        <h4 onClick={toggleTags} className="section-header">
-          <span className={`caret ${tagsExpanded ? 'expanded' : ''}`}>▶</span> Tags
-        </h4>
-        {tagsExpanded && (
-          <ul className="tag-list-items">
-            {tags.map((tag) => (
-              <li key={tag.title} className="tag-item">
-                <Link
-                  to={`/tag/${encodeURIComponent(tag.title)}`}
-                  className={`tag-link ${tagName === tag.title ? 'active' : ''}`}
-                  onClick={handleLinkClick}
-                >
-                  {tag.title}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
- 
-      <div className="feed-section">
-        <h4 onClick={toggleFeeds} className="section-header">
-          <span className={`caret ${feedsExpanded ? 'expanded' : ''}`}>▶</span> Feeds
-        </h4>
-        {feedsExpanded &&
-          (feeds.length === 0 ? (
-            <p>No feeds found.</p>
-          ) : (
-            <ul className="feed-list-items">
-              {feeds.map((feed) => (
-                <li key={feed._id} className="sidebar-feed-item">
-                  <Link
-                    to={`/feed/${feed._id}`}
-                    className={`feed-title ${feedId === String(feed._id) ? 'active' : ''}`}
-                    onClick={handleLinkClick}
-                  >
-                    {feed.title || feed.url}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          ))}
-      </div>
- 
-      <div className="nav-section">
-        <ul className="nav-list">
-          <li>
-            <Link to="/settings" className="nav-link" onClick={handleLinkClick}>
-              settings
-            </Link>
-          </li>
-          <li>
-            <button onClick={handleLogout} className="logout-link">
-              logout
-            </button>
-          </li>
-        </ul>
-      </div>
- 
-      <div className="theme-section">
-        <div className="theme-selector">
-          <button
-            onClick={() => setTheme('light')}
-            className={theme === 'light' ? 'active' : ''}
-            title="Light Theme"
-          >
-            ☀️
-          </button>
-          <button
-            onClick={() => setTheme('dark')}
-            className={theme === 'dark' ? 'active' : ''}
-            title="Dark Theme"
-          >
-            🌙
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
- -