2597eb56f3
* Parse internal refs to links * Item mention notifications * Also parse item mentions as URLs * Fix subType determined by referrer item instead of referee item * Ignore subType Considering if the item that was referred to was a post or comment made the code more complex than initially necessary. For example, notifications for /notifications are deduplicated based on item id and the same item could refer to posts and comments, so to include "one of your posts" or "one of your comments" in the title would require splitting notifications based on the type of referred item. I didn't want to do this but also wanted to have consistent notification titles between push and /notifications, so I use "items" in both places now, even though I think using "items" isn't ideal from a user perspective. I think it might be confusing. * Fix rootText * Replace full links to #<id> syntax in push notifications * Refactor mention code into separate functions
625 lines
22 KiB
JavaScript
625 lines
22 KiB
JavaScript
import { useState, useEffect, useMemo } from 'react'
|
|
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 MoreFooter from './more-footer'
|
|
import Invite from './invite'
|
|
import { dayMonthYear, 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 { LOST_BLURBS, FOUND_BLURBS, UNKNOWN_LINK_REL } from '@/lib/constants'
|
|
import CowboyHatIcon from '@/svgs/cowboy.svg'
|
|
import BaldIcon from '@/svgs/bald.svg'
|
|
import { RootProvider } from './root'
|
|
import Alert from 'react-bootstrap/Alert'
|
|
import styles from './notifications.module.css'
|
|
import { useServiceWorker } from './serviceworker'
|
|
import { Checkbox, Form } from './form'
|
|
import { useRouter } from 'next/router'
|
|
import { useData } from './use-data'
|
|
import { nostrZapDetails } from '@/lib/nostr'
|
|
import Text from './text'
|
|
import NostrIcon from '@/svgs/nostr.svg'
|
|
import { numWithUnits } from '@/lib/format'
|
|
import BountyIcon from '@/svgs/bounty-bag.svg'
|
|
import { LongCountdown } from './countdown'
|
|
import { nextBillingWithGrace } from '@/lib/territory'
|
|
import { commentSubTreeRootId } from '@/lib/item'
|
|
import LinkToContext from './link-to-context'
|
|
import { Badge } from 'react-bootstrap'
|
|
import { Types as ClientTypes, ClientZap, ClientReply, ClientPollVote, ClientBounty, useClientNotifications } from './client-notifications'
|
|
import { ITEM_FULL } from '@/fragments/items'
|
|
|
|
function Notification ({ n, fresh }) {
|
|
const type = n.__typename
|
|
|
|
// we need to resolve item id to item to show item for client notifications
|
|
const { data } = useQuery(ITEM_FULL, { variables: { id: n.itemId }, skip: !n.itemId })
|
|
const item = data?.item
|
|
const itemN = { item, ...n }
|
|
|
|
return (
|
|
<NotificationLayout nid={nid(n)} {...defaultOnClick(itemN)} fresh={fresh}>
|
|
{
|
|
(type === 'Earn' && <EarnNotification n={n} />) ||
|
|
(type === 'Revenue' && <RevenueNotification n={n} />) ||
|
|
(type === 'Invitification' && <Invitification n={n} />) ||
|
|
(type === 'InvoicePaid' && (n.invoice.nostr ? <NostrZap n={n} /> : <InvoicePaid n={n} />)) ||
|
|
(type === 'WithdrawlPaid' && <WithdrawlPaid n={n} />) ||
|
|
(type === 'Referral' && <Referral n={n} />) ||
|
|
(type === 'Streak' && <Streak n={n} />) ||
|
|
(type === 'Votification' && <Votification n={n} />) ||
|
|
(type === 'ForwardedVotification' && <ForwardedVotification n={n} />) ||
|
|
(type === 'Mention' && <Mention n={n} />) ||
|
|
(type === 'ItemMention' && <ItemMention n={n} />) ||
|
|
(type === 'JobChanged' && <JobChanged n={n} />) ||
|
|
(type === 'Reply' && <Reply n={n} />) ||
|
|
(type === 'SubStatus' && <SubStatus n={n} />) ||
|
|
(type === 'FollowActivity' && <FollowActivity n={n} />) ||
|
|
(type === 'TerritoryPost' && <TerritoryPost n={n} />) ||
|
|
(type === 'TerritoryTransfer' && <TerritoryTransfer n={n} />) ||
|
|
(type === 'Reminder' && <Reminder n={n} />) ||
|
|
([ClientTypes.Zap.ERROR, ClientTypes.Zap.PENDING].includes(type) && <ClientZap n={itemN} />) ||
|
|
([ClientTypes.Reply.ERROR, ClientTypes.Reply.PENDING].includes(type) && <ClientReply n={itemN} />) ||
|
|
([ClientTypes.Bounty.ERROR, ClientTypes.Bounty.PENDING].includes(type) && <ClientBounty n={itemN} />) ||
|
|
([ClientTypes.PollVote.ERROR, ClientTypes.PollVote.PENDING].includes(type) && <ClientPollVote n={itemN} />)
|
|
}
|
|
</NotificationLayout>
|
|
)
|
|
}
|
|
|
|
function NotificationLayout ({ children, nid, href, as, fresh }) {
|
|
const router = useRouter()
|
|
if (!href) return <div className={fresh ? styles.fresh : ''}>{children}</div>
|
|
return (
|
|
<LinkToContext
|
|
className={`${fresh ? styles.fresh : ''} ${router?.query?.nid === nid ? 'outline-it' : ''}`}
|
|
onClick={async (e) => {
|
|
e.preventDefault()
|
|
nid && await router.replace({
|
|
pathname: router.pathname,
|
|
query: {
|
|
...router.query,
|
|
nid
|
|
}
|
|
}, router.asPath, { ...router.options, shallow: true })
|
|
router.push(href, as)
|
|
}}
|
|
href={href}
|
|
>
|
|
{children}
|
|
</LinkToContext>
|
|
)
|
|
}
|
|
|
|
const defaultOnClick = n => {
|
|
const type = n.__typename
|
|
if (type === 'Earn') {
|
|
let href = '/rewards/'
|
|
if (n.minSortTime !== n.sortTime) {
|
|
href += `${dayMonthYear(new Date(n.minSortTime))}/`
|
|
}
|
|
href += dayMonthYear(new Date(n.sortTime))
|
|
return { href }
|
|
}
|
|
if (type === 'Revenue') return { href: `/~${n.subName}` }
|
|
if (type === 'SubStatus') return { href: `/~${n.sub.name}` }
|
|
if (type === 'Invitification') return { href: '/invites' }
|
|
if (type === 'InvoicePaid') return { href: `/invoices/${n.invoice.id}` }
|
|
if (type === 'WithdrawlPaid') return { href: `/withdrawals/${n.id}` }
|
|
if (type === 'Referral') return { href: '/referrals/month' }
|
|
if (type === 'Streak') return {}
|
|
if (type === 'TerritoryTransfer') return { href: `/~${n.sub.name}` }
|
|
|
|
if (!n.item) return {}
|
|
|
|
// Votification, Mention, JobChanged, Reply all have item
|
|
if (!n.item.title) {
|
|
const rootId = commentSubTreeRootId(n.item)
|
|
return {
|
|
href: {
|
|
pathname: '/items/[id]',
|
|
query: { id: rootId, commentId: n.item.id }
|
|
},
|
|
as: `/items/${rootId}`
|
|
}
|
|
} else {
|
|
return {
|
|
href: {
|
|
pathname: '/items/[id]',
|
|
query: { id: n.item.id }
|
|
},
|
|
as: `/items/${n.item.id}`
|
|
}
|
|
}
|
|
}
|
|
|
|
function Streak ({ n }) {
|
|
function blurb (n) {
|
|
const index = Number(n.id) % Math.min(FOUND_BLURBS.length, LOST_BLURBS.length)
|
|
if (n.days) {
|
|
return `After ${numWithUnits(n.days, {
|
|
abbreviate: false,
|
|
unitSingular: 'day',
|
|
unitPlural: 'days'
|
|
})}, ` + LOST_BLURBS[index]
|
|
}
|
|
|
|
return FOUND_BLURBS[index]
|
|
}
|
|
|
|
return (
|
|
<div className='d-flex ms-2 py-1'>
|
|
<div style={{ fontSize: '2rem' }}>{n.days ? <BaldIcon className='fill-grey' height={40} width={40} /> : <CowboyHatIcon className='fill-grey' height={40} width={40} />}</div>
|
|
<div className='ms-1 p-1'>
|
|
<span className='fw-bold'>you {n.days ? 'lost your' : 'found a'} cowboy hat</span>
|
|
<div><small style={{ lineHeight: '140%', display: 'inline-block' }}>{blurb(n)}</small></div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function EarnNotification ({ n }) {
|
|
const time = n.minSortTime === n.sortTime ? dayMonthYear(new Date(n.minSortTime)) : `${dayMonthYear(new Date(n.minSortTime))} to ${dayMonthYear(new Date(n.sortTime))}`
|
|
|
|
return (
|
|
<div className='d-flex ms-2 py-1'>
|
|
<HandCoin className='align-self-center fill-boost mx-1' width={24} height={24} style={{ flex: '0 0 24px', transform: 'rotateY(180deg)' }} />
|
|
<div className='ms-2'>
|
|
<div className='fw-bold text-boost'>
|
|
you stacked {numWithUnits(n.earnedSats, { abbreviate: false })} in rewards<small className='text-muted ms-1 fw-normal' suppressHydrationWarning>{time}</small>
|
|
</div>
|
|
{n.sources &&
|
|
<div style={{ fontSize: '80%', color: 'var(--theme-grey)' }}>
|
|
{n.sources.posts > 0 && <span>{numWithUnits(n.sources.posts, { abbreviate: false })} for top posts</span>}
|
|
{n.sources.comments > 0 && <span>{n.sources.posts > 0 && ' \\ '}{numWithUnits(n.sources.comments, { abbreviate: false })} for top comments</span>}
|
|
{n.sources.tipPosts > 0 && <span>{(n.sources.comments > 0 || n.sources.posts > 0) && ' \\ '}{numWithUnits(n.sources.tipPosts, { abbreviate: false })} for zapping top posts early</span>}
|
|
{n.sources.tipComments > 0 && <span>{(n.sources.comments > 0 || n.sources.posts > 0 || n.sources.tipPosts > 0) && ' \\ '}{numWithUnits(n.sources.tipComments, { abbreviate: false })} for zapping top comments early</span>}
|
|
</div>}
|
|
<div style={{ lineHeight: '140%' }}>
|
|
SN distributes the sats it earns back to its best stackers. These sats come from <Link href='/~jobs'>jobs</Link>, boosts, posting fees, and donations. You can see the rewards pool and make a donation <Link href='/rewards'>here</Link>.
|
|
</div>
|
|
<small className='text-muted ms-1 pb-1 fw-normal'>click for details</small>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function RevenueNotification ({ n }) {
|
|
return (
|
|
<div className='d-flex ms-2 py-1'>
|
|
<BountyIcon className='align-self-center fill-success mx-1' width={24} height={24} style={{ flex: '0 0 24px' }} />
|
|
<div className='ms-2 pb-1'>
|
|
<div className='fw-bold text-success'>
|
|
you stacked {numWithUnits(n.earnedSats, { abbreviate: false })} in territory revenue<small className='text-muted ms-1 fw-normal' suppressHydrationWarning>{timeSince(new Date(n.sortTime))}</small>
|
|
</div>
|
|
<div style={{ lineHeight: '140%' }}>
|
|
As the founder of territory <Link href={`/~${n.subName}`}>~{n.subName}</Link>, you receive 50% of the revenue it generates and the other 50% go to <Link href='/rewards'>rewards</Link>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SubStatus ({ n }) {
|
|
const dueDate = nextBillingWithGrace(n.sub)
|
|
return (
|
|
<div className={`fw-bold text-${n.sub.status === 'ACTIVE' ? 'success' : 'danger'} ms-2`}>
|
|
{n.sub.status === 'ACTIVE'
|
|
? 'your territory is active again'
|
|
: (n.sub.status === 'GRACE'
|
|
? <>your territory payment for ~{n.sub.name} is due or your territory will be archived in <LongCountdown date={dueDate} /></>
|
|
: <>your territory ~{n.sub.name} has been archived</>)}
|
|
<small className='text-muted d-block pb-1 fw-normal'>click to visit territory and pay</small>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Invitification ({ n }) {
|
|
return (
|
|
<>
|
|
<small className='fw-bold text-secondary ms-2'>
|
|
your invite has been redeemed by
|
|
{numWithUnits(n.invite.invitees.length, {
|
|
abbreviate: false,
|
|
unitSingular: 'stacker',
|
|
unitPlural: 'stackers'
|
|
})}
|
|
</small>
|
|
<div className='ms-4 me-2 mt-1'>
|
|
<Invite
|
|
invite={n.invite} active={
|
|
!n.invite.revoked &&
|
|
!(n.invite.limit && n.invite.invitees.length >= n.invite.limit)
|
|
}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function NostrZap ({ n }) {
|
|
const { nostr } = n.invoice
|
|
const { npub, content, note } = nostrZapDetails(nostr)
|
|
|
|
return (
|
|
<>
|
|
<div className='fw-bold text-nostr ms-2 py-1'>
|
|
<NostrIcon width={24} height={24} className='fill-nostr me-1' />{numWithUnits(n.earnedSats)} zap from
|
|
{// eslint-disable-next-line
|
|
<Link className='mx-1 text-reset text-underline' target='_blank' href={`https://njump.me/${npub}`} rel={UNKNOWN_LINK_REL}>
|
|
{npub.slice(0, 10)}...
|
|
</Link>
|
|
}
|
|
on {note
|
|
? (
|
|
// eslint-disable-next-line
|
|
<Link className='mx-1 text-reset text-underline' target='_blank' href={`https://njump.me/${note}`} rel={UNKNOWN_LINK_REL}>
|
|
{note.slice(0, 12)}...
|
|
</Link>)
|
|
: 'nostr'}
|
|
<small className='text-muted ms-1 fw-normal' suppressHydrationWarning>{timeSince(new Date(n.sortTime))}</small>
|
|
{content && <small className='d-block ms-4 ps-1 mt-1 mb-1 text-muted fw-normal'><Text>{content}</Text></small>}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function InvoicePaid ({ n }) {
|
|
let payerSig
|
|
if (n.invoice.lud18Data) {
|
|
const { name, identifier, email, pubkey } = n.invoice.lud18Data
|
|
const id = identifier || email || pubkey
|
|
payerSig = '- '
|
|
if (name) {
|
|
payerSig += name
|
|
if (id) payerSig += ' \\ '
|
|
}
|
|
|
|
if (id) payerSig += id
|
|
}
|
|
return (
|
|
<div className='fw-bold text-info ms-2 py-1'>
|
|
<Check className='fill-info me-1' />{numWithUnits(n.earnedSats, { abbreviate: false, unitSingular: 'sat was', unitPlural: 'sats were' })} deposited in your account
|
|
<small className='text-muted ms-1 fw-normal' suppressHydrationWarning>{timeSince(new Date(n.sortTime))}</small>
|
|
{n.invoice.comment &&
|
|
<small className='d-block ms-4 ps-1 mt-1 mb-1 text-muted fw-normal'>
|
|
<Text>{n.invoice.comment}</Text>
|
|
{payerSig}
|
|
</small>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function WithdrawlPaid ({ n }) {
|
|
return (
|
|
<div className='fw-bold text-info ms-2 py-1'>
|
|
<Check className='fill-info me-1' />{numWithUnits(n.earnedSats, { abbreviate: false, unitSingular: 'sat was', unitPlural: 'sats were' })} withdrawn from your account
|
|
<small className='text-muted ms-1 fw-normal' suppressHydrationWarning>{timeSince(new Date(n.sortTime))}</small>
|
|
{n.withdrawl.autoWithdraw && <Badge className={styles.badge} bg={null}>autowithdraw</Badge>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Referral ({ n }) {
|
|
return (
|
|
<small className='fw-bold text-secondary ms-2'>
|
|
someone joined via one of your referral links
|
|
<small className='text-muted ms-1 fw-normal' suppressHydrationWarning>{timeSince(new Date(n.sortTime))}</small>
|
|
</small>
|
|
)
|
|
}
|
|
|
|
function Votification ({ n }) {
|
|
let forwardedSats = 0
|
|
let ForwardedUsers = null
|
|
if (n.item.forwards?.length) {
|
|
forwardedSats = Math.floor(n.earnedSats * n.item.forwards.map(fwd => fwd.pct).reduce((sum, cur) => sum + cur) / 100)
|
|
ForwardedUsers = () => n.item.forwards.map((fwd, i) =>
|
|
<span key={fwd.user.name}>
|
|
<Link className='text-success' href={`/${fwd.user.name}`}>
|
|
@{fwd.user.name}
|
|
</Link>
|
|
{i !== n.item.forwards.length - 1 && ' '}
|
|
</span>)
|
|
}
|
|
return (
|
|
<>
|
|
<small className='fw-bold text-success d-inline-block ms-2 my-1' style={{ lineHeight: '1.25' }}>
|
|
your {n.item.title ? 'post' : 'reply'} stacked {numWithUnits(n.earnedSats, { abbreviate: false })}
|
|
{n.item.forwards?.length > 0 &&
|
|
<>
|
|
{' '}and forwarded {numWithUnits(forwardedSats, { abbreviate: false })} to{' '}
|
|
<ForwardedUsers />
|
|
</>}
|
|
</small>
|
|
<div>
|
|
{n.item.title
|
|
? <Item item={n.item} />
|
|
: (
|
|
<div className='pb-2'>
|
|
<RootProvider root={n.item.root}>
|
|
<Comment item={n.item} noReply includeParent clickToContext />
|
|
</RootProvider>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function ForwardedVotification ({ n }) {
|
|
return (
|
|
<>
|
|
<small className='fw-bold text-success d-inline-block ms-2 my-1' style={{ lineHeight: '1.25' }}>
|
|
you were forwarded {numWithUnits(n.earnedSats, { abbreviate: false })} from
|
|
</small>
|
|
<div>
|
|
{n.item.title
|
|
? <Item item={n.item} />
|
|
: (
|
|
<div className='pb-2'>
|
|
<RootProvider root={n.item.root}>
|
|
<Comment item={n.item} noReply includeParent clickToContext />
|
|
</RootProvider>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function Mention ({ n }) {
|
|
return (
|
|
<>
|
|
<small className='fw-bold text-info ms-2'>
|
|
you were mentioned in
|
|
</small>
|
|
<div>
|
|
{n.item.title
|
|
? <Item item={n.item} />
|
|
: (
|
|
<div className='pb-2'>
|
|
<RootProvider root={n.item.root}>
|
|
<Comment item={n.item} noReply includeParent rootText={n.__typename === 'Reply' ? 'replying on:' : undefined} clickToContext />
|
|
</RootProvider>
|
|
</div>)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function ItemMention ({ n }) {
|
|
return (
|
|
<>
|
|
<small className='fw-bold text-info ms-2'>
|
|
your item was mentioned in
|
|
</small>
|
|
<div>
|
|
{n.item?.title
|
|
? <Item item={n.item} />
|
|
: (
|
|
<div className='pb-2'>
|
|
<RootProvider root={n.item.root}>
|
|
<Comment item={n.item} noReply includeParent rootText='replying on:' clickToContext />
|
|
</RootProvider>
|
|
</div>)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function JobChanged ({ n }) {
|
|
return (
|
|
<>
|
|
<small className={`fw-bold text-${n.item.status === 'ACTIVE' ? 'success' : 'boost'} ms-1`}>
|
|
{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')}
|
|
</small>
|
|
<ItemJob item={n.item} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
function Reply ({ n }) {
|
|
return (
|
|
<div className='py-2'>
|
|
{n.item.title
|
|
? <Item item={n.item} />
|
|
: (
|
|
<div className='pb-2'>
|
|
<RootProvider root={n.item.root}>
|
|
<Comment item={n.item} noReply includeParent clickToContext rootText='replying on:' />
|
|
</RootProvider>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function FollowActivity ({ n }) {
|
|
return (
|
|
<>
|
|
<small className='fw-bold text-info ms-2'>
|
|
a stacker you subscribe to {n.item.parentId ? 'commented' : 'posted'}
|
|
</small>
|
|
{n.item.title
|
|
? <div className='ms-2'><Item item={n.item} /></div>
|
|
: (
|
|
<div className='pb-2'>
|
|
<RootProvider root={n.item.root}>
|
|
<Comment item={n.item} noReply includeParent clickToContext rootText='replying on:' />
|
|
</RootProvider>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
function TerritoryPost ({ n }) {
|
|
return (
|
|
<>
|
|
<small className='fw-bold text-info ms-2'>
|
|
new post in ~{n.item.sub.name}
|
|
</small>
|
|
<div>
|
|
<Item item={n.item} />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function TerritoryTransfer ({ n }) {
|
|
return (
|
|
<>
|
|
<div className='fw-bold text-info ms-2'>
|
|
~{n.sub.name} was transferred to you
|
|
<small className='text-muted ms-1 fw-normal' suppressHydrationWarning>{timeSince(new Date(n.sortTime))}</small>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function Reminder ({ n }) {
|
|
return (
|
|
<>
|
|
<small className='fw-bold text-info ms-2'>you asked to be reminded of this {n.item.title ? 'post' : 'comment'}</small>
|
|
{n.item.title
|
|
? <div className='ms-2'><Item item={n.item} /></div>
|
|
: (
|
|
<div className='pb-2'>
|
|
<RootProvider root={n.item.root}>
|
|
<Comment item={n.item} noReply includeParent clickToContext rootText='replying on:' />
|
|
</RootProvider>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function NotificationAlert () {
|
|
const [showAlert, setShowAlert] = useState(false)
|
|
const [hasSubscription, setHasSubscription] = useState(false)
|
|
const [error, setError] = useState(null)
|
|
const [supported, setSupported] = useState(false)
|
|
const sw = useServiceWorker()
|
|
|
|
useEffect(() => {
|
|
const isSupported = sw.support.serviceWorker && sw.support.pushManager && sw.support.notification
|
|
if (isSupported) {
|
|
const isDefaultPermission = sw.permission.notification === 'default'
|
|
setShowAlert(isDefaultPermission && !window.localStorage.getItem('hideNotifyPrompt'))
|
|
sw.registration?.pushManager.getSubscription().then(subscription => setHasSubscription(!!subscription))
|
|
setSupported(true)
|
|
}
|
|
}, [sw])
|
|
|
|
const close = () => {
|
|
window.localStorage.setItem('hideNotifyPrompt', 'yep')
|
|
setShowAlert(false)
|
|
}
|
|
|
|
return (
|
|
error
|
|
? (
|
|
<Alert variant='danger' dismissible onClose={() => setError(null)}>
|
|
<span>{error.toString()}</span>
|
|
</Alert>
|
|
)
|
|
: showAlert
|
|
? (
|
|
<Alert variant='info' dismissible onClose={close}>
|
|
<span className='align-middle'>Enable push notifications?</span>
|
|
<button
|
|
className={`${styles.alertBtn} mx-1`}
|
|
onClick={async () => {
|
|
await sw.requestNotificationPermission()
|
|
.then(close)
|
|
.catch(setError)
|
|
}}
|
|
>Yes
|
|
</button>
|
|
<button className={styles.alertBtn} onClick={close}>No</button>
|
|
</Alert>
|
|
)
|
|
: (
|
|
<Form className={`d-flex justify-content-end ${supported ? 'visible' : 'invisible'}`} initial={{ pushNotify: hasSubscription }}>
|
|
<Checkbox
|
|
name='pushNotify' label={<span className='text-muted'>push notifications</span>}
|
|
groupClassName={`${styles.subFormGroup} mb-1 me-sm-3 me-0`}
|
|
inline checked={hasSubscription} handleChange={async () => {
|
|
await sw.togglePushSubscription().catch(setError)
|
|
}}
|
|
/>
|
|
</Form>
|
|
)
|
|
)
|
|
}
|
|
|
|
const nid = n => n.__typename + n.id + n.sortTime
|
|
|
|
export default function Notifications ({ ssrData }) {
|
|
const { data, fetchMore } = useQuery(NOTIFICATIONS)
|
|
const router = useRouter()
|
|
const dat = useData(data, ssrData)
|
|
const { notifications: clientNotifications } = useClientNotifications()
|
|
|
|
const { notifications, lastChecked, cursor } = useMemo(() => {
|
|
if (!dat?.notifications) return {}
|
|
|
|
// make sure we're using the oldest lastChecked we've seen
|
|
const retDat = { ...dat.notifications }
|
|
if (ssrData?.notifications?.lastChecked < retDat.lastChecked) {
|
|
retDat.lastChecked = ssrData.notifications.lastChecked
|
|
}
|
|
return retDat
|
|
}, [dat])
|
|
|
|
useEffect(() => {
|
|
if (lastChecked && !router?.query?.checkedAt) {
|
|
router.replace({
|
|
pathname: router.pathname,
|
|
query: {
|
|
...router.query,
|
|
nodata: true, // make sure nodata is set so we don't fetch on back/forward
|
|
checkedAt: lastChecked
|
|
}
|
|
}, router.asPath, { ...router.options, shallow: true })
|
|
}
|
|
}, [router?.query?.checkedAt, lastChecked])
|
|
|
|
if (!dat) return <CommentsFlatSkeleton />
|
|
|
|
const sorted = [...clientNotifications, ...notifications]
|
|
.sort((a, b) => new Date(b.sortTime).getTime() - new Date(a.sortTime).getTime())
|
|
|
|
return (
|
|
<>
|
|
{sorted.map(n =>
|
|
<Notification
|
|
n={n} key={nid(n)}
|
|
fresh={new Date(n.sortTime) > new Date(router?.query?.checkedAt ?? lastChecked)}
|
|
/>)}
|
|
<MoreFooter cursor={cursor} count={notifications?.length} fetchMore={fetchMore} Skeleton={CommentsFlatSkeleton} noMoreText='NO MORE' />
|
|
</>
|
|
)
|
|
}
|
|
|
|
function CommentsFlatSkeleton () {
|
|
const comments = new Array(21).fill(null)
|
|
|
|
return (
|
|
<div>
|
|
{comments.map((_, i) => (
|
|
<CommentSkeleton key={i} skeletonChildren={0} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|