import { UsersIcon } from "@heroicons/react/24/outline"; import { AccountsOrderBy, type AccountsRequest, PageSize, useAccountsQuery } from "@hey/indexer"; import { useCallback } from "react"; import { WindowVirtualizer } from "virtua"; import SingleAccount from "@/components/Shared/Account/SingleAccount"; import SingleAccountsShimmer from "@/components/Shared/Shimmer/SingleAccountsShimmer"; import { Card, EmptyState, ErrorMessage } from "@/components/Shared/UI"; import useLoadMoreOnIntersect from "@/hooks/useLoadMoreOnIntersect"; interface AccountsProps { query: string; } const Accounts = ({ query }: AccountsProps) => { const request: AccountsRequest = { filter: { searchBy: { localNameQuery: query } }, orderBy: AccountsOrderBy.BestMatch, pageSize: PageSize.Fifty }; const { data, error, fetchMore, loading } = useAccountsQuery({ skip: !query, variables: { request } }); const accounts = data?.accounts?.items; const pageInfo = data?.accounts?.pageInfo; const hasMore = pageInfo?.next; const handleEndReached = useCallback(async () => { if (hasMore) { await fetchMore({ variables: { request: { ...request, cursor: pageInfo?.next } } }); } }, [fetchMore, hasMore, pageInfo?.next, request]); const loadMoreRef = useLoadMoreOnIntersect(handleEndReached); if (loading) { return ; } if (!accounts?.length) { return ( } message={ No accounts for “{query}” } /> ); } if (error) { return ; } return ( {accounts.map((account) => ( ))} {hasMore && } ); }; export default Accounts;