fix notification clicking after refactor

This commit is contained in:
keyan 2023-06-01 13:22:39 -05:00
parent 3de8df5ab5
commit f4b81b0ff0
1 changed files with 38 additions and 35 deletions

View File

@ -30,22 +30,24 @@ function Notification ({ n }) {
case 'JobChanged': return <JobChanged n={n} /> case 'JobChanged': return <JobChanged n={n} />
case 'Reply': return <Reply n={n} /> case 'Reply': return <Reply n={n} />
} }
console.error("__typename not supported:", n.__typename) console.error('__typename not supported:', n.__typename)
return null return null
} }
function NotificationLayout ({ children, onClick }) { function NotificationLayout ({ children, onClick }) {
return ( return (
<div className='clickToContext' onClick={(e) => { <div
className='clickToContext' onClick={(e) => {
if (ignoreClick(e)) return if (ignoreClick(e)) return
onClick?.(e) onClick?.(e)
}}> }}
>
{children} {children}
</div> </div>
) )
} }
const defaultOnClick = (n) => () => { const defaultOnClick = (n, router) => () => {
if (!n.item.title) { if (!n.item.title) {
if (n.item.path.split('.').length > COMMENT_DEPTH_LIMIT + 1) { if (n.item.path.split('.').length > COMMENT_DEPTH_LIMIT + 1) {
router.push({ router.push({
@ -126,7 +128,7 @@ function EarnNotification({ n }) {
</div> </div>
</div> </div>
</NotificationLayout> </NotificationLayout>
); )
} }
function Invitification ({ n }) { function Invitification ({ n }) {
@ -172,8 +174,9 @@ function Referral({ n }) {
} }
function Votification ({ n }) { function Votification ({ n }) {
const router = useRouter()
return ( return (
<NotificationLayout onClick={defaultOnClick(n)}> <NotificationLayout onClick={defaultOnClick(n, router)}>
<small className='font-weight-bold text-success ml-2'> <small className='font-weight-bold text-success ml-2'>
your {n.item.title ? 'post' : 'reply'} {n.item.fwdUser ? 'forwarded' : 'stacked'} {n.earnedSats} sats{n.item.fwdUser && ` to @${n.item.fwdUser.name}`} your {n.item.title ? 'post' : 'reply'} {n.item.fwdUser ? 'forwarded' : 'stacked'} {n.earnedSats} sats{n.item.fwdUser && ` to @${n.item.fwdUser.name}`}
</small> </small>
@ -186,16 +189,16 @@ function Votification({ n }) {
<Comment item={n.item} noReply includeParent clickToContext /> <Comment item={n.item} noReply includeParent clickToContext />
</RootProvider> </RootProvider>
</div> </div>
) )}
}
</div> </div>
</NotificationLayout> </NotificationLayout>
) )
} }
function Mention ({ n }) { function Mention ({ n }) {
const router = useRouter()
return ( return (
<NotificationLayout onClick={defaultOnClick(n)}> <NotificationLayout onClick={defaultOnClick(n, router)}>
<small className='font-weight-bold text-info ml-2'> <small className='font-weight-bold text-info ml-2'>
you were mentioned in you were mentioned in
</small> </small>
@ -207,16 +210,16 @@ function Mention({ n }) {
<RootProvider root={n.item.root}> <RootProvider root={n.item.root}>
<Comment item={n.item} noReply includeParent rootText={n.__typename === 'Reply' ? 'replying on:' : undefined} clickToContext /> <Comment item={n.item} noReply includeParent rootText={n.__typename === 'Reply' ? 'replying on:' : undefined} clickToContext />
</RootProvider> </RootProvider>
</div>) </div>)}
}
</div> </div>
</NotificationLayout> </NotificationLayout>
) )
} }
function JobChanged ({ n }) { function JobChanged ({ n }) {
const router = useRouter()
return ( return (
<NotificationLayout onClick={defaultOnClick(n)}> <NotificationLayout onClick={defaultOnClick(n, router)}>
<small className={`font-weight-bold text-${n.item.status === 'ACTIVE' ? 'success' : 'boost'} ml-1`}> <small className={`font-weight-bold text-${n.item.status === 'ACTIVE' ? 'success' : 'boost'} ml-1`}>
{n.item.status === 'ACTIVE' {n.item.status === 'ACTIVE'
? 'your job is active again' ? 'your job is active again'
@ -230,9 +233,10 @@ function JobChanged({ n }) {
} }
function Reply ({ n }) { function Reply ({ n }) {
const router = useRouter()
return ( return (
<NotificationLayout onClick={defaultOnClick(n)} rootText='replying on:'> <NotificationLayout onClick={defaultOnClick(n, router)} rootText='replying on:'>
<div className="py-2"> <div className='py-2'>
{n.item.title {n.item.title
? <Item item={n.item} /> ? <Item item={n.item} />
: ( : (
@ -241,8 +245,7 @@ function Reply({ n }) {
<Comment item={n.item} noReply includeParent clickToContext rootText='replying on:' /> <Comment item={n.item} noReply includeParent clickToContext rootText='replying on:' />
</RootProvider> </RootProvider>
</div> </div>
) )}
}
</div> </div>
</NotificationLayout> </NotificationLayout>
) )
@ -301,7 +304,7 @@ export const NotificationProvider = ({ children }) => {
const show_ = (title, options) => { const show_ = (title, options) => {
const icon = '/android-chrome-24x24.png' const icon = '/android-chrome-24x24.png'
new window.Notification(title, { icon, ...options }) window.Notification(title, { icon, ...options })
} }
const show = useCallback((...args) => { const show = useCallback((...args) => {