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 type { AccountFragment } from "@hey/indexer";
2import type { ReactNode } from "react";
3import { memo } from "react";
4import FallbackAccountName from "@/components/Shared/FallbackAccountName";
5
6interface AccountsProps {
7 context?: string;
8 accounts: AccountFragment[];
9}
10
11const Accounts = ({ context, accounts }: AccountsProps) => {
12 const Wrapper = ({ children }: { children: ReactNode }) => (
13 <>
14 {children}
15 {context && <span> {context}</span>}
16 </>
17 );
18
19 const accountOne = accounts[0];
20 const accountTwo = accounts[1];
21 const accountThree = accounts[2];
22
23 if (accounts.length === 1) {
24 return (
25 <Wrapper>
26 <FallbackAccountName account={accountOne} />
27 </Wrapper>
28 );
29 }
30
31 const andSep = " and ";
32
33 if (accounts.length === 2) {
34 return (
35 <Wrapper>
36 <FallbackAccountName account={accountOne} separator={andSep} />
37 <FallbackAccountName account={accountTwo} />
38 </Wrapper>
39 );
40 }
41
42 if (accounts.length >= 3) {
43 const additionalCount = accounts.length - 3;
44
45 return (
46 <Wrapper>
47 <FallbackAccountName account={accountOne} separator=", " />
48 <FallbackAccountName
49 account={accountTwo}
50 separator={additionalCount === 0 ? andSep : ", "}
51 />
52 <FallbackAccountName
53 account={accountThree}
54 separator={
55 additionalCount > 0 && (
56 <span className="whitespace-nowrap">
57 {andSep}
58 {additionalCount} {additionalCount === 1 ? "other" : "others"}
59 </span>
60 )
61 }
62 />
63 </Wrapper>
64 );
65 }
66
67 return null;
68};
69
70export default memo(Accounts);