64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import UserItem from '@/components/UserItem'
|
|
import { useFetchFollowings, useFetchProfile } from '@/hooks'
|
|
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
export default function FollowingListPage({ id, index }: { id?: string; index?: number }) {
|
|
const { t } = useTranslation()
|
|
const { profile } = useFetchProfile(id)
|
|
const { followings } = useFetchFollowings(profile?.pubkey)
|
|
const [visibleFollowings, setVisibleFollowings] = useState<string[]>([])
|
|
const bottomRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
setVisibleFollowings(followings.slice(0, 10))
|
|
}, [followings])
|
|
|
|
useEffect(() => {
|
|
const options = {
|
|
root: null,
|
|
rootMargin: '10px',
|
|
threshold: 1
|
|
}
|
|
|
|
const observerInstance = new IntersectionObserver((entries) => {
|
|
if (entries[0].isIntersecting && followings.length > visibleFollowings.length) {
|
|
setVisibleFollowings((prev) => [
|
|
...prev,
|
|
...followings.slice(prev.length, prev.length + 10)
|
|
])
|
|
}
|
|
}, options)
|
|
|
|
const currentBottomRef = bottomRef.current
|
|
if (currentBottomRef) {
|
|
observerInstance.observe(currentBottomRef)
|
|
}
|
|
|
|
return () => {
|
|
if (observerInstance && currentBottomRef) {
|
|
observerInstance.unobserve(currentBottomRef)
|
|
}
|
|
}
|
|
}, [visibleFollowings, followings])
|
|
|
|
return (
|
|
<SecondaryPageLayout
|
|
index={index}
|
|
titlebarContent={
|
|
profile?.username
|
|
? t("username's following", { username: profile.username })
|
|
: t('Following')
|
|
}
|
|
displayScrollToTopButton
|
|
>
|
|
<div className="space-y-2 px-4">
|
|
{visibleFollowings.map((pubkey, index) => (
|
|
<UserItem key={`${index}-${pubkey}`} pubkey={pubkey} />
|
|
))}
|
|
{followings.length > visibleFollowings.length && <div ref={bottomRef} />}
|
|
</div>
|
|
</SecondaryPageLayout>
|
|
)
|
|
}
|