Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿
Refactor notification rendering (#5795)
authored by
GitHub
a1c6bb7f
ac26274b
+28
-34
+28
-34
apps/web/src/components/Notification/List.tsx
+28
-34
apps/web/src/components/Notification/List.tsx
···
20
20
import ReactionNotification from "./Type/ReactionNotification";
21
21
import RepostNotification from "./Type/RepostNotification";
22
22
23
+
const notificationComponentMap = {
24
+
FollowNotification,
25
+
MentionNotification,
26
+
ReactionNotification,
27
+
CommentNotification,
28
+
RepostNotification,
29
+
QuoteNotification,
30
+
PostActionExecutedNotification,
31
+
AccountActionExecutedNotification
32
+
} as const;
33
+
23
34
interface ListProps {
24
35
feedType: string;
25
36
}
···
96
107
return (
97
108
<Card className="virtual-divider-list-window">
98
109
<WindowVirtualizer>
99
-
{notifications.map((notification, index) => (
100
-
<div
101
-
key={index}
102
-
className={cn({
103
-
"p-5": notification.__typename !== "FollowNotification"
104
-
})}
105
-
>
106
-
{notification.__typename === "FollowNotification" && (
107
-
<FollowNotification notification={notification} />
108
-
)}
109
-
{notification.__typename === "MentionNotification" && (
110
-
<MentionNotification notification={notification} />
111
-
)}
112
-
{notification.__typename === "ReactionNotification" && (
113
-
<ReactionNotification notification={notification} />
114
-
)}
115
-
{notification.__typename === "CommentNotification" && (
116
-
<CommentNotification notification={notification} />
117
-
)}
118
-
{notification.__typename === "RepostNotification" && (
119
-
<RepostNotification notification={notification} />
120
-
)}
121
-
{notification.__typename === "QuoteNotification" && (
122
-
<QuoteNotification notification={notification} />
123
-
)}
124
-
{notification.__typename === "PostActionExecutedNotification" && (
125
-
<PostActionExecutedNotification notification={notification} />
126
-
)}
127
-
{notification.__typename ===
128
-
"AccountActionExecutedNotification" && (
129
-
<AccountActionExecutedNotification notification={notification} />
130
-
)}
131
-
</div>
132
-
))}
110
+
{notifications.map((notification, index) => {
111
+
const Component =
112
+
notificationComponentMap[
113
+
notification.__typename as keyof typeof notificationComponentMap
114
+
];
115
+
116
+
return (
117
+
<div
118
+
key={index}
119
+
className={cn({
120
+
"p-5": notification.__typename !== "FollowNotification"
121
+
})}
122
+
>
123
+
{Component && <Component notification={notification as never} />}
124
+
</div>
125
+
);
126
+
})}
133
127
{hasMore && <span ref={loadMoreRef} />}
134
128
</WindowVirtualizer>
135
129
</Card>