117 lines
3.2 KiB
TypeScript
117 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { toast } from 'sonner'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
isPushSupported,
|
|
isIOSSafari,
|
|
isStandalonePWA,
|
|
subscribeToPush,
|
|
unsubscribeFromPush,
|
|
} from '@/lib/push-client'
|
|
import { debugProps } from '@/lib/debug'
|
|
|
|
type PushStatus =
|
|
| 'loading'
|
|
| 'unsupported'
|
|
| 'ios-needs-install'
|
|
| 'denied'
|
|
| 'subscribed'
|
|
| 'unsubscribed'
|
|
|
|
interface PushToggleProps {
|
|
vapidPublicKey?: string
|
|
}
|
|
|
|
export function PushToggle({ vapidPublicKey }: PushToggleProps) {
|
|
const [status, setStatus] = useState<PushStatus>('loading')
|
|
|
|
useEffect(() => {
|
|
async function detectStatus() {
|
|
if (!isPushSupported()) {
|
|
if (isIOSSafari() && !isStandalonePWA()) {
|
|
setStatus('ios-needs-install')
|
|
} else {
|
|
setStatus('unsupported')
|
|
}
|
|
return
|
|
}
|
|
|
|
if (Notification.permission === 'denied') {
|
|
setStatus('denied')
|
|
return
|
|
}
|
|
|
|
try {
|
|
const reg = await navigator.serviceWorker.getRegistration()
|
|
const sub = await reg?.pushManager.getSubscription()
|
|
setStatus(sub ? 'subscribed' : 'unsubscribed')
|
|
} catch {
|
|
setStatus('unsubscribed')
|
|
}
|
|
}
|
|
|
|
detectStatus()
|
|
}, [])
|
|
|
|
async function handleSubscribe() {
|
|
if (!vapidPublicKey) {
|
|
toast.error('Push niet beschikbaar — VAPID-sleutel ontbreekt')
|
|
return
|
|
}
|
|
try {
|
|
await subscribeToPush(vapidPublicKey)
|
|
setStatus('subscribed')
|
|
toast.success('Push-notificaties geactiveerd')
|
|
} catch {
|
|
if (Notification.permission === 'denied') {
|
|
setStatus('denied')
|
|
}
|
|
toast.error('Kon push niet activeren. Controleer je browserinstellingen.')
|
|
}
|
|
}
|
|
|
|
async function handleUnsubscribe() {
|
|
try {
|
|
await unsubscribeFromPush()
|
|
setStatus('unsubscribed')
|
|
toast.success('Push-notificaties uitgeschakeld')
|
|
} catch {
|
|
toast.error('Kon push niet uitschakelen')
|
|
}
|
|
}
|
|
|
|
if (status === 'loading' || status === 'unsupported') return null
|
|
|
|
if (status === 'ios-needs-install') {
|
|
return (
|
|
<div className="rounded-lg bg-surface-variant p-3 text-sm text-on-surface-variant" {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
|
|
Op iPhone/iPad: tik op het delen-icoon en kies{' '}
|
|
<strong>Zet op beginscherm</strong>. Daarna kun je notificaties activeren.
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (status === 'denied') {
|
|
return (
|
|
<p className="text-sm text-on-surface-variant" {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
|
|
Notificaties zijn geblokkeerd. Schakel ze in via je browser-instellingen.
|
|
</p>
|
|
)
|
|
}
|
|
|
|
if (status === 'unsubscribed') {
|
|
return (
|
|
<Button variant="default" size="sm" onClick={handleSubscribe} {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
|
|
Activeer push
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Button variant="outline" size="sm" onClick={handleUnsubscribe} {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
|
|
Push uitzetten
|
|
</Button>
|
|
)
|
|
}
|