From 40b7fde621225cfb7c3ea43c3d2e5bfad2c30f53 Mon Sep 17 00:00:00 2001 From: ekzyis <27162016+ekzyis@users.noreply.github.com> Date: Thu, 1 Jun 2023 02:51:30 +0200 Subject: [PATCH] refactor: create component per notification type (#298) Co-authored-by: ekzyis --- components/notifications.js | 306 ++++++++++++++++++++++-------------- 1 file changed, 185 insertions(+), 121 deletions(-) diff --git a/components/notifications.js b/components/notifications.js index e05f2014..b8f152a1 100644 --- a/components/notifications.js +++ b/components/notifications.js @@ -18,133 +18,54 @@ import BaldIcon from '../svgs/bald.svg' import { RootProvider } from './root' import { useMe } from './me' -// TODO: oh man, this is a mess ... each notification type should just be a component ... function Notification ({ n }) { - const router = useRouter() + switch (n.__typename) { + case 'Earn': return + case 'Invitification': return + case 'InvoicePaid': return + case 'Referral': return + case 'Streak': return + case 'Votification': return + case 'Mention': return + case 'JobChanged': return + case 'Reply': return + } + console.error("__typename not supported:", n.__typename) + return null +} + +function NotificationLayout({ children, onClick }) { return ( -
{ - if (n.__typename === 'Earn' || n.__typename === 'Referral' || n.__typename === 'Streak') { - return - } - - if (ignoreClick(e)) { - return - } - - if (n.__typename === 'InvoicePaid') { - router.push(`/invoices/${n.invoice.id}`) - } else if (n.__typename === 'Invitification') { - router.push('/invites') - } else if (!n.item.title) { - if (n.item.path.split('.').length > COMMENT_DEPTH_LIMIT + 1) { - router.push({ - pathname: '/items/[id]', - query: { id: n.item.parentId, commentId: n.item.id } - }, `/items/${n.item.parentId}`) - } else { - router.push({ - pathname: '/items/[id]', - query: { id: n.item.root.id, commentId: n.item.id } - }, `/items/${n.item.root.id}`) - } - } else { - router.push({ - pathname: '/items/[id]', - query: { id: n.item.id } - }, `/items/${n.item.id}`) - } - }} - > - {n.__typename === 'Invitification' - ? ( - <> - - your invite has been redeemed by {n.invite.invitees.length} users - -
- = n.invite.limit) - } - /> -
- - ) - : n.__typename === 'Earn' - ? ( -
- -
-
- you stacked {n.earnedSats} sats in rewards{timeSince(new Date(n.sortTime))} -
- {n.sources && -
- {n.sources.posts > 0 && {n.sources.posts} sats for top posts} - {n.sources.comments > 0 && {n.sources.posts > 0 && ' \\ '}{n.sources.comments} sats for top comments} - {n.sources.tips > 0 && {(n.sources.comments > 0 || n.sources.posts > 0) && ' \\ '}{n.sources.tips} sats for tipping top content early} -
} -
- SN distributes the sats it earns back to its best users daily. These sats come from jobs, boosts, posting fees, and donations. You can see the daily rewards pool and make a donation here. -
-
-
- ) - : n.__typename === 'Referral' - ? ( - <> - - someone joined via one of your referral links - {timeSince(new Date(n.sortTime))} - - - ) - : n.__typename === 'InvoicePaid' - ? ( -
- {n.earnedSats} sats were deposited in your account - {timeSince(new Date(n.sortTime))} -
) - : n.__typename === 'Streak' - ? - : ( - <> - {n.__typename === 'Votification' && - - your {n.item.title ? 'post' : 'reply'} {n.item.fwdUser ? 'forwarded' : 'stacked'} {n.earnedSats} sats{n.item.fwdUser && ` to @${n.item.fwdUser.name}`} - } - {n.__typename === 'Mention' && - - you were mentioned in - } - {n.__typename === 'JobChanged' && - - {n.item.status === 'ACTIVE' - ? 'your job is active again' - : (n.item.status === 'NOSATS' - ? 'your job promotion ran out of sats' - : 'your job has been stopped')} - } -
- {n.item.isJob - ? - : n.item.title - ? - : ( -
- - - -
)} -
- )} +
{ + if (ignoreClick(e)) return + onClick?.(e) + }}> + {children}
) } +const defaultOnClick = (n) => () => { + if (!n.item.title) { + if (n.item.path.split('.').length > COMMENT_DEPTH_LIMIT + 1) { + router.push({ + pathname: '/items/[id]', + query: { id: n.item.parentId, commentId: n.item.id } + }, `/items/${n.item.parentId}`) + } else { + router.push({ + pathname: '/items/[id]', + query: { id: n.item.root.id, commentId: n.item.id } + }, `/items/${n.item.root.id}`) + } + } else { + router.push({ + pathname: '/items/[id]', + query: { id: n.item.id } + }, `/items/${n.item.id}`) + } +} + function Streak ({ n }) { function blurb (n) { const index = Number(n.id) % 6 @@ -184,6 +105,149 @@ function Streak ({ n }) { ) } +function EarnNotification({ n }) { + return ( + +
+ +
+
+ you stacked {n.earnedSats} sats in rewards{timeSince(new Date(n.sortTime))} +
+ {n.sources && +
+ {n.sources.posts > 0 && {n.sources.posts} sats for top posts} + {n.sources.comments > 0 && {n.sources.posts > 0 && ' \\ '}{n.sources.comments} sats for top comments} + {n.sources.tips > 0 && {(n.sources.comments > 0 || n.sources.posts > 0) && ' \\ '}{n.sources.tips} sats for tipping top content early} +
} +
+ SN distributes the sats it earns back to its best users daily. These sats come from jobs, boosts, posting fees, and donations. You can see the daily rewards pool and make a donation here. +
+
+
+ + ); +} + +function Invitification({ n }) { + const router = useRouter() + return ( + router.push('/invites')}> + + your invite has been redeemed by {n.invite.invitees.length} users + +
+ = n.invite.limit) + } + /> +
+ + ) +} + +function InvoicePaid({ n }) { + const router = useRouter() + return ( + router.push(`/invoices/${n.invoice.id}`)}> +
+ {n.earnedSats} sats were deposited in your account + {timeSince(new Date(n.sortTime))} +
+ + ) +} + +function Referral({ n }) { + return ( + + + someone joined via one of your referral links + {timeSince(new Date(n.sortTime))} + + + ) +} + +function Votification({ n }) { + return ( + + + your {n.item.title ? 'post' : 'reply'} {n.item.fwdUser ? 'forwarded' : 'stacked'} {n.earnedSats} sats{n.item.fwdUser && ` to @${n.item.fwdUser.name}`} + +
+ {n.item.title + ? + : ( +
+ + + +
+ ) + } +
+ + ) +} + +function Mention({ n }) { + return ( + + + you were mentioned in + +
+ {n.item.title + ? + : ( +
+ + + +
) + } +
+ + ) +} + +function JobChanged({ n }) { + return ( + + + {n.item.status === 'ACTIVE' + ? 'your job is active again' + : (n.item.status === 'NOSATS' + ? 'your job promotion ran out of sats' + : 'your job has been stopped')} + + + + ) +} + +function Reply({ n }) { + return ( + +
+ {n.item.title + ? + : ( +
+ + + +
+ ) + } +
+ + ) +} + export default function Notifications ({ notifications, earn, cursor, lastChecked, variables }) { const { data, fetchMore } = useQuery(NOTIFICATIONS, { variables })