From b377c11c41eddf7b6bbff339ebe82274afccb7a5 Mon Sep 17 00:00:00 2001 From: smanylov Date: Mon, 6 Apr 2026 13:02:38 +0700 Subject: [PATCH] finish notifications featur --- package.json | 2 +- src/app/actions/notificationActions.ts | 8 +++--- src/app/styles/header.scss | 19 ++++++++++++++ src/app/styles/pages-styles.scss | 16 +++++++++++- src/app/ui/header/notificationsButton.tsx | 12 +++++++-- .../ui/notifications/notifications-list.tsx | 25 ++++++++++--------- 6 files changed, 62 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index fdd11bd..4afd77e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "no-copy-frontend", - "version": "0.79.0", + "version": "0.80.0", "private": true, "scripts": { "dev": "next dev -p 2999", diff --git a/src/app/actions/notificationActions.ts b/src/app/actions/notificationActions.ts index a2ebdb7..5fe31bb 100644 --- a/src/app/actions/notificationActions.ts +++ b/src/app/actions/notificationActions.ts @@ -62,9 +62,9 @@ export async function fetchAllNotifications(page: number = 0, size: number = 10) page: page, size: size, sortBy: "createdAt", - sortDirection: "DESC", + sortDirection: "ASC", //DESC, ASC types: [], //"SEARCH_RESULT", "MONITORING_RESULT" - statuses: [] //"NEW" + statuses: ["NEW", "READIED"] //"NEW" } }), headers: { @@ -76,7 +76,7 @@ export async function fetchAllNotifications(page: number = 0, size: number = 10) if (response.ok) { let parsed = await response.json(); - if (parsed?.message_body) { + if (parsed?.message_code === 0) { return parsed?.message_body } else { throw parsed; @@ -114,7 +114,7 @@ export async function notificationsMarkAsRead(ids: number[]) { if (response.ok) { let parsed = await response.json(); - if (parsed?.message_body) { + if (parsed?.message_code === 0) { return parsed?.message_body } else { throw parsed; diff --git a/src/app/styles/header.scss b/src/app/styles/header.scss index 1390e53..2ba362e 100644 --- a/src/app/styles/header.scss +++ b/src/app/styles/header.scss @@ -50,6 +50,10 @@ width: 30px; height: 30px; } + +/* &.active { + background: v.$color-warning; + } */ } } @@ -241,6 +245,21 @@ } } } + + &-unread-count { + position: absolute; + right: -5px; + bottom: -5px; + width: 20px; + height: 20px; + border-radius: 50%; + background: v.$red; + color: v.$white; + display: flex; + justify-content: center; + align-items: center; + font-size: 12px; + } } .user-menu { diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index 718834a..e3ad147 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -5114,6 +5114,10 @@ &:last-child { border-bottom: none; } + + &.loading { + opacity: 0.6; + } } &-header { @@ -5127,7 +5131,7 @@ } &-title { - font-weight: 600; + font-weight: 800; font-size: 18px; margin-bottom: 4px; } @@ -5135,6 +5139,7 @@ &-text { color: v.$text-s; margin-bottom: 4px; + font-weight: 600; } &-status { @@ -5188,6 +5193,15 @@ } } } + + .notification-item.READIED { + + .notification-title, + .notification-text { + font-weight: 500; + opacity: 0.8; + } + } } &-footer { diff --git a/src/app/ui/header/notificationsButton.tsx b/src/app/ui/header/notificationsButton.tsx index aaadc8b..d2cbeba 100644 --- a/src/app/ui/header/notificationsButton.tsx +++ b/src/app/ui/header/notificationsButton.tsx @@ -8,6 +8,7 @@ import { IconNotification } from '@/app/ui/icons/icons'; import { useActiveNotifications } from '@/app/hooks/react-query/useActiveNotificationsList'; import { NotificationBody, notificationsMarkAsRead } from '@/app/actions/notificationActions'; import { useQueryClient } from '@tanstack/react-query'; +import { formatDate } from '@/app/lib/formatDate'; export default function NotificationsButton() { const [isOpen, setIsOpen] = useState(false); @@ -77,7 +78,7 @@ export default function NotificationsButton() { return (
{error ? ( @@ -118,7 +126,7 @@ export default function NotificationsButton() { >
- {item.createdAt ? item.createdAt : '#'} + {item.createdAt ? formatDate(item.createdAt) : '#'}
{/*
diff --git a/src/app/ui/notifications/notifications-list.tsx b/src/app/ui/notifications/notifications-list.tsx index 424b335..69bc082 100644 --- a/src/app/ui/notifications/notifications-list.tsx +++ b/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 (
- {item.type} + {item.type} {item.id}
-
{item.status} -
+
*/}
- {item.createdAt} + {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}