codytseng
11 months ago
22 changed files with 223 additions and 175 deletions
@ -0,0 +1,97 @@
@@ -0,0 +1,97 @@
|
||||
import { useFetchEvent } from '@/hooks' |
||||
import { generateEventIdFromETag } from '@/lib/tag' |
||||
import { useNostr } from '@/providers/NostrProvider' |
||||
import { kinds } from 'nostr-tools' |
||||
import { useEffect, useMemo, useRef, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import NoteCard, { NoteCardLoadingSkeleton } from '../NoteCard' |
||||
|
||||
const SHOW_COUNT = 10 |
||||
|
||||
export default function BookmarkList() { |
||||
const { t } = useTranslation() |
||||
const { bookmarkListEvent } = useNostr() |
||||
const eventIds = useMemo(() => { |
||||
if (!bookmarkListEvent) return [] |
||||
|
||||
return ( |
||||
bookmarkListEvent.tags |
||||
.map((tag) => (tag[0] === 'e' ? generateEventIdFromETag(tag) : undefined)) |
||||
.filter(Boolean) as `nevent1${string}`[] |
||||
).reverse() |
||||
}, [bookmarkListEvent]) |
||||
const [showCount, setShowCount] = useState(SHOW_COUNT) |
||||
const bottomRef = useRef<HTMLDivElement | null>(null) |
||||
|
||||
useEffect(() => { |
||||
const options = { |
||||
root: null, |
||||
rootMargin: '10px', |
||||
threshold: 0.1 |
||||
} |
||||
|
||||
const loadMore = () => { |
||||
if (showCount < eventIds.length) { |
||||
setShowCount((prev) => prev + SHOW_COUNT) |
||||
} |
||||
} |
||||
|
||||
const observerInstance = new IntersectionObserver((entries) => { |
||||
if (entries[0].isIntersecting) { |
||||
loadMore() |
||||
} |
||||
}, options) |
||||
|
||||
const currentBottomRef = bottomRef.current |
||||
|
||||
if (currentBottomRef) { |
||||
observerInstance.observe(currentBottomRef) |
||||
} |
||||
|
||||
return () => { |
||||
if (observerInstance && currentBottomRef) { |
||||
observerInstance.unobserve(currentBottomRef) |
||||
} |
||||
} |
||||
}, [showCount, eventIds]) |
||||
|
||||
if (eventIds.length === 0) { |
||||
return ( |
||||
<div className="mt-2 text-sm text-center text-muted-foreground"> |
||||
{t('no bookmarks found')} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
{eventIds.slice(0, showCount).map((eventId) => ( |
||||
<BookmarkedNote key={eventId} eventId={eventId} /> |
||||
))} |
||||
|
||||
{showCount < eventIds.length ? ( |
||||
<div ref={bottomRef}> |
||||
<NoteCardLoadingSkeleton isPictures={false} /> |
||||
</div> |
||||
) : ( |
||||
<div className="text-center text-sm text-muted-foreground mt-2"> |
||||
{t('no more bookmarks')} |
||||
</div> |
||||
)} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
function BookmarkedNote({ eventId }: { eventId: string }) { |
||||
const { event, isFetching } = useFetchEvent(eventId) |
||||
|
||||
if (isFetching) { |
||||
return <NoteCardLoadingSkeleton isPictures={false} /> |
||||
} |
||||
|
||||
if (!event || event.kind !== kinds.ShortTextNote) { |
||||
return null |
||||
} |
||||
|
||||
return <NoteCard event={event} className="w-full" /> |
||||
} |
||||
@ -1,107 +0,0 @@
@@ -1,107 +0,0 @@
|
||||
import { useFetchEvent } from '@/hooks' |
||||
import { useBookmarks } from '@/providers/BookmarksProvider' |
||||
import { useEffect, useMemo, useRef, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { generateEventIdFromETag } from '@/lib/tag' |
||||
import NoteCard, { NoteCardLoadingSkeleton } from '../NoteCard' |
||||
|
||||
export default function BookmarksList() { |
||||
const { t } = useTranslation() |
||||
const { bookmarks } = useBookmarks() |
||||
const [visibleBookmarks, setVisibleBookmarks] = useState< |
||||
{ eventId: string; neventId?: string }[] |
||||
>([]) |
||||
const [loading, setLoading] = useState(true) |
||||
const bottomRef = useRef<HTMLDivElement | null>(null) |
||||
const SHOW_COUNT = 10 |
||||
|
||||
const bookmarkItems = useMemo(() => { |
||||
return bookmarks |
||||
.filter((tag) => tag[0] === 'e') |
||||
.map((tag) => ({ |
||||
eventId: tag[1], |
||||
neventId: generateEventIdFromETag(tag) |
||||
})) |
||||
.reverse() |
||||
}, [bookmarks]) |
||||
|
||||
useEffect(() => { |
||||
setVisibleBookmarks(bookmarkItems.slice(0, SHOW_COUNT)) |
||||
setLoading(false) |
||||
}, [bookmarkItems]) |
||||
|
||||
useEffect(() => { |
||||
const options = { |
||||
root: null, |
||||
rootMargin: '10px', |
||||
threshold: 0.1 |
||||
} |
||||
|
||||
const loadMore = () => { |
||||
if (visibleBookmarks.length < bookmarkItems.length) { |
||||
setVisibleBookmarks((prev) => [ |
||||
...prev, |
||||
...bookmarkItems.slice(prev.length, prev.length + SHOW_COUNT) |
||||
]) |
||||
} |
||||
} |
||||
|
||||
const observerInstance = new IntersectionObserver((entries) => { |
||||
if (entries[0].isIntersecting) { |
||||
loadMore() |
||||
} |
||||
}, options) |
||||
|
||||
const currentBottomRef = bottomRef.current |
||||
|
||||
if (currentBottomRef) { |
||||
observerInstance.observe(currentBottomRef) |
||||
} |
||||
|
||||
return () => { |
||||
if (observerInstance && currentBottomRef) { |
||||
observerInstance.unobserve(currentBottomRef) |
||||
} |
||||
} |
||||
}, [visibleBookmarks, bookmarkItems]) |
||||
|
||||
if (loading) { |
||||
return <NoteCardLoadingSkeleton isPictures={false} /> |
||||
} |
||||
|
||||
if (bookmarkItems.length === 0) { |
||||
return ( |
||||
<div className="mt-2 text-sm text-center text-muted-foreground"> |
||||
{t('No bookmarks found. Add some by clicking the bookmark icon on notes.')} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<div className="space-y-4"> |
||||
{visibleBookmarks.map((item) => ( |
||||
<BookmarkedNote key={item.eventId} eventId={item.eventId} neventId={item.neventId} /> |
||||
))} |
||||
|
||||
{visibleBookmarks.length < bookmarkItems.length && ( |
||||
<div ref={bottomRef}> |
||||
<NoteCardLoadingSkeleton isPictures={false} /> |
||||
</div> |
||||
)} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
function BookmarkedNote({ eventId, neventId }: { eventId: string; neventId?: string }) { |
||||
const { event, isFetching } = useFetchEvent(neventId || eventId) |
||||
|
||||
if (isFetching) { |
||||
return <NoteCardLoadingSkeleton isPictures={false} /> |
||||
} |
||||
|
||||
if (!event) { |
||||
return null |
||||
} |
||||
|
||||
return <NoteCard event={event} className="w-full" /> |
||||
} |
||||
Loading…
Reference in new issue