48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { useInfiniteScroll } from '@/hooks'
|
|
import fayan from '@/services/fayan.service'
|
|
import { useCallback, useEffect, useState } from 'react'
|
|
import UserItem, { UserItemSkeleton } from '../UserItem'
|
|
|
|
const LIMIT = 50
|
|
const SHOW_COUNT = 20
|
|
|
|
export function ProfileListBySearch({ search }: { search: string }) {
|
|
const [pubkeys, setPubkeys] = useState<string[]>([])
|
|
|
|
useEffect(() => {
|
|
setPubkeys([])
|
|
}, [search])
|
|
|
|
const handleLoadMore = useCallback(async () => {
|
|
const profiles = await fayan.searchUsers(search, LIMIT, pubkeys.length)
|
|
if (profiles.length === 0) {
|
|
return false
|
|
}
|
|
const pubkeySet = new Set(pubkeys)
|
|
const newPubkeys = [...pubkeys]
|
|
profiles.forEach((profile) => {
|
|
if (!pubkeySet.has(profile.pubkey)) {
|
|
pubkeySet.add(profile.pubkey)
|
|
newPubkeys.push(profile.pubkey)
|
|
}
|
|
})
|
|
setPubkeys(newPubkeys)
|
|
return profiles.length >= LIMIT
|
|
}, [search, pubkeys])
|
|
|
|
const { visibleItems, shouldShowLoadingIndicator, bottomRef } = useInfiniteScroll({
|
|
items: pubkeys,
|
|
showCount: SHOW_COUNT,
|
|
onLoadMore: handleLoadMore
|
|
})
|
|
|
|
return (
|
|
<div className="px-4">
|
|
{visibleItems.map((pubkey, index) => (
|
|
<UserItem key={`${index}-${pubkey}`} userId={pubkey} />
|
|
))}
|
|
<div ref={bottomRef} />
|
|
{shouldShowLoadingIndicator && <UserItemSkeleton />}
|
|
</div>
|
|
)
|
|
}
|