Test Notifications client

This commit is contained in:
headlesdev
2025-05-25 21:03:37 +02:00
parent 67909493a2
commit 3d982bf1ac
4 changed files with 79 additions and 3 deletions

View File

@@ -3,14 +3,21 @@
import { useState } from 'react';
import AddNotification from '@/components/dialogues/AddNotification';
import DeleteNotification from '@/components/dialogues/DeleteNotification';
import TestNotification from '@/components/dialogues/TestNotification';
import useNotifications from '@/hooks/useNotifications';
import { Plus, Trash2, Play, Bell } from 'lucide-react';
import Loading from '@/components/Loading';
export const NotificationSettings = ({ onError, onSuccess }: { onError: (message: string) => void, onSuccess: (message: string) => void }) => {
const { loadNotifications, notifications, loading } = useNotifications();
const { loadNotifications, notifications, loading, testNotification } = useNotifications();
const [deleteNotificationId, setDeleteNotificationId] = useState<number | null>(null);
const testNotificationHandler = async (notificationProviderId: number) => {
(document.getElementById('test_notification') as HTMLDialogElement)?.showModal();
await testNotification(notificationProviderId);
}
return (
<div>
<div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
@@ -48,7 +55,7 @@ export const NotificationSettings = ({ onError, onSuccess }: { onError: (message
<td>{notification.type}</td>
<td>
<div className='flex items-center gap-2'>
<button className='btn btn-sm btn-success'><Play className='w-4 h-4' /></button>
<button className='btn btn-sm btn-success' onClick={() => testNotificationHandler(notification.id)}><Play className='w-4 h-4' /></button>
<button className='btn btn-sm btn-error' onClick={() => {setDeleteNotificationId(notification.id); (document.getElementById('delete_notification') as HTMLDialogElement)?.showModal()}}><Trash2 className='w-4 h-4' /></button>
</div>
</td>
@@ -72,6 +79,7 @@ export const NotificationSettings = ({ onError, onSuccess }: { onError: (message
{deleteNotificationId && (
<DeleteNotification notificationId={deleteNotificationId} onNotificationDeleted={loadNotifications} onError={onError} onSuccess={onSuccess} />
)}
<TestNotification />
</div>
</div>
);

View File

@@ -0,0 +1,24 @@
import { Bell } from "lucide-react"
export default function TestNotification() {
return (
<div>
<dialog id="test_notification" className="modal">
<div className="modal-box w-11/12 max-w-3xl border-l-4 border-success">
<div className="flex items-center gap-3 mb-3">
<div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center">
<Bell className="h-6 w-6" />
</div>
<h3 className="font-bold text-xl">Test Notification</h3>
</div>
<div className="bg-base-200 p-4 rounded-lg mb-4">
<p>
This will send a test notification to the selected notification provider.
</p>
</div>
</div>
</dialog>
</div>
)
}