finish notifications featur

src/app/ui/notifications/notifications-list.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
 import { useAllNotifications } from '@/app/hooks/react-query/useAllNotificationsList';
 import { notificationsMarkAsRead } from '@/app/actions/notificationActions';
 import { useQueryClient } from '@tanstack/react-query';
+import { formatDate, formatDateTime } from '@/app/lib/formatDate';
 
 export function NotificationsList() {
 	const t = useTranslations('Global');
@@ -88,12 +89,12 @@ export function NotificationsList() {
 		});
 
 		try {
-			/* 			const response = await notificationsMarkAsRead(ids);
-			
-						if (response.success) {
-							await queryClient.invalidateQueries({ queryKey: ['activeNotifications'] });
-							await queryClient.invalidateQueries({ queryKey: ['allNotifications'] });
-						} */
+			const response = await notificationsMarkAsRead(ids);
+
+			if (response.success) {
+				await queryClient.invalidateQueries({ queryKey: ['activeNotifications'] });
+				await queryClient.invalidateQueries({ queryKey: ['allNotifications'] });
+			}
 		} catch (error) {
 			setError(error instanceof Error ? error.message : 'Failed to mark as read');
 		} finally {
@@ -173,7 +174,7 @@ export function NotificationsList() {
 					allNotifications?.notifications.map(item => {
 						return (
 							<div
-								className="notification-item"
+								className={`notification-item ${loadingIds.has(item.id) ? 'loading' : ''} ${item.status}`}
 								key={item.id}
 							>
 								<div
@@ -199,13 +200,13 @@ export function NotificationsList() {
 										<div
 											className="notification-title"
 										>
-											{item.type}
+											{item.type} {item.id}
 										</div>
-										<div
+										{/* 										<div
 											className="notification-status"
 										>
 											{item.status}
-										</div>
+										</div> */}
 									</div>
 									<div
 										className="notification-text"
@@ -218,7 +219,7 @@ export function NotificationsList() {
 										<div
 											className="notification-date"
 										>
-											{item.createdAt}
+											{item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}
 										</div>
 
 										<button
@@ -226,7 +227,7 @@ export function NotificationsList() {
 											onClick={() => {
 												removeHandler(item.id);
 											}}
-											disabled={false}
+											disabled={loadingIds.has(item.id)}
 										>
 											{t('remove')}
 										</button>