yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
2import { TRANSFORMS } from "@hey/data/constants";
3import getAvatar from "@hey/helpers/getAvatar";
4import {
5 PageSize,
6 type PostReferencesRequest,
7 PostReferenceType,
8 PostVisibilityFilter,
9 type ReferencedPostFragment,
10 ReferenceRelevancyFilter,
11 usePostReferencesQuery
12} from "@hey/indexer";
13import { useCallback, useState } from "react";
14import { useHiddenCommentFeedStore } from "@/components/Post";
15import SinglePost from "@/components/Post/SinglePost";
16import PostFeed from "@/components/Shared/Post/PostFeed";
17import { Card, StackedAvatars } from "@/components/Shared/UI";
18
19interface NoneRelevantFeedProps {
20 postId: string;
21}
22
23const NoneRelevantFeed = ({ postId }: NoneRelevantFeedProps) => {
24 const { showHiddenComments } = useHiddenCommentFeedStore();
25 const [showMore, setShowMore] = useState(false);
26
27 const request: PostReferencesRequest = {
28 pageSize: PageSize.Fifty,
29 referencedPost: postId,
30 referenceTypes: [PostReferenceType.CommentOn],
31 relevancyFilter: ReferenceRelevancyFilter.NotRelevant,
32 visibilityFilter: showHiddenComments
33 ? PostVisibilityFilter.Hidden
34 : PostVisibilityFilter.Visible
35 };
36
37 const { data, fetchMore } = usePostReferencesQuery({
38 skip: !postId,
39 variables: { request }
40 });
41
42 const comments =
43 (data?.postReferences?.items as ReferencedPostFragment[]) ?? [];
44 const pageInfo = data?.postReferences?.pageInfo;
45 const hasMore = pageInfo?.next;
46 const totalComments = comments?.length;
47
48 const handleEndReached = useCallback(async () => {
49 if (hasMore) {
50 await fetchMore({
51 variables: { request: { ...request, cursor: pageInfo?.next } }
52 });
53 }
54 }, [fetchMore, hasMore, pageInfo?.next, request]);
55
56 if (totalComments === 0) {
57 return null;
58 }
59
60 const filteredComments = comments.filter(
61 (comment) =>
62 !comment.author.operations?.hasBlockedMe &&
63 !comment.author.operations?.isBlockedByMe &&
64 !comment.operations?.hasReported &&
65 !comment.isDeleted
66 );
67
68 return (
69 <>
70 <Card
71 className="flex cursor-pointer items-center justify-center space-x-2.5 p-5"
72 onClick={() => setShowMore(!showMore)}
73 >
74 <StackedAvatars
75 avatars={filteredComments.map((comment) =>
76 getAvatar(comment.author, TRANSFORMS.AVATAR_TINY)
77 )}
78 limit={5}
79 />
80 <div>{showMore ? "Hide more comments" : "Show more comments"}</div>
81 {showMore ? (
82 <ChevronUpIcon className="size-4" />
83 ) : (
84 <ChevronDownIcon className="size-4" />
85 )}
86 </Card>
87 {showMore ? (
88 <PostFeed
89 emptyIcon={null}
90 emptyMessage=""
91 errorTitle="Failed to load comments"
92 handleEndReached={handleEndReached}
93 hasMore={hasMore}
94 items={filteredComments}
95 renderItem={(comment) => (
96 <SinglePost key={comment.id} post={comment} showType={false} />
97 )}
98 />
99 ) : null}
100 </>
101 );
102};
103
104export default NoneRelevantFeed;