From 62c062679e6dcb3dae6f1e9a757c35ae7771965b Mon Sep 17 00:00:00 2001 From: Vladislav Date: Sun, 18 Jan 2026 21:39:36 +0300 Subject: [PATCH] feat(100): added buttons actions on toast --- apps/xi.web/src/providers/RouterWithAuth.tsx | 6 +-- .../src/notifications/index.ts | 10 ++-- ...eNotifications.ts => useNotifications.tsx} | 50 +++++++++++++++++-- 3 files changed, 53 insertions(+), 13 deletions(-) rename packages/common.services/src/notifications/{useNotifications.ts => useNotifications.tsx} (88%) diff --git a/apps/xi.web/src/providers/RouterWithAuth.tsx b/apps/xi.web/src/providers/RouterWithAuth.tsx index 9325d755..d3ef089a 100644 --- a/apps/xi.web/src/providers/RouterWithAuth.tsx +++ b/apps/xi.web/src/providers/RouterWithAuth.tsx @@ -1,10 +1,10 @@ import { RouterProvider } from '@tanstack/react-router'; import { AuthProvider, useAuth } from 'common.auth'; +import { NetworkProvider, NotificationsProvider } from 'common.services'; import { ThemeProvider } from 'common.theme'; -import { NotificationsProvider, NetworkProvider } from 'common.services'; +import { Toaster } from 'sonner'; import { router } from '../router'; import { AuthSocketBridge } from './AuthSocketBridge'; -import { Toaster } from 'sonner'; const RouterWithAuthContext = () => { const auth = useAuth(); @@ -20,7 +20,7 @@ export const RouterWithAuth = () => { - + diff --git a/packages/common.services/src/notifications/index.ts b/packages/common.services/src/notifications/index.ts index a38a7ac8..f9c70250 100644 --- a/packages/common.services/src/notifications/index.ts +++ b/packages/common.services/src/notifications/index.ts @@ -1,10 +1,10 @@ -export { useGetNotificationsStatus } from './useGetNotificationsStatus'; +export { NotificationsProvider, useNotificationsContext } from './NotificationsProvider'; +export * from './notificationUtils'; +export { useChangeContactsVisibility } from './useChangeContactsVisibility'; export { useCreateTgConnection } from './useCreateTgConnection'; export { useDeleteTgConnection } from './useDeleteTgConnection'; -export { useChangeContactsVisibility } from './useChangeContactsVisibility'; -export { useSearchNotifications } from './useSearchNotifications'; +export { useGetNotificationsStatus } from './useGetNotificationsStatus'; export { useGetUnreadCount } from './useGetUnreadCount'; export { useMarkNotificationAsRead } from './useMarkNotificationAsRead'; export { useNotifications } from './useNotifications'; -export { NotificationsProvider, useNotificationsContext } from './NotificationsProvider'; -export * from './notificationUtils'; +export { useSearchNotifications } from './useSearchNotifications'; diff --git a/packages/common.services/src/notifications/useNotifications.ts b/packages/common.services/src/notifications/useNotifications.tsx similarity index 88% rename from packages/common.services/src/notifications/useNotifications.ts rename to packages/common.services/src/notifications/useNotifications.tsx index e7c4b8fb..0c90548c 100644 --- a/packages/common.services/src/notifications/useNotifications.ts +++ b/packages/common.services/src/notifications/useNotifications.tsx @@ -1,20 +1,25 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { useState, useCallback, useEffect, useMemo } from 'react'; import { useQueryClient } from '@tanstack/react-query'; -import { toast } from 'sonner'; +import { Button } from '@xipkg/button'; import { useSocketEvent } from 'common.sockets'; import { NotificationT, NotificationsStateT, RecipientNotificationResponse } from 'common.types'; +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { toast } from 'sonner'; +import { useCurrentUser } from '../user'; +import { notificationConfigs } from './notificationConfig'; import { - generateNotificationTitle, + generateNotificationAction, generateNotificationDescription, + generateNotificationTitle, getNotificationInvalidationKeys, } from './notificationUtils'; -import { useSearchNotifications } from './useSearchNotifications'; import { useGetUnreadCount } from './useGetUnreadCount'; import { useMarkNotificationAsRead } from './useMarkNotificationAsRead'; -import { useCurrentUser } from '../user'; +import { useSearchNotifications } from './useSearchNotifications'; export const useNotifications = () => { + // const navigate = useNavigate(); + const [socketNotifications, setSocketNotifications] = useState([]); const [shouldLoadNotifications, setShouldLoadNotifications] = useState(false); const queryClient = useQueryClient(); @@ -79,6 +84,22 @@ export const useNotifications = () => { [], ); + // Обработчик навигации по URL из уведомления + const onNavigate = useCallback((url: string) => { + try { + // Проверяем, является ли URL относительным путем или полным URL + if (url.startsWith('http://') || url.startsWith('https://')) { + // Внешняя ссылка - открываем в новой вкладке + window.open(url, '_blank', 'noopener,noreferrer'); + } else { + // Внутренняя навигация - используем window.location.href + window.location.href = url; + } + } catch (error) { + console.error('Ошибка при навигации:', error); + } + }, []); + // Обработчик нового уведомления от SocketIO const handleNewNotification = useCallback( (data: NotificationT | RecipientNotificationResponse) => { @@ -107,9 +128,28 @@ export const useNotifications = () => { const title = generateNotificationTitle(notification); const description = generateNotificationDescription(notification); + const { kind } = notification.payload; + const config = notificationConfigs[kind]; + toast(title, { description, duration: 5000, + action: config && ( + + ), }); }, [refetchCount, transformNotification, queryClient],