diff options
| author | Adam Mathes <adam@adammathes.com> | 2026-02-14 10:03:35 -0800 |
|---|---|---|
| committer | Adam Mathes <adam@adammathes.com> | 2026-02-14 10:03:35 -0800 |
| commit | a4997a5fbc65913b55f2215eb3b868693bd76c51 (patch) | |
| tree | fe303ee7c5e5aba89f1c13766b14556f6e3d2f79 /frontend/coverage/src/components/FeedItems.tsx.html | |
| parent | 4d058d9ddb34f0e8d384b20d4b9e30f74d349129 (diff) | |
| download | neko-a4997a5fbc65913b55f2215eb3b868693bd76c51.tar.gz neko-a4997a5fbc65913b55f2215eb3b868693bd76c51.tar.bz2 neko-a4997a5fbc65913b55f2215eb3b868693bd76c51.zip | |
test: increase frontend coverage for Settings and improve FeedItem css
Diffstat (limited to 'frontend/coverage/src/components/FeedItems.tsx.html')
| -rw-r--r-- | frontend/coverage/src/components/FeedItems.tsx.html | 597 |
1 files changed, 315 insertions, 282 deletions
diff --git a/frontend/coverage/src/components/FeedItems.tsx.html b/frontend/coverage/src/components/FeedItems.tsx.html index e57acf9..f6b7493 100644 --- a/frontend/coverage/src/components/FeedItems.tsx.html +++ b/frontend/coverage/src/components/FeedItems.tsx.html @@ -1,64 +1,68 @@ + <!doctype html> <html lang="en"> - <head> + +<head> <title>Code coverage report for src/components/FeedItems.tsx</title> <meta charset="utf-8" /> <link rel="stylesheet" href="../../prettify.css" /> <link rel="stylesheet" href="../../base.css" /> <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> - <style type="text/css"> - .coverage-summary .sorter { - background-image: url(../../sort-arrow-sprite.png); - } + <style type='text/css'> + .coverage-summary .sorter { + background-image: url(../../sort-arrow-sprite.png); + } </style> - </head> - - <body> - <div class="wrapper"> - <div class="pad1"> - <h1> - <a href="../../index.html">All files</a> / - <a href="index.html">src/components</a> FeedItems.tsx - </h1> - <div class="clearfix"> - <div class="fl pad1y space-right2"> - <span class="strong">89.34% </span> - <span class="quiet">Statements</span> - <span class="fraction">109/122</span> - </div> - - <div class="fl pad1y space-right2"> - <span class="strong">77.21% </span> - <span class="quiet">Branches</span> - <span class="fraction">61/79</span> - </div> - - <div class="fl pad1y space-right2"> - <span class="strong">86.2% </span> - <span class="quiet">Functions</span> - <span class="fraction">25/29</span> - </div> - - <div class="fl pad1y space-right2"> - <span class="strong">89.09% </span> - <span class="quiet">Lines</span> - <span class="fraction">98/110</span> - </div> +</head> + +<body> +<div class='wrapper'> + <div class='pad1'> + <h1><a href="../../index.html">All files</a> / <a href="index.html">src/components</a> FeedItems.tsx</h1> + <div class='clearfix'> + + <div class='fl pad1y space-right2'> + <span class="strong">88.97% </span> + <span class="quiet">Statements</span> + <span class='fraction'>113/127</span> + </div> + + + <div class='fl pad1y space-right2'> + <span class="strong">75.3% </span> + <span class="quiet">Branches</span> + <span class='fraction'>61/81</span> + </div> + + + <div class='fl pad1y space-right2'> + <span class="strong">86.2% </span> + <span class="quiet">Functions</span> + <span class='fraction'>25/29</span> + </div> + + + <div class='fl pad1y space-right2'> + <span class="strong">88.69% </span> + <span class="quiet">Lines</span> + <span class='fraction'>102/115</span> + </div> + + </div> <p class="quiet"> - Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, - <em>p</em> or <em>k</em> for the previous block. + Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block. </p> <template id="filterTemplate"> - <div class="quiet"> - Filter: - <input type="search" id="fileSearch" /> - </div> + <div class="quiet"> + Filter: + <input type="search" id="fileSearch"> + </div> </template> - </div> - <div class="status-line high"></div> - <pre><table class="coverage"> + </div> + <div class='status-line high'></div> + <pre><table class="coverage"> <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a> <a name='L2'></a><a href='#L2'>2</a> <a name='L3'></a><a href='#L3'>3</a> @@ -282,7 +286,18 @@ <a name='L221'></a><a href='#L221'>221</a> <a name='L222'></a><a href='#L222'>222</a> <a name='L223'></a><a href='#L223'>223</a> -<a name='L224'></a><a href='#L224'>224</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral"> </span> +<a name='L224'></a><a href='#L224'>224</a> +<a name='L225'></a><a href='#L225'>225</a> +<a name='L226'></a><a href='#L226'>226</a> +<a name='L227'></a><a href='#L227'>227</a> +<a name='L228'></a><a href='#L228'>228</a> +<a name='L229'></a><a href='#L229'>229</a> +<a name='L230'></a><a href='#L230'>230</a> +<a name='L231'></a><a href='#L231'>231</a> +<a name='L232'></a><a href='#L232'>232</a> +<a name='L233'></a><a href='#L233'>233</a> +<a name='L234'></a><a href='#L234'>234</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> @@ -298,6 +313,7 @@ <span class="cline-any cline-yes">27x</span> <span class="cline-any cline-yes">27x</span> <span class="cline-any cline-yes">27x</span> +<span class="cline-any cline-yes">27x</span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-yes">27x</span> <span class="cline-any cline-yes">8x</span> @@ -323,6 +339,11 @@ <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-yes">8x</span> +<span class="cline-any cline-yes">8x</span> +<span class="cline-any cline-no"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">8x</span> <span class="cline-any cline-no"> </span> <span class="cline-any cline-yes">8x</span> <span class="cline-any cline-no"> </span> @@ -330,6 +351,8 @@ <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-yes">8x</span> +<span class="cline-any cline-yes">8x</span> +<span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-yes">8x</span> @@ -363,77 +386,79 @@ <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-yes">27x</span> <span class="cline-any cline-yes">7x</span> +<span class="cline-any cline-yes">7x</span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">27x</span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-yes">27x</span> -<span class="cline-any cline-yes">23x</span> -<span class="cline-any cline-yes">3x</span> -<span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">3x</span> -<span class="cline-any cline-yes">2x</span> <span class="cline-any cline-yes">2x</span> <span class="cline-any cline-yes">2x</span> <span class="cline-any cline-yes">2x</span> -<span class="cline-any cline-yes">2x</span> -<span class="cline-any cline-yes">1x</span> <span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">27x</span> <span class="cline-any cline-yes">2x</span> <span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">3x</span> +<span class="cline-any cline-neutral"> </span> <span class="cline-any cline-yes">2x</span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">1x</span> -<span class="cline-any cline-no"> </span> -<span class="cline-any cline-no"> </span> -<span class="cline-any cline-no"> </span> -<span class="cline-any cline-no"> </span> +<span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-no"> </span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">1x</span> -<span class="cline-any cline-yes">1x</span> -<span class="cline-any cline-yes">1x</span> -<span class="cline-any cline-yes">1x</span> <span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">27x</span> <span class="cline-any cline-yes">1x</span> <span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">2x</span> <span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">1x</span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">23x</span> -<span class="cline-any cline-yes">23x</span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-no"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-yes">27x</span> +<span class="cline-any cline-yes">23x</span> +<span class="cline-any cline-yes">3x</span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">3x</span> <span class="cline-any cline-yes">2x</span> <span class="cline-any cline-yes">2x</span> <span class="cline-any cline-yes">2x</span> -<span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">27x</span> <span class="cline-any cline-yes">2x</span> -<span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">3x</span> +<span class="cline-any cline-yes">2x</span> +<span class="cline-any cline-yes">1x</span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-yes">2x</span> <span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">2x</span> <span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">1x</span> +<span class="cline-any cline-no"> </span> +<span class="cline-any cline-no"> </span> +<span class="cline-any cline-no"> </span> +<span class="cline-any cline-no"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-no"> </span> <span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">1x</span> +<span class="cline-any cline-yes">1x</span> +<span class="cline-any cline-yes">1x</span> +<span class="cline-any cline-yes">1x</span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">27x</span> <span class="cline-any cline-yes">1x</span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">2x</span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">1x</span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">23x</span> +<span class="cline-any cline-yes">23x</span> +<span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-no"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-yes">27x</span> @@ -477,7 +502,6 @@ <span class="cline-any cline-yes">27x</span> <span class="cline-any cline-yes">14x</span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-neutral"> </span> <span class="cline-any cline-yes">13x</span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> @@ -510,242 +534,251 @@ import { useParams, useSearchParams } from 'react-router-dom'; import type { Item } from '../types'; import FeedItem from './FeedItem'; import './FeedItems.css'; +import { apiFetch } from '../utils'; export default function FeedItems() { - const { feedId, tagName } = useParams<{ feedId: string; tagName: string }>(); - const [searchParams] = useSearchParams(); - const filterFn = searchParams.get('filter') || 'unread'; + const { feedId, tagName } = useParams<{ feedId: string; tagName: string }>(); + const [searchParams] = useSearchParams(); + const filterFn = searchParams.get('filter') || 'unread'; - const [items, setItems] = useState<Item[]>([]); - const [loading, setLoading] = useState(true); - const [loadingMore, setLoadingMore] = useState(false); - const [hasMore, setHasMore] = useState(true); - const [error, setError] = useState(''); + const [items, setItems] = useState<Item[]>([]); + const [loading, setLoading] = useState(true); + const [loadingMore, setLoadingMore] = useState(false); + const [hasMore, setHasMore] = useState(true); + const [error, setError] = useState(''); + const [selectedIndex, setSelectedIndex] = useState(-1); - const fetchItems = (maxId?: string) => { - if (maxId) { - setLoadingMore(true); - } else { - setLoading(true); - setItems([]); - } - setError(''); + const fetchItems = (maxId?: string) => { + if (maxId) { + setLoadingMore(true); + } else { + setLoading(true); + setItems([]); + } + setError(''); - let url = '/api/stream'; - const params = new URLSearchParams(); + let url = '/api/stream'; + const params = new URLSearchParams(); - if (feedId) { - params.append('feed_id', feedId); - } else if (tagName) { - params.append('tag', tagName); - } + if (feedId) { + params.append('feed_id', feedId); + } else if (tagName) { + params.append('tag', tagName); + } - if (maxId) { - params.append('max_id', maxId); - } + if (maxId) { + params.append('max_id', maxId); + } + + // Apply filters + const searchQuery = searchParams.get('q'); + <span class="missing-if-branch" title="if path not taken" >I</span>if (searchQuery) { +<span class="cstat-no" title="statement not covered" > params.append('q', searchQuery);</span> + } + + <span class="missing-if-branch" title="if path not taken" >I</span>if (filterFn === 'all') { +<span class="cstat-no" title="statement not covered" > params.append('read_filter', 'all');</span> + <span class="missing-if-branch" title="if path not taken" >I</span>} else if (filterFn === 'starred') { +<span class="cstat-no" title="statement not covered" > params.append('starred', 'true');</span> +<span class="cstat-no" title="statement not covered" > params.append('read_filter', 'all');</span> + } else { + // default to unread + <span class="missing-if-branch" title="else path not taken" >E</span>if (!searchQuery) { + params.append('read_filter', 'unread'); + } + } + + const queryString = params.toString(); + <span class="missing-if-branch" title="else path not taken" >E</span>if (queryString) { + url += `?${queryString}`; + } - // Apply filters - <span class="missing-if-branch" title="if path not taken" >I</span>if (filterFn === 'all') { -<span class="cstat-no" title="statement not covered" > params.append('read_filter', 'all');</span> - <span class="missing-if-branch" title="if path not taken" >I</span>} else if (filterFn === 'starred') { -<span class="cstat-no" title="statement not covered" > params.append('starred', 'true');</span> -<span class="cstat-no" title="statement not covered" > params.append('read_filter', 'all');</span> + apiFetch(url) + .then((res) => { + <span class="missing-if-branch" title="if path not taken" >I</span>if (!res.ok) { +<span class="cstat-no" title="statement not covered" > throw new Error('Failed to fetch items');</span> + } + return res.json(); + }) + .then((data) => { + if (maxId) { + setItems((prev) => [...prev, ...data]); } else { - // default to unread - params.append('read_filter', 'unread'); + setItems(data); } + setHasMore(data.length > 0); + setLoading(false); + setLoadingMore(false); + }) + .catch((err) => { + setError(err.message); + setLoading(false); + setLoadingMore(false); + }); + }; - const queryString = params.toString(); - <span class="missing-if-branch" title="else path not taken" >E</span>if (queryString) { - url += `?${queryString}`; - } + useEffect(() => { + fetchItems(); + setSelectedIndex(-1); + }, [feedId, tagName, filterFn, searchParams]); - fetch(url) - .then((res) => { - <span class="missing-if-branch" title="if path not taken" >I</span>if (!res.ok) { -<span class="cstat-no" title="statement not covered" > throw new Error('Failed to fetch items');</span> - } - return res.json(); - }) - .then((data) => { - if (maxId) { - setItems((prev) => [...prev, ...data]); - } else { - setItems(data); - } - setHasMore(data.length > 0); - setLoading(false); - setLoadingMore(false); - }) - .catch((err) => { - setError(err.message); - setLoading(false); - setLoadingMore(false); - }); - }; - useEffect(() => { - fetchItems(); - }, [feedId, tagName, filterFn]); + const scrollToItem = (index: number) => { + const element = document.getElementById(`item-${index}`); + <span class="missing-if-branch" title="else path not taken" >E</span>if (element) { + element.scrollIntoView({ behavior: 'auto', block: 'start' }); + } + }; - const [selectedIndex, setSelectedIndex] = useState(-1); + const markAsRead = (item: Item) => { + const updatedItem = { ...item, read: true }; + // Optimistic update + setItems((prevItems) => prevItems.map((i) => (i._id === item._id ? updatedItem : i))); - useEffect(() => { - const handleKeyDown = (e: KeyboardEvent) => { - <span class="missing-if-branch" title="if path not taken" >I</span>if (items.length === 0) <span class="cstat-no" title="statement not covered" >return;</span> + apiFetch(`/api/item/${item._id}`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ read: true, starred: item.starred }), + }).catch(<span class="fstat-no" title="function not covered" >(e</span>rr) => <span class="cstat-no" title="statement not covered" >console.error('Failed to mark read', err))</span>; + }; - if (e.key === 'j') { - setSelectedIndex((prev) => { - const nextIndex = Math.min(prev + 1, items.length - 1); - <span class="missing-if-branch" title="else path not taken" >E</span>if (nextIndex !== prev) { - const item = items[nextIndex]; - if (!item.read) { - markAsRead(item); - } - scrollToItem(nextIndex); - } - return nextIndex; - }); - <span class="missing-if-branch" title="if path not taken" >I</span>} else if (e.key === 'k') { -<span class="cstat-no" title="statement not covered" > setSelectedIndex(<span class="fstat-no" title="function not covered" >(p</span>rev) => {</span> - const nextIndex = <span class="cstat-no" title="statement not covered" >Math.max(prev - 1, 0);</span> -<span class="cstat-no" title="statement not covered" > if (nextIndex !== prev) {</span> -<span class="cstat-no" title="statement not covered" > scrollToItem(nextIndex);</span> - } -<span class="cstat-no" title="statement not covered" > return nextIndex;</span> - }); - <span class="missing-if-branch" title="else path not taken" >E</span>} else if (e.key === 's') { - setSelectedIndex((currentIndex) => { - <span class="missing-if-branch" title="else path not taken" >E</span>if (currentIndex >= 0 && currentIndex < items.length) { - toggleStar(items[currentIndex]); - } - return currentIndex; - }); - } - }; + const toggleStar = (item: Item) => { + const updatedItem = { ...item, starred: !item.starred }; + // Optimistic update + setItems((prevItems) => prevItems.map((i) => (i._id === item._id ? updatedItem : i))); - window.addEventListener('keydown', handleKeyDown); - return () => window.removeEventListener('keydown', handleKeyDown); - }, [items]); + apiFetch(`/api/item/${item._id}`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ read: item.read, starred: !item.starred }), + }).catch(<span class="fstat-no" title="function not covered" >(e</span>rr) => <span class="cstat-no" title="statement not covered" >console.error('Failed to toggle star', err))</span>; + }; - const scrollToItem = (index: number) => { - const element = document.getElementById(`item-${index}`); - <span class="missing-if-branch" title="else path not taken" >E</span>if (element) { - element.scrollIntoView({ behavior: 'smooth', block: 'start' }); - } - }; + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + <span class="missing-if-branch" title="if path not taken" >I</span>if (items.length === 0) <span class="cstat-no" title="statement not covered" >return;</span> - const markAsRead = (item: Item) => { - const updatedItem = { ...item, read: true }; - // Optimistic update - setItems((prevItems) => prevItems.map((i) => (i._id === item._id ? updatedItem : i))); - - fetch(`/api/item/${item._id}`, { - method: 'PUT', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ read: true, starred: item.starred }), - }).catch(<span class="fstat-no" title="function not covered" >(e</span>rr) => <span class="cstat-no" title="statement not covered" >console.error('Failed to mark read', err))</span>; + if (e.key === 'j') { + setSelectedIndex((prev) => { + const nextIndex = Math.min(prev + 1, items.length - 1); + <span class="missing-if-branch" title="else path not taken" >E</span>if (nextIndex !== prev) { + const item = items[nextIndex]; + if (!item.read) { + markAsRead(item); + } + scrollToItem(nextIndex); + } + return nextIndex; + }); + <span class="missing-if-branch" title="if path not taken" >I</span>} else if (e.key === 'k') { +<span class="cstat-no" title="statement not covered" > setSelectedIndex(<span class="fstat-no" title="function not covered" >(p</span>rev) => {</span> + const nextIndex = <span class="cstat-no" title="statement not covered" >Math.max(prev - 1, 0);</span> +<span class="cstat-no" title="statement not covered" > if (nextIndex !== prev) {</span> +<span class="cstat-no" title="statement not covered" > scrollToItem(nextIndex);</span> + } +<span class="cstat-no" title="statement not covered" > return nextIndex;</span> + }); + <span class="missing-if-branch" title="else path not taken" >E</span>} else if (e.key === 's') { + setSelectedIndex((currentIndex) => { + <span class="missing-if-branch" title="else path not taken" >E</span>if (currentIndex >= 0 && currentIndex < items.length) { + toggleStar(items[currentIndex]); + } + return currentIndex; + }); + } }; - const toggleStar = (item: Item) => { - const updatedItem = { ...item, starred: !item.starred }; - // Optimistic update - setItems((prevItems) => prevItems.map((i) => (i._id === item._id ? updatedItem : i))); + window.addEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown); + }, [items]); - fetch(`/api/item/${item._id}`, { - method: 'PUT', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ read: item.read, starred: !item.starred }), - }).catch(<span class="fstat-no" title="function not covered" >(e</span>rr) => <span class="cstat-no" title="statement not covered" >console.error('Failed to toggle star', err))</span>; - }; - useEffect(() => { - const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - // Infinity scroll sentinel - if (entry.target.id === 'load-more-sentinel') { - <span class="missing-if-branch" title="else path not taken" >E</span>if (entry.isIntersecting && !loadingMore && hasMore && items.length > 0) { - fetchItems(String(items[items.length - 1]._id)); - } - return; - } - // If item is not intersecting and is above the viewport, it's been scrolled past - <span class="missing-if-branch" title="else path not taken" >E</span>if (!entry.isIntersecting && entry.boundingClientRect.top < 0) { - const index = Number(entry.target.getAttribute('data-index')); - <span class="missing-if-branch" title="else path not taken" >E</span>if (!isNaN(index) && index >= 0 && index < items.length) { - const item = items[index]; - <span class="missing-if-branch" title="else path not taken" >E</span>if (!item.read) { - markAsRead(item); - } - } - } - }); - }, - { root: null, threshold: 0 } - ); + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + // Infinity scroll sentinel + if (entry.target.id === 'load-more-sentinel') { + <span class="missing-if-branch" title="else path not taken" >E</span>if (entry.isIntersecting && !loadingMore && hasMore && items.length > 0) { + fetchItems(String(items[items.length - 1]._id)); + } + return; + } - items.forEach((_, index) => { - const el = document.getElementById(`item-${index}`); - <span class="missing-if-branch" title="else path not taken" >E</span>if (el) observer.observe(el); + // If item is not intersecting and is above the viewport, it's been scrolled past + <span class="missing-if-branch" title="else path not taken" >E</span>if (!entry.isIntersecting && entry.boundingClientRect.top < 0) { + const index = Number(entry.target.getAttribute('data-index')); + <span class="missing-if-branch" title="else path not taken" >E</span>if (!isNaN(index) && index >= 0 && index < items.length) { + const item = items[index]; + <span class="missing-if-branch" title="else path not taken" >E</span>if (!item.read) { + markAsRead(item); + } + } + } }); + }, + { root: null, threshold: 0 } + ); - const sentinel = document.getElementById('load-more-sentinel'); - if (sentinel) observer.observe(sentinel); + items.forEach((_, index) => { + const el = document.getElementById(`item-${index}`); + <span class="missing-if-branch" title="else path not taken" >E</span>if (el) observer.observe(el); + }); - return () => observer.disconnect(); - }, [items, loadingMore, hasMore]); + const sentinel = document.getElementById('load-more-sentinel'); + if (sentinel) observer.observe(sentinel); - if (loading) return <div className="feed-items-loading">Loading items...</div>; - if (error) return <div className="feed-items-error">Error: {error}</div>; + return () => observer.disconnect(); + }, [items, loadingMore, hasMore]); + 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"> - {items.length === 0 ? ( -<span class="branch-0 cbranch-no" title="branch not covered" > <p>No items found.</p></span> - ) : ( - <ul className="item-list"> - {items.map((item, index) => ( - <div - id={`item-${index}`} - key={item._id} - data-index={index} - className={index === selectedIndex ? 'selected-item-container' : ''} - onClick={<span class="fstat-no" title="function not covered" >() => <span class="cstat-no" title="statement not covered" >s</span>etSelectedIndex(index)}</span> - > - <FeedItem item={item} /> - </div> - ))} - {hasMore && ( - <div id="load-more-sentinel" className="loading-more"> - {loadingMore ? 'Loading more...' : ''} - </div> - )} - </ul> - )} - </div> - ); + return ( + <div className="feed-items"> + {items.length === 0 ? ( +<span class="branch-0 cbranch-no" title="branch not covered" > <p>No items found.</p></span> + ) : ( + <ul className="item-list"> + {items.map((item, index) => ( + <div + id={`item-${index}`} + key={item._id} + data-index={index} + data-selected={index === selectedIndex} + onClick={<span class="fstat-no" title="function not covered" >() => <span class="cstat-no" title="statement not covered" >s</span>etSelectedIndex(index)}</span> + > + <FeedItem item={item} /> + </div> + ))} + {hasMore && ( + <div id="load-more-sentinel" className="loading-more"> + {loadingMore ? 'Loading more...' : ''} + </div> + )} + </ul> + )} + </div> + ); } </pre></td></tr></table></pre> - <div class="push"></div> - <!-- for sticky footer --> - </div> - <!-- /wrapper --> - <div class="footer quiet pad2 space-top1 center small"> - Code coverage generated by - <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a> - at 2026-02-13T21:49:58.924Z - </div> - <script src="../../prettify.js"></script> - <script> - window.onload = function () { - prettyPrint(); - }; - </script> - <script src="../../sorter.js"></script> - <script src="../../block-navigation.js"></script> - </body> + <div class='push'></div><!-- for sticky footer --> + </div><!-- /wrapper --> + <div class='footer quiet pad2 space-top1 center small'> + Code coverage generated by + <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a> + at 2026-02-14T18:02:09.004Z + </div> + <script src="../../prettify.js"></script> + <script> + window.onload = function () { + prettyPrint(); + }; + </script> + <script src="../../sorter.js"></script> + <script src="../../block-navigation.js"></script> + </body> </html> +
\ No newline at end of file |