yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { ChatBubbleLeftIcon } from "@heroicons/react/24/outline";
2import {
3 PageSize,
4 type PostReferencesRequest,
5 PostReferenceType,
6 PostVisibilityFilter,
7 type ReferencedPostFragment,
8 ReferenceRelevancyFilter,
9 usePostReferencesQuery
10} from "@hey/indexer";
11import { useCallback } from "react";
12import { useHiddenCommentFeedStore } from "@/components/Post";
13import SinglePost from "@/components/Post/SinglePost";
14import PostFeed from "@/components/Shared/Post/PostFeed";
15
16interface CommentFeedProps {
17 postId: string;
18}
19
20const CommentFeed = ({ postId }: CommentFeedProps) => {
21 const { showHiddenComments } = useHiddenCommentFeedStore();
22
23 const request: PostReferencesRequest = {
24 pageSize: PageSize.Fifty,
25 referencedPost: postId,
26 referenceTypes: [PostReferenceType.CommentOn],
27 relevancyFilter: ReferenceRelevancyFilter.Relevant,
28 visibilityFilter: showHiddenComments
29 ? PostVisibilityFilter.Hidden
30 : PostVisibilityFilter.Visible
31 };
32
33 const { data, error, fetchMore, loading } = usePostReferencesQuery({
34 skip: !postId,
35 variables: { request }
36 });
37
38 const comments =
39 (data?.postReferences?.items as ReferencedPostFragment[]) ?? [];
40 const pageInfo = data?.postReferences?.pageInfo;
41 const hasMore = pageInfo?.next;
42
43 const handleEndReached = useCallback(async () => {
44 if (hasMore) {
45 await fetchMore({
46 variables: { request: { ...request, cursor: pageInfo?.next } }
47 });
48 }
49 }, [fetchMore, hasMore, pageInfo?.next, request]);
50
51 const filteredComments = comments.filter(
52 (comment) =>
53 !comment.author.operations?.hasBlockedMe &&
54 !comment.author.operations?.isBlockedByMe &&
55 !comment.operations?.hasReported &&
56 !comment.isDeleted
57 );
58
59 return (
60 <PostFeed
61 emptyIcon={<ChatBubbleLeftIcon className="size-8" />}
62 emptyMessage="Be the first one to comment!"
63 error={error}
64 errorTitle="Failed to load comment feed"
65 handleEndReached={handleEndReached}
66 hasMore={hasMore}
67 items={filteredComments}
68 loading={loading}
69 renderItem={(comment) => (
70 <SinglePost key={comment.id} post={comment} showType={false} />
71 )}
72 />
73 );
74};
75
76export default CommentFeed;