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