Render each notification type with its own row
React · React · intermediate · modification
Refactors the notifications feed from a single one-size-fits-all row into per-type components, so each notification reads naturally. Switches on `item.type` and renders the matching row, with a generic fallback for safety. Verified against the notifications fixtures.
NotificationRow renders every item in the user's notifications feed; reactions are the single most common notification type in the product.
Requirements
- The `NotificationItem` union has exactly four types: `mention`, `reply`, `reaction`, and `follow`. Render each one with its own dedicated row component.
- A `reaction` must show the reactor and the emoji they used (e.g. 'Ada reacted 🎉'); the generic wording 'sent you a notification' is only acceptable when there is genuinely nothing type-specific to say, which is never the case for the four documented types.
- If a new notification type is added to the union later, this component must fail to compile until it is handled — not silently fall back to a generic row.
Files touched
- src/components/NotificationRow.tsx
--- src/components/NotificationRow.tsx
| { type: 'follow'; actor: string };
-export function NotificationRow({ item }: { item: NotificationItem }) {
+function MentionRow({ actor, excerpt }: { actor: string; excerpt: string }) {
+ return (
+ <li className="notification-row mention">
+ <span className="actor">{actor}</span>
+ <span className="summary">mentioned you: {excerpt}</span>
+ </li>
+ );
+}
+
+function ReplyRow({ actor, excerpt }: { actor: string; excerpt: string }) {
+ return (
+ <li className="notification-row reply">
+ <span className="actor">{actor}</span>
+ <span className="summary">replied: {excerpt}</span>
+ </li>
+ );
+}
+
+function FollowRow({ actor }: { actor: string }) {
+ return (
+ <li className="notification-row follow">
+ <span className="actor">{actor}</span>
+ <span className="summary">started following you</span>
+ </li>
+ );
+}