import { Head, Link, router, usePage } from '@inertiajs/react'; import { CheckCheck } from 'lucide-react'; import NotificationController from '@/actions/App/Http/Controllers/Admin/NotificationController'; import NotificationSettingsController from '@/actions/App/Http/Controllers/Settings/NotificationSettingsController'; import Heading from '@/components/heading'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { Label } from '@/components/ui/label'; import { cn, formatDate } from '@/lib/utils'; import type { Paginated } from '@/types'; type NotificationItem = { id: string; data: { message: string; url: string; [key: string]: unknown; }; read_at: string | null; created_at: string | null; }; type PageProps = { notifications: Paginated; notifyByEmail: boolean; }; export default function NotificationSettings() { const { notifications, notifyByEmail } = usePage().props; const unreadCount = notifications.data.filter( (n) => n.read_at === null, ).length; function toggleEmailPreference(checked: boolean) { router.put( NotificationSettingsController.updatePreferences.url(), { notify_by_email: checked }, { preserveScroll: true }, ); } function openNotification(notification: NotificationItem) { router.post( NotificationController.markAsRead.url(notification.id), {}, { preserveScroll: true, onFinish: () => { router.visit(notification.data.url); }, }, ); } function markAllAsRead() { router.post( NotificationController.markAllAsRead.url(), {}, { preserveScroll: true }, ); } return ( <>
toggleEmailPreference(checked === true) } />

Les notifications restent toujours visibles dans l’application, quel que soit ce réglage.

{notifications.total} notification {notifications.total > 1 ? 's' : ''} {unreadCount > 0 && ` · ${unreadCount} non lue${unreadCount > 1 ? 's' : ''}`}

{unreadCount > 0 && ( )}
{notifications.data.length === 0 ? (

Aucune notification pour le moment.

) : (
{notifications.data.map((notification) => ( ))}
)} {notifications.last_page > 1 && (
{notifications.links.map((link, index) => ( ))}
)}
); }