yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { UserGroupIcon } from "@heroicons/react/24/outline";
2import {
3 TimelineEventItemType,
4 type TimelineRequest,
5 useTimelineQuery
6} from "@hey/indexer";
7import { memo, 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 Timeline = () => {
13 const { currentAccount } = useAccountStore();
14 const request: TimelineRequest = {
15 account: currentAccount?.address,
16 filter: {
17 eventType: [
18 TimelineEventItemType.Post,
19 TimelineEventItemType.Quote,
20 TimelineEventItemType.Repost
21 ]
22 }
23 };
24
25 const { data, error, fetchMore, loading } = useTimelineQuery({
26 variables: { request }
27 });
28
29 const feed = data?.timeline?.items;
30 const pageInfo = data?.timeline?.pageInfo;
31 const hasMore = pageInfo?.next;
32
33 const handleEndReached = useCallback(async () => {
34 if (hasMore) {
35 await fetchMore({
36 variables: { request: { ...request, cursor: pageInfo?.next } }
37 });
38 }
39 }, [fetchMore, hasMore, pageInfo?.next, request]);
40
41 const filteredPosts = useMemo(
42 () =>
43 (feed ?? []).filter(
44 (timelineItem) =>
45 !timelineItem.primary.author.operations?.hasBlockedMe &&
46 !timelineItem.primary.author.operations?.isBlockedByMe &&
47 !timelineItem.primary.operations?.hasReported
48 ),
49 [feed]
50 );
51
52 return (
53 <PostFeed
54 emptyIcon={<UserGroupIcon className="size-8" />}
55 emptyMessage="No posts yet!"
56 error={error}
57 errorTitle="Failed to load timeline"
58 handleEndReached={handleEndReached}
59 hasMore={hasMore}
60 items={filteredPosts}
61 loading={loading}
62 renderItem={(timelineItem) => (
63 <SinglePost
64 key={timelineItem.id}
65 post={timelineItem.primary}
66 timelineItem={timelineItem}
67 />
68 )}
69 />
70 );
71};
72
73export default memo(Timeline);