Test Notifications client

app/api/notifications/test/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from "next/server";
+import prisma from "@/app/prisma";
+import { z } from "zod/v4";
+
+const schema = z.object({
+    notificationProviderId: z.number()
+})
+
+export async function POST(request: NextRequest) {
+    try {
+        const body = await request.json();
+        const { notificationProviderId } = schema.parse(body);
+
+        const notificationProvider = await prisma.notificationProvider.findUnique({
+            where: { id: notificationProviderId }
+        })
+
+        if(!notificationProvider) {
+            return NextResponse.json({ error: "Notification provider not found" }, { status: 404 });
+        }
+
+        const notificationTest = await prisma.notificationTest.create({
+            data: { notificationProviderId: notificationProviderId }
+        })
+
+        return NextResponse.json({ notificationTest }, { status: 201 });
+    } catch (error) {
+        if(error instanceof z.ZodError) {
+            return NextResponse.json({ error: error.issues[0].message }, { status: 400 });
+        }
+        return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+    }
+}

components/cards/settings/NotificationSettings.tsx

@@ -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>
   );

components/dialogues/TestNotification.tsx

@@ -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>
+    )
+}

hooks/useNotifications.ts

@@ -41,12 +41,23 @@ const useNotifications = () => {
         });
     }
 
+    const testNotification = (notificationProviderId: number): Promise<string> | string => {
+        return axios.post('/api/notifications/test', { notificationProviderId })
+        .then((response) => {
+            return response.data.notificationTest;
+        })
+        .catch(err => {
+            throw err.response?.data?.error || 'An error occurred';
+        });
+    }
+
     return {
         notifications,
         loading,
         addNotification,
         deleteNotification,
-        loadNotifications
+        loadNotifications,
+        testNotification
     };
 }