Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
yoginth.com
refactor: memoize functional components in PostHeader, QuotedPost, FallbackAccountName, NumberedStat, and Slug for improved performance
1import { XMarkIcon } from "@heroicons/react/24/outline";
2import { isRepost } from "@hey/helpers/postHelpers";
3import type {
4 AnyPostFragment,
5 PostGroupInfoFragment,
6 TimelineItemFragment
7} from "@hey/indexer";
8import { memo } from "react";
9import PostMenu from "@/components/Post/Actions/Menu";
10import stopEventPropagation from "@/helpers/stopEventPropagation";
11import { usePostStore } from "@/store/non-persisted/post/usePostStore";
12import PostAccount from "./PostAccount";
13
14interface PostHeaderProps {
15 timelineItem?: TimelineItemFragment;
16 isNew?: boolean;
17 post: AnyPostFragment;
18 quoted?: boolean;
19}
20
21const PostHeader = ({
22 timelineItem,
23 isNew = false,
24 post,
25 quoted = false
26}: PostHeaderProps) => {
27 const { setQuotedPost } = usePostStore();
28
29 const targetPost = isRepost(post) ? post?.repostOf : post;
30 const rootPost = timelineItem ? timelineItem?.primary : targetPost;
31 const account = timelineItem ? rootPost.author : targetPost.author;
32 const timestamp = timelineItem ? rootPost.timestamp : targetPost.timestamp;
33
34 return (
35 <div
36 className="flex w-full items-start justify-between"
37 onClick={stopEventPropagation}
38 >
39 <PostAccount
40 account={account}
41 group={targetPost.feed?.group as PostGroupInfoFragment}
42 post={targetPost}
43 timestamp={timestamp}
44 />
45 {!post.isDeleted && !quoted ? (
46 <PostMenu post={targetPost} />
47 ) : (
48 <div className="size-[30px]" />
49 )}
50 {quoted && isNew ? (
51 <button
52 aria-label="Remove Quote"
53 className="rounded-full border border-gray-200 p-1.5 hover:bg-gray-300/20 dark:border-gray-700"
54 onClick={() => setQuotedPost()}
55 type="reset"
56 >
57 <XMarkIcon className="size-4 text-gray-500 dark:text-gray-200" />
58 </button>
59 ) : null}
60 </div>
61 );
62};
63
64export default memo(PostHeader);