yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { UsersIcon } from "@heroicons/react/24/outline";
2import {
3 AccountsOrderBy,
4 type AccountsRequest,
5 PageSize,
6 useAccountsQuery
7} from "@hey/indexer";
8import { useCallback } from "react";
9import { WindowVirtualizer } from "virtua";
10import SingleAccount from "@/components/Shared/Account/SingleAccount";
11import SingleAccountsShimmer from "@/components/Shared/Shimmer/SingleAccountsShimmer";
12import { Card, EmptyState, ErrorMessage } from "@/components/Shared/UI";
13import useLoadMoreOnIntersect from "@/hooks/useLoadMoreOnIntersect";
14
15interface AccountsProps {
16 query: string;
17}
18
19const Accounts = ({ query }: AccountsProps) => {
20 const request: AccountsRequest = {
21 filter: { searchBy: { localNameQuery: query } },
22 orderBy: AccountsOrderBy.BestMatch,
23 pageSize: PageSize.Fifty
24 };
25
26 const { data, error, fetchMore, loading } = useAccountsQuery({
27 skip: !query,
28 variables: { request }
29 });
30
31 const accounts = data?.accounts?.items;
32 const pageInfo = data?.accounts?.pageInfo;
33 const hasMore = pageInfo?.next;
34
35 const handleEndReached = useCallback(async () => {
36 if (hasMore) {
37 await fetchMore({
38 variables: { request: { ...request, cursor: pageInfo?.next } }
39 });
40 }
41 }, [fetchMore, hasMore, pageInfo?.next, request]);
42
43 const loadMoreRef = useLoadMoreOnIntersect(handleEndReached);
44
45 if (loading) {
46 return <SingleAccountsShimmer isBig />;
47 }
48
49 if (!accounts?.length) {
50 return (
51 <EmptyState
52 icon={<UsersIcon className="size-8" />}
53 message={
54 <span>
55 No accounts for <b>“{query}”</b>
56 </span>
57 }
58 />
59 );
60 }
61
62 if (error) {
63 return <ErrorMessage error={error} title="Failed to load accounts" />;
64 }
65
66 return (
67 <WindowVirtualizer>
68 {accounts.map((account) => (
69 <Card className="mb-5 p-5" key={account.address}>
70 <SingleAccount account={account} isBig showBio />
71 </Card>
72 ))}
73 {hasMore && <span ref={loadMoreRef} />}
74 </WindowVirtualizer>
75 );
76};
77
78export default Accounts;