Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
yoginth.com
refactor: memoize functional components in NotificationAccountAvatar, NotificationAccountName, HiddenPost, Comment, Accounts, New, Bookmarks, Groups, and Settings for improved performance
1import { ChatBubbleLeftIcon } from "@heroicons/react/24/outline";
2import type { PostFragment } from "@hey/indexer";
3import { AnimateNumber } from "motion-plus-react";
4import { memo } from "react";
5import { useNavigate } from "react-router";
6import { Tooltip } from "@/components/Shared/UI";
7import humanize from "@/helpers/humanize";
8
9interface CommentProps {
10 post: PostFragment;
11 showCount: boolean;
12}
13
14const Comment = ({ post, showCount }: CommentProps) => {
15 const navigate = useNavigate();
16 const count = post.stats.comments;
17 const iconClassName = showCount
18 ? "w-[17px] sm:w-[20px]"
19 : "w-[15px] sm:w-[18px]";
20
21 return (
22 <div className="flex items-center space-x-1 text-gray-500 dark:text-gray-200">
23 <button
24 aria-label="Comment"
25 className="rounded-full p-1.5 outline-offset-2 hover:bg-gray-300/20"
26 onClick={() => navigate(`/posts/${post.slug}`)}
27 type="button"
28 >
29 <Tooltip
30 content={count > 0 ? `${humanize(count)} Comments` : "Comment"}
31 placement="top"
32 withDelay
33 >
34 <ChatBubbleLeftIcon className={iconClassName} />
35 </Tooltip>
36 </button>
37 {count > 0 && !showCount ? (
38 <AnimateNumber
39 className="w-3 text-[11px] sm:text-xs"
40 format={{ notation: "compact" }}
41 key={`comment-count-${post.id}`}
42 transition={{ type: "tween" }}
43 >
44 {count}
45 </AnimateNumber>
46 ) : null}
47 </div>
48 );
49};
50
51export default memo(Comment);