Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
yoginth.com
1import { ChatBubbleBottomCenterIcon } from "@heroicons/react/24/outline";
2import { PageSize, type PostsRequest, usePostsQuery } from "@hey/indexer";
3import { useCallback } from "react";
4import SinglePost from "@/components/Post/SinglePost";
5import PostFeed from "@/components/Shared/Post/PostFeed";
6
7interface PostsProps {
8 query: string;
9}
10
11const Posts = ({ query }: PostsProps) => {
12 const request: PostsRequest = {
13 filter: { searchQuery: query },
14 pageSize: PageSize.Fifty
15 };
16
17 const { data, error, fetchMore, loading } = usePostsQuery({
18 variables: { request }
19 });
20
21 const posts = data?.posts?.items;
22 const pageInfo = data?.posts?.pageInfo;
23 const hasMore = pageInfo?.next;
24
25 const handleEndReached = useCallback(async () => {
26 if (hasMore) {
27 await fetchMore({
28 variables: { request: { ...request, cursor: pageInfo?.next } }
29 });
30 }
31 }, [fetchMore, hasMore, pageInfo?.next, request]);
32
33 return (
34 <PostFeed
35 emptyIcon={<ChatBubbleBottomCenterIcon className="size-8" />}
36 emptyMessage={
37 <span>
38 No posts for <b>“{query}”</b>
39 </span>
40 }
41 error={error}
42 errorTitle="Failed to load posts"
43 handleEndReached={handleEndReached}
44 hasMore={hasMore}
45 items={posts ?? []}
46 loading={loading}
47 renderItem={(post) => <SinglePost key={post.id} post={post} />}
48 />
49 );
50};
51
52export default Posts;