diff --git a/txclient/src/app/components/Header/Header.tsx b/txclient/src/app/components/Header/Header.tsx index b083d1f..213d51e 100644 --- a/txclient/src/app/components/Header/Header.tsx +++ b/txclient/src/app/components/Header/Header.tsx @@ -21,6 +21,7 @@ import { } from "@core/Models/SystemNotifications.model"; import { findSystemNotifications, + setStateNotificationByUser, updateSystemNotification, } from "@core/app/user/profile/notifications/Notifications.Service"; import { @@ -214,6 +215,29 @@ export default function Header(): React.ReactElement { goTo(NOTIFICATIONS_ROUTE); }; + const markNotificationsAsRead = async () => { + if (!SessionInfo.userId || headerState.notificationsCount === 0) { + return; + } + + try { + await setStateNotificationByUser({ + state: true, + sessionUser: SessionInfo.userId, + }); + + setNotifications((currentNotifications) => + currentNotifications.map((notification) => ({ + ...notification, + readed: true, + })) + ); + headerState.setNotificationsCount(0); + } catch (error) { + console.error("Error marking notifications as read", error); + } + }; + const openNotification = async (notification: ISystemNotification) => { setNotificationsOpen(false); @@ -392,13 +416,23 @@ export default function Header(): React.ReactElement { ))} - +
+ + +
)} diff --git a/txclient/src/app/components/Header/header.module.css b/txclient/src/app/components/Header/header.module.css index 4c49d2a..88cc9b9 100644 --- a/txclient/src/app/components/Header/header.module.css +++ b/txclient/src/app/components/Header/header.module.css @@ -185,11 +185,16 @@ font-weight: 600; } +.notificationsFooterActions { + display: flex; + border-top: 1px solid var(--gray-lighter); + background: var(--white); +} + .notificationsFooter { width: 100%; padding: 14px 18px; border: 0; - border-top: 1px solid var(--gray-lighter); background: var(--white); color: var(--wine-dark); cursor: pointer; @@ -198,11 +203,21 @@ transition: background-color 0.18s ease, color 0.18s ease; } -.notificationsFooter:hover { +.notificationsFooter + .notificationsFooter { + border-left: 1px solid var(--gray-lighter); +} + +.notificationsFooter:hover:not(:disabled) { background: var(--wine-lighterX2); color: var(--wine-darkest); } +.notificationsFooter:disabled { + color: var(--gray-dark); + cursor: default; + opacity: 0.65; +} + @media (max-width: 600px) { .header { padding-left: 18px; @@ -212,4 +227,13 @@ .notificationsMenu { right: -48px; } + + .notificationsFooterActions { + flex-direction: column; + } + + .notificationsFooter + .notificationsFooter { + border-left: 0; + border-top: 1px solid var(--gray-lighter); + } }