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 { CheckBadgeIcon } from "@heroicons/react/24/solid";
2import getAccount from "@hey/helpers/getAccount";
3import getAvatar from "@hey/helpers/getAvatar";
4import type { AccountFragment } from "@hey/indexer";
5import { memo } from "react";
6import AccountLink from "@/components/Shared/Account/AccountLink";
7import AccountPreview from "@/components/Shared/Account/AccountPreview";
8import { Image } from "@/components/Shared/UI";
9import stopEventPropagation from "@/helpers/stopEventPropagation";
10
11interface NotificationAccountProps {
12 account: AccountFragment;
13}
14
15export const NotificationAccountAvatar = memo(
16 ({ account }: NotificationAccountProps) => {
17 return (
18 <AccountPreview
19 address={account.address}
20 username={account.username?.localName}
21 >
22 <AccountLink
23 account={account}
24 className="rounded-full outline-offset-2"
25 onClick={stopEventPropagation}
26 >
27 <Image
28 alt={account.address}
29 className="size-7 rounded-full border border-gray-200 bg-gray-200 sm:size-8 dark:border-gray-700"
30 height={32}
31 src={getAvatar(account)}
32 width={32}
33 />
34 </AccountLink>
35 </AccountPreview>
36 );
37 }
38);
39
40export const NotificationAccountName = memo(
41 ({ account }: NotificationAccountProps) => {
42 return (
43 <AccountPreview
44 address={account.address}
45 username={account.username?.localName}
46 >
47 <AccountLink
48 account={account}
49 className="inline-flex items-center gap-1 font-bold outline-hidden hover:underline focus:underline"
50 onClick={stopEventPropagation}
51 >
52 <span>{getAccount(account).name}</span>
53 {account.hasSubscribed && (
54 <CheckBadgeIcon className="size-4 text-brand-500" />
55 )}
56 </AccountLink>
57 </AccountPreview>
58 );
59 }
60);