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