import { useQuery } from '@apollo/client' import Comment, { CommentSkeleton } from './comment' import Item from './item' import ItemJob from './item-job' import { NOTIFICATIONS } from '../fragments/notifications' import { useRouter } from 'next/router' import MoreFooter from './more-footer' import Invite from './invite' import { ignoreClick } from '../lib/clicks' import { timeSince } from '../lib/time' import Link from 'next/link' import Check from '../svgs/check-double-line.svg' import HandCoin from '../svgs/hand-coin-fill.svg' import { COMMENT_DEPTH_LIMIT } from '../lib/constants' // TODO: oh man, this is a mess ... each notification type should just be a component ... function Notification ({ n }) { const router = useRouter() return (
{ if (n.__typename === 'Earn' || n.__typename === 'Referral') { 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 === '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 ? : (
)}
)}
) } export default function Notifications ({ notifications, earn, cursor, lastChecked, variables }) { const { data, fetchMore } = useQuery(NOTIFICATIONS, { variables }) if (data) { ({ notifications: { notifications, earn, cursor } } = data) } const [fresh, old] = notifications.reduce((result, n) => { result[new Date(n.sortTime).getTime() > lastChecked ? 0 : 1].push(n) return result }, [[], []]) return ( <> {/* XXX we shouldn't use the index but we don't have a unique id in this union yet */}
{earn && } {fresh.map((n, i) => ( ))}
{old.map((n, i) => ( ))} ) } function CommentsFlatSkeleton () { const comments = new Array(21).fill(null) return (
{comments.map((_, i) => ( ))}
) }