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