601 lines
18 KiB
TypeScript
601 lines
18 KiB
TypeScript
import { FormattedTimestamp } from '@/components/FormattedTimestamp'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import UserAvatar, { SimpleUserAvatar } from '@/components/UserAvatar'
|
|
import Username, { SimpleUsername } from '@/components/Username'
|
|
import { isMentioningMutedUsers } from '@/lib/event'
|
|
import { toNote, toUserAggregationDetail } from '@/lib/link'
|
|
import { cn, isTouchDevice } from '@/lib/utils'
|
|
import { useSecondaryPage } from '@/PageManager'
|
|
import { useContentPolicy } from '@/providers/ContentPolicyProvider'
|
|
import { useDeletedEvent } from '@/providers/DeletedEventProvider'
|
|
import { useMuteList } from '@/providers/MuteListProvider'
|
|
import { useNostr } from '@/providers/NostrProvider'
|
|
import { usePinnedUsers } from '@/providers/PinnedUsersProvider'
|
|
import { useReply } from '@/providers/ReplyProvider'
|
|
import { useUserTrust } from '@/providers/UserTrustProvider'
|
|
import client from '@/services/client.service'
|
|
import userAggregationService, { TUserAggregation } from '@/services/user-aggregation.service'
|
|
import { TFeedSubRequest } from '@/types'
|
|
import dayjs from 'dayjs'
|
|
import { History, Loader, Star } from 'lucide-react'
|
|
import { Event, kinds } from 'nostr-tools'
|
|
import {
|
|
forwardRef,
|
|
useCallback,
|
|
useEffect,
|
|
useImperativeHandle,
|
|
useMemo,
|
|
useRef,
|
|
useState
|
|
} from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import PullToRefresh from 'react-simple-pull-to-refresh'
|
|
import { toast } from 'sonner'
|
|
import { LoadingBar } from '../LoadingBar'
|
|
import NewNotesButton from '../NewNotesButton'
|
|
|
|
const LIMIT = 500
|
|
const SHOW_COUNT = 20
|
|
|
|
export type TUserAggregationListRef = {
|
|
scrollToTop: (behavior?: ScrollBehavior) => void
|
|
refresh: () => void
|
|
}
|
|
|
|
const UserAggregationList = forwardRef<
|
|
TUserAggregationListRef,
|
|
{
|
|
subRequests: TFeedSubRequest[]
|
|
showKinds?: number[]
|
|
filterMutedNotes?: boolean
|
|
areAlgoRelays?: boolean
|
|
showRelayCloseReason?: boolean
|
|
}
|
|
>(
|
|
(
|
|
{
|
|
subRequests,
|
|
showKinds,
|
|
filterMutedNotes = true,
|
|
areAlgoRelays = false,
|
|
showRelayCloseReason = false
|
|
},
|
|
ref
|
|
) => {
|
|
const { t } = useTranslation()
|
|
const { pubkey: currentPubkey, startLogin } = useNostr()
|
|
const { push } = useSecondaryPage()
|
|
const { hideUntrustedNotes, isUserTrusted } = useUserTrust()
|
|
const { mutePubkeySet } = useMuteList()
|
|
const { pinnedPubkeySet } = usePinnedUsers()
|
|
const { hideContentMentioningMutedUsers } = useContentPolicy()
|
|
const { isEventDeleted } = useDeletedEvent()
|
|
const { addReplies } = useReply()
|
|
const [since, setSince] = useState(() => dayjs().subtract(1, 'day').unix())
|
|
const [events, setEvents] = useState<Event[]>([])
|
|
const [newEvents, setNewEvents] = useState<Event[]>([])
|
|
const [newEventPubkeys, setNewEventPubkeys] = useState<Set<string>>(new Set())
|
|
const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
|
|
const [loading, setLoading] = useState(true)
|
|
const [showLoadingBar, setShowLoadingBar] = useState(true)
|
|
const [refreshCount, setRefreshCount] = useState(0)
|
|
const [showCount, setShowCount] = useState(SHOW_COUNT)
|
|
const [hasMore, setHasMore] = useState(true)
|
|
const supportTouch = useMemo(() => isTouchDevice(), [])
|
|
const feedId = useMemo(() => {
|
|
return userAggregationService.getFeedId(subRequests, showKinds)
|
|
}, [JSON.stringify(subRequests), JSON.stringify(showKinds)])
|
|
const bottomRef = useRef<HTMLDivElement | null>(null)
|
|
const topRef = useRef<HTMLDivElement | null>(null)
|
|
const nonPinnedTopRef = useRef<HTMLDivElement | null>(null)
|
|
|
|
const scrollToTop = (behavior: ScrollBehavior = 'instant') => {
|
|
setTimeout(() => {
|
|
topRef.current?.scrollIntoView({ behavior, block: 'start' })
|
|
}, 20)
|
|
}
|
|
|
|
const refresh = () => {
|
|
scrollToTop()
|
|
setTimeout(() => {
|
|
setRefreshCount((count) => count + 1)
|
|
}, 500)
|
|
}
|
|
|
|
useImperativeHandle(ref, () => ({ scrollToTop, refresh }), [])
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
userAggregationService.clearAggregations(feedId)
|
|
}
|
|
}, [feedId])
|
|
|
|
useEffect(() => {
|
|
if (!subRequests.length) return
|
|
|
|
setSince(dayjs().subtract(1, 'day').unix())
|
|
setHasMore(true)
|
|
|
|
async function init() {
|
|
setLoading(true)
|
|
setEvents([])
|
|
setNewEvents([])
|
|
setHasMore(true)
|
|
|
|
if (showKinds?.length === 0 && subRequests.every(({ filter }) => !filter.kinds)) {
|
|
setLoading(false)
|
|
setHasMore(false)
|
|
return () => {}
|
|
}
|
|
|
|
const preprocessedSubRequests = await Promise.all(
|
|
subRequests.map(async ({ urls, filter }) => {
|
|
const relays = urls.length ? urls : await client.determineRelaysByFilter(filter)
|
|
return {
|
|
urls: relays,
|
|
filter: {
|
|
kinds: showKinds ?? [],
|
|
...filter,
|
|
limit: LIMIT
|
|
}
|
|
}
|
|
})
|
|
)
|
|
|
|
const { closer, timelineKey } = await client.subscribeTimeline(
|
|
preprocessedSubRequests,
|
|
{
|
|
onEvents: (events, eosed) => {
|
|
if (events.length > 0) {
|
|
setEvents(events)
|
|
}
|
|
if (areAlgoRelays) {
|
|
setHasMore(false)
|
|
}
|
|
if (eosed) {
|
|
setLoading(false)
|
|
setHasMore(events.length > 0)
|
|
addReplies(events)
|
|
}
|
|
},
|
|
onNew: (event) => {
|
|
setNewEvents((oldEvents) =>
|
|
[event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
|
|
)
|
|
addReplies([event])
|
|
},
|
|
onClose: (url, reason) => {
|
|
if (!showRelayCloseReason) return
|
|
// ignore reasons from nostr-tools
|
|
if (
|
|
[
|
|
'closed by caller',
|
|
'relay connection errored',
|
|
'relay connection closed',
|
|
'pingpong timed out',
|
|
'relay connection closed by us'
|
|
].includes(reason)
|
|
) {
|
|
return
|
|
}
|
|
|
|
toast.error(`${url}: ${reason}`)
|
|
}
|
|
},
|
|
{
|
|
startLogin,
|
|
needSort: !areAlgoRelays
|
|
}
|
|
)
|
|
setTimelineKey(timelineKey)
|
|
|
|
return closer
|
|
}
|
|
|
|
const promise = init()
|
|
return () => {
|
|
promise.then((closer) => closer())
|
|
}
|
|
}, [feedId, refreshCount])
|
|
|
|
useEffect(() => {
|
|
if (loading || !hasMore || !timelineKey || !events.length) {
|
|
return
|
|
}
|
|
|
|
const until = events[events.length - 1].created_at - 1
|
|
if (until < since) {
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
client.loadMoreTimeline(timelineKey, until, LIMIT).then((moreEvents) => {
|
|
if (moreEvents.length === 0) {
|
|
setHasMore(false)
|
|
setLoading(false)
|
|
return
|
|
}
|
|
setEvents((oldEvents) => [...oldEvents, ...moreEvents])
|
|
setLoading(false)
|
|
})
|
|
}, [loading, timelineKey, events, since, hasMore])
|
|
|
|
useEffect(() => {
|
|
if (loading) {
|
|
setShowLoadingBar(true)
|
|
return
|
|
}
|
|
|
|
const timeout = setTimeout(() => {
|
|
setShowLoadingBar(false)
|
|
}, 1000)
|
|
|
|
return () => clearTimeout(timeout)
|
|
}, [loading])
|
|
|
|
const shouldHideEvent = useCallback(
|
|
(evt: Event) => {
|
|
if (evt.pubkey === currentPubkey) return true
|
|
if (isEventDeleted(evt)) return true
|
|
if (hideUntrustedNotes && !isUserTrusted(evt.pubkey)) return true
|
|
if (filterMutedNotes && mutePubkeySet.has(evt.pubkey)) return true
|
|
if (
|
|
filterMutedNotes &&
|
|
hideContentMentioningMutedUsers &&
|
|
isMentioningMutedUsers(evt, mutePubkeySet)
|
|
) {
|
|
return true
|
|
}
|
|
|
|
return false
|
|
},
|
|
[
|
|
hideUntrustedNotes,
|
|
mutePubkeySet,
|
|
isEventDeleted,
|
|
currentPubkey,
|
|
filterMutedNotes,
|
|
isUserTrusted,
|
|
hideContentMentioningMutedUsers,
|
|
isMentioningMutedUsers
|
|
]
|
|
)
|
|
|
|
const lastXDays = useMemo(() => {
|
|
return dayjs().diff(dayjs.unix(since), 'day')
|
|
}, [since])
|
|
|
|
const filteredEvents = useMemo(() => {
|
|
return events.filter((evt) => evt.created_at >= since && !shouldHideEvent(evt))
|
|
}, [events, since, shouldHideEvent])
|
|
|
|
const filteredNewEvents = useMemo(() => {
|
|
return newEvents.filter((evt) => evt.created_at >= since && !shouldHideEvent(evt))
|
|
}, [newEvents, since, shouldHideEvent])
|
|
|
|
const aggregations = useMemo(() => {
|
|
const aggs = userAggregationService.aggregateByUser(filteredEvents)
|
|
userAggregationService.saveAggregations(feedId, aggs)
|
|
return aggs
|
|
}, [feedId, filteredEvents])
|
|
|
|
const pinnedAggregations = useMemo(() => {
|
|
return aggregations.filter((agg) => pinnedPubkeySet.has(agg.pubkey))
|
|
}, [aggregations, pinnedPubkeySet])
|
|
|
|
const normalAggregations = useMemo(() => {
|
|
return aggregations.filter((agg) => !pinnedPubkeySet.has(agg.pubkey))
|
|
}, [aggregations, pinnedPubkeySet])
|
|
|
|
const displayedNormalAggregations = useMemo(() => {
|
|
return normalAggregations.slice(0, showCount)
|
|
}, [normalAggregations, showCount])
|
|
|
|
const hasMoreToDisplay = useMemo(() => {
|
|
return normalAggregations.length > displayedNormalAggregations.length
|
|
}, [normalAggregations, displayedNormalAggregations])
|
|
|
|
useEffect(() => {
|
|
const options = {
|
|
root: null,
|
|
rootMargin: '10px',
|
|
threshold: 1
|
|
}
|
|
if (!hasMoreToDisplay) return
|
|
|
|
const observerInstance = new IntersectionObserver((entries) => {
|
|
if (entries[0].isIntersecting) {
|
|
setShowCount((count) => count + SHOW_COUNT)
|
|
}
|
|
}, options)
|
|
|
|
const currentBottomRef = bottomRef.current
|
|
if (currentBottomRef) {
|
|
observerInstance.observe(currentBottomRef)
|
|
}
|
|
|
|
return () => {
|
|
if (observerInstance && currentBottomRef) {
|
|
observerInstance.unobserve(currentBottomRef)
|
|
}
|
|
}
|
|
}, [hasMoreToDisplay])
|
|
|
|
const handleViewUser = (agg: TUserAggregation) => {
|
|
// Mark as viewed when user clicks
|
|
userAggregationService.markAsViewed(feedId, agg.pubkey)
|
|
setNewEventPubkeys((prev) => {
|
|
const newSet = new Set(prev)
|
|
newSet.delete(agg.pubkey)
|
|
return newSet
|
|
})
|
|
|
|
if (agg.count === 1) {
|
|
const evt = agg.events[0]
|
|
if (evt.kind !== kinds.Repost && evt.kind !== kinds.GenericRepost) {
|
|
push(toNote(agg.events[0]))
|
|
return
|
|
}
|
|
}
|
|
|
|
push(toUserAggregationDetail(feedId, agg.pubkey))
|
|
}
|
|
|
|
const handleLoadEarlier = () => {
|
|
setSince((prevSince) => dayjs.unix(prevSince).subtract(1, 'day').unix())
|
|
setShowCount(SHOW_COUNT)
|
|
}
|
|
|
|
const showNewEvents = () => {
|
|
const pubkeySet = new Set<string>()
|
|
let hasPinnedUser = false
|
|
newEvents.forEach((evt) => {
|
|
pubkeySet.add(evt.pubkey)
|
|
if (pinnedPubkeySet.has(evt.pubkey)) {
|
|
hasPinnedUser = true
|
|
}
|
|
})
|
|
setNewEventPubkeys(pubkeySet)
|
|
setEvents((oldEvents) => [...newEvents, ...oldEvents])
|
|
setNewEvents([])
|
|
setTimeout(() => {
|
|
if (hasPinnedUser) {
|
|
scrollToTop('smooth')
|
|
return
|
|
}
|
|
nonPinnedTopRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
|
}, 0)
|
|
}
|
|
|
|
const list = (
|
|
<div className="min-h-screen">
|
|
{pinnedAggregations.map((agg) => (
|
|
<UserAggregationItem
|
|
key={agg.pubkey}
|
|
feedId={feedId}
|
|
aggregation={agg}
|
|
onClick={() => handleViewUser(agg)}
|
|
isNew={newEventPubkeys.has(agg.pubkey)}
|
|
/>
|
|
))}
|
|
|
|
<div ref={nonPinnedTopRef} className="scroll-mt-[calc(6rem+1px)]" />
|
|
{normalAggregations.map((agg) => (
|
|
<UserAggregationItem
|
|
key={agg.pubkey}
|
|
feedId={feedId}
|
|
aggregation={agg}
|
|
onClick={() => handleViewUser(agg)}
|
|
isNew={newEventPubkeys.has(agg.pubkey)}
|
|
/>
|
|
))}
|
|
|
|
{loading || hasMoreToDisplay ? (
|
|
<div ref={bottomRef}>
|
|
<UserAggregationItemSkeleton />
|
|
</div>
|
|
) : aggregations.length === 0 ? (
|
|
<div className="flex justify-center w-full mt-2">
|
|
<Button size="lg" onClick={() => setRefreshCount((count) => count + 1)}>
|
|
{t('Reload')}
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="text-center text-sm text-muted-foreground mt-2">{t('no more notes')}</div>
|
|
)}
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<div>
|
|
<div ref={topRef} className="scroll-mt-[calc(6rem+1px)]" />
|
|
{showLoadingBar && <LoadingBar />}
|
|
<div className="border-b h-12 pl-4 pr-1 flex items-center justify-between gap-2">
|
|
<div className="text-sm text-muted-foreground flex items-center gap-1.5 min-w-0">
|
|
<span className="font-medium text-foreground">
|
|
{lastXDays === 1
|
|
? t('Last 24 hours')
|
|
: t('Last {{count}} days', { count: lastXDays })}
|
|
</span>
|
|
·
|
|
<span>
|
|
{filteredEvents.length} {t('notes')}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
className="h-10 px-3 shrink-0 rounded-lg text-muted-foreground hover:text-foreground"
|
|
disabled={showLoadingBar || !hasMore}
|
|
onClick={handleLoadEarlier}
|
|
>
|
|
{showLoadingBar ? <Loader className="animate-spin" /> : <History />}
|
|
{t('Load earlier')}
|
|
</Button>
|
|
</div>
|
|
{supportTouch ? (
|
|
<PullToRefresh
|
|
onRefresh={async () => {
|
|
refresh()
|
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
|
}}
|
|
pullingContent=""
|
|
>
|
|
{list}
|
|
</PullToRefresh>
|
|
) : (
|
|
list
|
|
)}
|
|
<div className="h-20" />
|
|
{filteredNewEvents.length > 0 && (
|
|
<NewNotesButton newEvents={filteredNewEvents} onClick={showNewEvents} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
UserAggregationList.displayName = 'UserAggregationList'
|
|
export default UserAggregationList
|
|
|
|
function UserAggregationItem({
|
|
feedId,
|
|
aggregation,
|
|
onClick,
|
|
isNew
|
|
}: {
|
|
feedId: string
|
|
aggregation: TUserAggregation
|
|
onClick: () => void
|
|
isNew?: boolean
|
|
}) {
|
|
const { t } = useTranslation()
|
|
const supportTouch = useMemo(() => isTouchDevice(), [])
|
|
const [hasNewEvents, setHasNewEvents] = useState(true)
|
|
const [loading, setLoading] = useState(false)
|
|
const { isPinned, togglePin } = usePinnedUsers()
|
|
const pinned = useMemo(() => isPinned(aggregation.pubkey), [aggregation.pubkey, isPinned])
|
|
|
|
useEffect(() => {
|
|
const update = () => {
|
|
const lastViewedTime = userAggregationService.getLastViewedTime(feedId, aggregation.pubkey)
|
|
setHasNewEvents(aggregation.lastEventTime > lastViewedTime)
|
|
}
|
|
|
|
const unSub = userAggregationService.subscribeViewedTimeChange(
|
|
feedId,
|
|
aggregation.pubkey,
|
|
() => {
|
|
update()
|
|
}
|
|
)
|
|
|
|
update()
|
|
|
|
return unSub
|
|
}, [feedId, aggregation])
|
|
|
|
const onTogglePin = (e: React.MouseEvent) => {
|
|
e.stopPropagation()
|
|
setLoading(true)
|
|
togglePin(aggregation.pubkey).finally(() => {
|
|
setLoading(false)
|
|
})
|
|
}
|
|
|
|
const onToggleViewed = (e: React.MouseEvent) => {
|
|
e.stopPropagation()
|
|
if (hasNewEvents) {
|
|
userAggregationService.markAsViewed(feedId, aggregation.pubkey)
|
|
} else {
|
|
userAggregationService.markAsUnviewed(feedId, aggregation.pubkey)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'group relative flex items-center gap-4 px-4 py-3 border-b hover:bg-accent/30 cursor-pointer transition-all duration-200',
|
|
isNew && 'bg-primary/15 hover:bg-primary/20'
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
{supportTouch ? (
|
|
<SimpleUserAvatar
|
|
userId={aggregation.pubkey}
|
|
className={!hasNewEvents ? 'grayscale' : ''}
|
|
/>
|
|
) : (
|
|
<UserAvatar userId={aggregation.pubkey} className={!hasNewEvents ? 'grayscale' : ''} />
|
|
)}
|
|
|
|
<div className="flex-1 min-w-0 flex flex-col">
|
|
{supportTouch ? (
|
|
<SimpleUsername
|
|
userId={aggregation.pubkey}
|
|
className={cn(
|
|
'font-semibold text-base truncate max-w-fit',
|
|
!hasNewEvents && 'text-muted-foreground'
|
|
)}
|
|
skeletonClassName="h-4"
|
|
/>
|
|
) : (
|
|
<Username
|
|
userId={aggregation.pubkey}
|
|
className={cn(
|
|
'font-semibold text-base truncate max-w-fit',
|
|
!hasNewEvents && 'text-muted-foreground'
|
|
)}
|
|
skeletonClassName="h-4"
|
|
/>
|
|
)}
|
|
<FormattedTimestamp
|
|
timestamp={aggregation.lastEventTime}
|
|
className="text-sm text-muted-foreground"
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onTogglePin}
|
|
className={`flex-shrink-0 ${
|
|
pinned
|
|
? 'text-primary hover:text-primary/80'
|
|
: 'text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
title={pinned ? t('Unfollow Special') : t('Special Follow')}
|
|
>
|
|
{loading ? (
|
|
<Loader className="animate-spin" />
|
|
) : (
|
|
<Star className={pinned ? 'fill-primary stroke-primary' : ''} />
|
|
)}
|
|
</Button>
|
|
|
|
<button
|
|
className={cn(
|
|
'flex-shrink-0 size-10 rounded-full font-bold tabular-nums text-primary border border-primary/80 bg-primary/10 hover:border-primary hover:bg-primary/20 flex flex-col items-center justify-center transition-colors',
|
|
!hasNewEvents &&
|
|
'border-muted-foreground/80 text-muted-foreground/80 bg-muted-foreground/10 hover:border-muted-foreground hover:text-muted-foreground hover:bg-muted-foreground/20'
|
|
)}
|
|
onClick={onToggleViewed}
|
|
>
|
|
{aggregation.count > 99 ? '99+' : aggregation.count}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function UserAggregationItemSkeleton() {
|
|
return (
|
|
<div className="flex items-center gap-4 px-4 py-3">
|
|
<Skeleton className="size-10 rounded-full" />
|
|
<div className="flex-1">
|
|
<Skeleton className="h-4 w-36 my-1" />
|
|
<Skeleton className="h-3 w-14 my-1" />
|
|
</div>
|
|
<Skeleton className="size-10 rounded-full" />
|
|
</div>
|
|
)
|
|
}
|