fix: 🐛

This commit is contained in:
codytseng
2025-08-12 11:05:24 +08:00
parent c6a5157fe7
commit 4a946e4ab0
9 changed files with 310 additions and 211 deletions

View File

@@ -1,135 +1,28 @@
import NoteList, { TNoteListRef } from '@/components/NoteList'
import Tabs from '@/components/Tabs'
import { ExtendedKind } from '@/constants'
import { isReplyNoteEvent } from '@/lib/event'
import { useNostr } from '@/providers/NostrProvider'
import { useUserTrust } from '@/providers/UserTrustProvider'
import client from '@/services/client.service'
import storage from '@/services/local-storage.service'
import { TNormalFeedSubRequest, TNoteListMode } from '@/types'
import dayjs from 'dayjs'
import { Event, kinds } from 'nostr-tools'
import { useEffect, useMemo, useRef, useState } from 'react'
const LIMIT = 100
const ALGO_LIMIT = 500
const KINDS = [
kinds.ShortTextNote,
kinds.Repost,
kinds.Highlights,
kinds.LongFormArticle,
ExtendedKind.COMMENT,
ExtendedKind.POLL,
ExtendedKind.VOICE,
ExtendedKind.VOICE_COMMENT,
ExtendedKind.PICTURE
]
import { TFeedSubRequest, TNoteListMode } from '@/types'
import { useRef, useState } from 'react'
export default function NormalFeed({
subRequests,
areAlgoRelays = false
areAlgoRelays = false,
isMainFeed = false
}: {
subRequests: TNormalFeedSubRequest[]
subRequests: TFeedSubRequest[]
areAlgoRelays?: boolean
isMainFeed?: boolean
}) {
const { startLogin } = useNostr()
const { isUserTrusted, hideUntrustedNotes } = useUserTrust()
const { hideUntrustedNotes } = useUserTrust()
const [listMode, setListMode] = useState<TNoteListMode>(() => storage.getNoteListMode())
const [events, setEvents] = useState<Event[]>([])
const [newEvents, setNewEvents] = useState<Event[]>([])
const [hasMore, setHasMore] = useState<boolean>(true)
const [loading, setLoading] = useState(true)
const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
const [refreshCount, setRefreshCount] = useState(0)
const noteListRef = useRef<TNoteListRef>(null)
const filteredNewEvents = useMemo(() => {
return newEvents.filter((event: Event) => {
return (
(listMode !== 'posts' || !isReplyNoteEvent(event)) &&
(!hideUntrustedNotes || isUserTrusted(event.pubkey))
)
})
}, [newEvents, listMode, hideUntrustedNotes])
useEffect(() => {
if (!subRequests.length) return
async function init() {
setLoading(true)
setEvents([])
setNewEvents([])
setHasMore(true)
const { closer, timelineKey } = await client.subscribeTimeline(
subRequests.map(({ urls, filter }) => ({
urls,
filter: {
...filter,
kinds: KINDS,
limit: areAlgoRelays ? ALGO_LIMIT : LIMIT
}
})),
{
onEvents: (events, eosed) => {
if (events.length > 0) {
setEvents(events)
}
if (areAlgoRelays) {
setHasMore(false)
}
if (eosed) {
setLoading(false)
setHasMore(events.length > 0)
}
},
onNew: (event) => {
setNewEvents((oldEvents) =>
[event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
)
}
},
{
startLogin,
needSort: !areAlgoRelays
}
)
setTimelineKey(timelineKey)
return closer
}
const promise = init()
return () => {
promise.then((closer) => closer())
}
}, [JSON.stringify(subRequests), refreshCount])
const loadMore = async () => {
if (!timelineKey || areAlgoRelays) return
setLoading(true)
const newEvents = await client.loadMoreTimeline(
timelineKey,
events.length ? events[events.length - 1].created_at - 1 : dayjs().unix(),
LIMIT
)
setLoading(false)
if (newEvents.length === 0) {
setHasMore(false)
return
}
setEvents((oldEvents) => [...oldEvents, ...newEvents])
}
const showNewEvents = () => {
setEvents((oldEvents) => [...newEvents, ...oldEvents])
setNewEvents([])
setTimeout(() => {
noteListRef.current?.scrollToTop()
}, 0)
}
const handleListModeChange = (mode: TNoteListMode) => {
setListMode(mode)
storage.setNoteListMode(mode)
if (isMainFeed) {
storage.setNoteListMode(mode)
}
setTimeout(() => {
noteListRef.current?.scrollToTop()
}, 0)
@@ -149,19 +42,10 @@ export default function NormalFeed({
/>
<NoteList
ref={noteListRef}
events={events.filter(
(event: Event) =>
(listMode !== 'posts' || !isReplyNoteEvent(event)) &&
(!hideUntrustedNotes || isUserTrusted(event.pubkey))
)}
hasMore={hasMore}
loading={loading}
loadMore={loadMore}
onRefresh={() => {
setRefreshCount((count) => count + 1)
}}
newEvents={filteredNewEvents}
showNewEvents={showNewEvents}
subRequests={subRequests}
hideReplies={listMode === 'posts'}
hideUntrustedNotes={hideUntrustedNotes}
areAlgoRelays={areAlgoRelays}
/>
</>
)

View File

@@ -1,53 +1,162 @@
import NewNotesButton from '@/components/NewNotesButton'
import { Button } from '@/components/ui/button'
import { getReplaceableCoordinateFromEvent, isReplaceableEvent } from '@/lib/event'
import { Event } from 'nostr-tools'
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
import { ExtendedKind } from '@/constants'
import {
getReplaceableCoordinateFromEvent,
isReplaceableEvent,
isReplyNoteEvent
} from '@/lib/event'
import { useMuteList } from '@/providers/MuteListProvider'
import { useNostr } from '@/providers/NostrProvider'
import { useUserTrust } from '@/providers/UserTrustProvider'
import client from '@/services/client.service'
import { TFeedSubRequest } from '@/types'
import dayjs from 'dayjs'
import { Event, kinds } from 'nostr-tools'
import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import PullToRefresh from 'react-simple-pull-to-refresh'
import NoteCard, { NoteCardLoadingSkeleton } from '../NoteCard'
const LIMIT = 100
const ALGO_LIMIT = 500
const KINDS = [
kinds.ShortTextNote,
kinds.Repost,
kinds.Highlights,
kinds.LongFormArticle,
ExtendedKind.COMMENT,
ExtendedKind.POLL,
ExtendedKind.VOICE,
ExtendedKind.VOICE_COMMENT,
ExtendedKind.PICTURE
]
const SHOW_COUNT = 10
const NoteList = forwardRef(
(
{
events,
hasMore,
loading,
loadMore,
newEvents = [],
showNewEvents,
onRefresh,
filterMutedNotes
subRequests,
filterMutedNotes = true,
hideReplies = false,
hideUntrustedNotes = false,
areAlgoRelays = false
}: {
events: Event[]
hasMore: boolean
loading: boolean
loadMore?: () => void
newEvents?: Event[]
showNewEvents?: () => void
onRefresh?: () => void
subRequests: TFeedSubRequest[]
filterMutedNotes?: boolean
hideReplies?: boolean
hideUntrustedNotes?: boolean
areAlgoRelays?: boolean
},
ref
) => {
const { t } = useTranslation()
const { startLogin } = useNostr()
const { isUserTrusted } = useUserTrust()
const { mutePubkeys } = useMuteList()
const [events, setEvents] = useState<Event[]>([])
const [newEvents, setNewEvents] = useState<Event[]>([])
const [hasMore, setHasMore] = useState<boolean>(true)
const [loading, setLoading] = useState(true)
const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
const [refreshCount, setRefreshCount] = useState(0)
const [showCount, setShowCount] = useState(SHOW_COUNT)
const bottomRef = useRef<HTMLDivElement | null>(null)
const topRef = useRef<HTMLDivElement | null>(null)
useImperativeHandle(
ref,
() => ({
scrollToTop: () => {
topRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
}),
[]
)
const filteredEvents = useMemo(() => {
const idSet = new Set<string>()
const idSet = new Set<string>()
return events.slice(0, showCount).filter((evt) => {
if (hideReplies && isReplyNoteEvent(evt)) return false
if (hideUntrustedNotes && !isUserTrusted(evt.pubkey)) return false
const id = isReplaceableEvent(evt.kind) ? getReplaceableCoordinateFromEvent(evt) : evt.id
if (idSet.has(id)) {
return false
}
idSet.add(id)
return true
})
}, [events, hideReplies, hideUntrustedNotes, showCount])
const filteredNewEvents = useMemo(() => {
const idSet = new Set<string>()
return newEvents.filter((event: Event) => {
if (hideReplies && isReplyNoteEvent(event)) return false
if (hideUntrustedNotes && !isUserTrusted(event.pubkey)) return false
if (filterMutedNotes && mutePubkeys.includes(event.pubkey)) return false
const id = isReplaceableEvent(event.kind)
? getReplaceableCoordinateFromEvent(event)
: event.id
if (idSet.has(id)) {
return false
}
idSet.add(id)
return true
})
}, [newEvents, hideReplies, hideUntrustedNotes, filterMutedNotes, mutePubkeys])
const scrollToTop = () => {
topRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
useImperativeHandle(ref, () => ({ scrollToTop }), [])
useEffect(() => {
if (!subRequests.length) return
async function init() {
setLoading(true)
setEvents([])
setNewEvents([])
setHasMore(true)
const { closer, timelineKey } = await client.subscribeTimeline(
subRequests.map(({ urls, filter }) => ({
urls,
filter: {
...filter,
kinds: KINDS,
limit: areAlgoRelays ? ALGO_LIMIT : LIMIT
}
})),
{
onEvents: (events, eosed) => {
if (events.length > 0) {
setEvents(events)
}
if (areAlgoRelays) {
setHasMore(false)
}
if (eosed) {
setLoading(false)
setHasMore(events.length > 0)
}
},
onNew: (event) => {
setNewEvents((oldEvents) =>
[event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
)
}
},
{
startLogin,
needSort: !areAlgoRelays
}
)
setTimelineKey(timelineKey)
return closer
}
const promise = init()
return () => {
promise.then((closer) => closer())
}
}, [JSON.stringify(subRequests), refreshCount])
useEffect(() => {
const options = {
@@ -56,22 +165,33 @@ const NoteList = forwardRef(
threshold: 0.1
}
const _loadMore = async () => {
const loadMore = async () => {
if (showCount < events.length) {
setShowCount((prev) => prev + SHOW_COUNT)
// preload more
if (events.length - showCount > 2 * SHOW_COUNT) {
if (events.length - showCount > SHOW_COUNT * 5) {
return
}
}
if (loading || !hasMore) return
loadMore?.()
if (!timelineKey || loading || !hasMore) return
setLoading(true)
const newEvents = await client.loadMoreTimeline(
timelineKey,
events.length ? events[events.length - 1].created_at - 1 : dayjs().unix(),
LIMIT
)
setLoading(false)
if (newEvents.length === 0) {
setHasMore(false)
return
}
setEvents((oldEvents) => [...oldEvents, ...newEvents])
}
const observerInstance = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && hasMore) {
_loadMore()
loadMore()
}
}, options)
@@ -86,39 +206,38 @@ const NoteList = forwardRef(
observerInstance.unobserve(currentBottomRef)
}
}
}, [loading, hasMore, events, loadMore])
}, [loading, hasMore, events, showCount, timelineKey])
const showNewEvents = () => {
setEvents((oldEvents) => [...newEvents, ...oldEvents])
setNewEvents([])
setTimeout(() => {
scrollToTop()
}, 0)
}
return (
<div>
{newEvents.length > 0 && <NewNotesButton newEvents={newEvents} onClick={showNewEvents} />}
{filteredNewEvents.length > 0 && (
<NewNotesButton newEvents={filteredNewEvents} onClick={showNewEvents} />
)}
<div ref={topRef} className="scroll-mt-24" />
<PullToRefresh
onRefresh={async () => {
onRefresh?.()
setRefreshCount((count) => count + 1)
await new Promise((resolve) => setTimeout(resolve, 1000))
}}
pullingContent=""
>
<div className="min-h-screen">
{events.slice(0, showCount).map((event) => {
const id = isReplaceableEvent(event.kind)
? getReplaceableCoordinateFromEvent(event)
: event.id
if (idSet.has(id)) {
return null
}
idSet.add(id)
return (
<NoteCard
key={event.id}
className="w-full"
event={event}
filterMutedNotes={filterMutedNotes}
/>
)
})}
{filteredEvents.map((event) => (
<NoteCard
key={event.id}
className="w-full"
event={event}
filterMutedNotes={filterMutedNotes}
/>
))}
{hasMore || loading ? (
<div ref={bottomRef}>
<NoteCardLoadingSkeleton />
@@ -129,7 +248,7 @@ const NoteList = forwardRef(
</div>
) : (
<div className="flex justify-center w-full mt-2">
<Button size="lg" onClick={onRefresh}>
<Button size="lg" onClick={() => setRefreshCount((count) => count + 1)}>
{t('reload notes')}
</Button>
</div>

View File

@@ -2,13 +2,13 @@ import NormalFeed from '@/components/NormalFeed'
import { useFeed } from '@/providers/FeedProvider'
import { useNostr } from '@/providers/NostrProvider'
import client from '@/services/client.service'
import { TNormalFeedSubRequest } from '@/types'
import { TFeedSubRequest } from '@/types'
import { useEffect, useState } from 'react'
export default function FollowingFeed() {
const { pubkey } = useNostr()
const { feedInfo } = useFeed()
const [subRequests, setSubRequests] = useState<TNormalFeedSubRequest[]>([])
const [subRequests, setSubRequests] = useState<TFeedSubRequest[]>([])
useEffect(() => {
async function init() {
@@ -24,5 +24,5 @@ export default function FollowingFeed() {
init()
}, [feedInfo.feedType, pubkey])
return <NormalFeed subRequests={subRequests} />
return <NormalFeed subRequests={subRequests} isMainFeed />
}

View File

@@ -31,6 +31,10 @@ export default function RelaysFeed() {
}
return (
<NormalFeed subRequests={[{ urls: relayUrls, filter: {} }]} areAlgoRelays={areAlgoRelays} />
<NormalFeed
subRequests={[{ urls: relayUrls, filter: {} }]}
areAlgoRelays={areAlgoRelays}
isMainFeed
/>
)
}

View File

@@ -8,7 +8,7 @@ import { fetchPubkeysFromDomain, getWellKnownNip05Url } from '@/lib/nip05'
import { useSecondaryPage } from '@/PageManager'
import { useNostr } from '@/providers/NostrProvider'
import client from '@/services/client.service'
import { TNormalFeedSubRequest } from '@/types'
import { TFeedSubRequest } from '@/types'
import { UserRound } from 'lucide-react'
import React, { forwardRef, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
@@ -29,7 +29,7 @@ const NoteListPage = forwardRef(({ index }: { index?: number }, ref) => {
}
| null
>(null)
const [subRequests, setSubRequests] = useState<TNormalFeedSubRequest[]>([])
const [subRequests, setSubRequests] = useState<TFeedSubRequest[]>([])
useEffect(() => {
const init = async () => {
@@ -94,6 +94,8 @@ const NoteListPage = forwardRef(({ index }: { index?: number }, ref) => {
{pubkeys.length.toLocaleString()} <UserRound />
</Button>
)
} else {
setSubRequests([])
}
return
}
@@ -102,7 +104,7 @@ const NoteListPage = forwardRef(({ index }: { index?: number }, ref) => {
}, [])
let content: React.ReactNode = null
if (data?.type === 'domain' && setSubRequests.length === 0) {
if (data?.type === 'domain' && subRequests.length === 0) {
content = (
<div className="text-center w-full py-10">
<span className="text-muted-foreground">

View File

@@ -0,0 +1,99 @@
import NoteList, { TNoteListRef } from '@/components/NoteList'
import Tabs from '@/components/Tabs'
import { BIG_RELAY_URLS } from '@/constants'
import { useNostr } from '@/providers/NostrProvider'
import client from '@/services/client.service'
import storage from '@/services/local-storage.service'
import { TFeedSubRequest, TNoteListMode } from '@/types'
import { useEffect, useMemo, useRef, useState } from 'react'
export default function ProfileFeed({
pubkey,
topSpace = 0
}: {
pubkey: string
topSpace?: number
}) {
const { pubkey: myPubkey } = useNostr()
const [listMode, setListMode] = useState<TNoteListMode>(() => storage.getNoteListMode())
const noteListRef = useRef<TNoteListRef>(null)
const [subRequests, setSubRequests] = useState<TFeedSubRequest[]>([])
const tabs = useMemo(() => {
const _tabs = [
{ value: 'posts', label: 'Notes' },
{ value: 'postsAndReplies', label: 'Replies' }
]
if (myPubkey && myPubkey !== pubkey) {
_tabs.push({ value: 'you', label: 'YouTabName' })
}
return _tabs
}, [myPubkey, pubkey])
useEffect(() => {
const init = async () => {
if (listMode === 'you') {
if (!myPubkey) {
setSubRequests([])
return
}
const [relayList, myRelayList] = await Promise.all([
client.fetchRelayList(pubkey),
client.fetchRelayList(myPubkey)
])
setSubRequests([
{
urls: myRelayList.write.concat(BIG_RELAY_URLS).slice(0, 5),
filter: {
authors: [myPubkey],
'#p': [pubkey]
}
},
{
urls: relayList.write.concat(BIG_RELAY_URLS).slice(0, 5),
filter: {
authors: [pubkey],
'#p': [myPubkey]
}
}
])
return
}
const relayList = await client.fetchRelayList(pubkey)
setSubRequests([
{
urls: relayList.write.concat(BIG_RELAY_URLS).slice(0, 8),
filter: {
authors: [pubkey]
}
}
])
}
init()
}, [pubkey, listMode])
const handleListModeChange = (mode: TNoteListMode) => {
setListMode(mode)
setTimeout(() => {
noteListRef.current?.scrollToTop()
}, 0)
}
return (
<>
<Tabs
value={listMode}
tabs={tabs}
onTabChange={(listMode) => {
handleListModeChange(listMode as TNoteListMode)
}}
threshold={Math.max(800, topSpace)}
/>
<NoteList ref={noteListRef} subRequests={subRequests} hideReplies={listMode === 'posts'} />
</>
)
}

View File

@@ -1,13 +1,12 @@
import Collapsible from '@/components/Collapsible'
import FollowButton from '@/components/FollowButton'
import Nip05 from '@/components/Nip05'
import Feed from '@/components/Feed'
import NpubQrCode from '@/components/NpubQrCode'
import ProfileAbout from '@/components/ProfileAbout'
import ProfileBanner from '@/components/ProfileBanner'
import ProfileOptions from '@/components/ProfileOptions'
import ProfileZapButton from '@/components/ProfileZapButton'
import PubkeyCopy from '@/components/PubkeyCopy'
import NpubQrCode from '@/components/NpubQrCode'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
@@ -25,6 +24,7 @@ import { useTranslation } from 'react-i18next'
import NotFoundPage from '../NotFoundPage'
import FollowedBy from './FollowedBy'
import Followings from './Followings'
import ProfileFeed from './ProfileFeed'
import Relays from './Relays'
const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref) => {
@@ -193,13 +193,7 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
</div>
</div>
</div>
<Feed
author={pubkey}
className="mt-2"
filterMutedNotes={false}
topSpace={topContainerHeight + 100}
skipTrustCheck
/>
<ProfileFeed pubkey={pubkey} topSpace={topContainerHeight + 100} />
</SecondaryPageLayout>
)
})

View File

@@ -10,7 +10,7 @@ import { getProfileFromEvent, getRelayListFromEvent } from '@/lib/event-metadata
import { formatPubkey, pubkeyToNpub, userIdToPubkey } from '@/lib/pubkey'
import { getPubkeysFromPTags, getServersFromServerTags } from '@/lib/tag'
import { isLocalNetworkUrl, isWebsocketUrl, normalizeUrl } from '@/lib/url'
import { ISigner, TProfile, TRelayList } from '@/types'
import { ISigner, TProfile, TRelayList, TSubRequestFilter } from '@/types'
import { sha256 } from '@noble/hashes/sha2'
import DataLoader from 'dataloader'
import dayjs from 'dayjs'
@@ -43,7 +43,7 @@ class ClientService extends EventTarget {
string,
| {
refs: TTimelineRef[]
filter: Omit<Filter, 'since' | 'until'> & { limit: number }
filter: TSubRequestFilter
urls: string[]
}
| string[]
@@ -178,7 +178,7 @@ class ClientService extends EventTarget {
}
async subscribeTimeline(
subRequests: { urls: string[]; filter: Omit<Filter, 'since' | 'until'> & { limit: number } }[],
subRequests: { urls: string[]; filter: TSubRequestFilter }[],
{
onEvents,
onNew
@@ -407,7 +407,7 @@ class ClientService extends EventTarget {
private async _subscribeTimeline(
urls: string[],
filter: Omit<Filter, 'since' | 'until'> & { limit: number }, // filter with limit,
filter: TSubRequestFilter, // filter with limit,
{
onEvents,
onNew

View File

@@ -1,12 +1,9 @@
import { Event, VerifiedEvent, Filter } from 'nostr-tools'
import { POLL_TYPE } from './constants'
export type TSubRequest = {
urls: string[]
filter: Omit<Filter, 'since' | 'until'> & { limit: number }
}
export type TSubRequestFilter = Omit<Filter, 'since' | 'until'> & { limit: number }
export type TNormalFeedSubRequest = {
export type TFeedSubRequest = {
urls: string[]
filter: Omit<Filter, 'since' | 'until' | 'kinds'>
}