diff --git a/src/components/AppHeader/Notifications/Notifications.tsx b/src/components/AppHeader/Notifications/Notifications.tsx index 72c32b01..d86f8293 100644 --- a/src/components/AppHeader/Notifications/Notifications.tsx +++ b/src/components/AppHeader/Notifications/Notifications.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import { useHistory } from 'react-router-dom'; import { getNotification, MY_PROFILE_URL } from '@/constants'; import { api } from '@/hooks'; @@ -10,9 +10,8 @@ const Notifications = () => { const [isOpen, setIsOpen] = useState(false); const { localize } = useTranslations(); const { isDesktop, isMobile } = useDevice(); - const { data: activeAccountData } = api.account.useActiveAccount(); - const { data: notifications, subscribe } = api.notification.useGetList(); - const { mutate: updateNotification } = api.notification.useUpdate(); + const { data: notifications } = api.notification.useGetList(); + const { readAllNotifications } = api.notification.useUpdate(); const history = useHistory(); const modifiedNotifications = useMemo(() => { @@ -38,13 +37,6 @@ const Notifications = () => { }); }, [notifications]); - useEffect(() => { - if (activeAccountData) { - subscribe({}); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [activeAccountData]); - return ( <> { { - updateNotification({ ids: [], notifications_update_status: 'remove' }); + readAllNotifications(); }} componentConfig={{ clearButtonText: localize('Clear all'), diff --git a/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx b/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx index 4fcc6ca1..faa57c6f 100644 --- a/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx +++ b/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx @@ -12,7 +12,7 @@ type TDailyLimitModalProps = { const DailyLimitModal = ({ currency, isModalOpen, onRequestClose }: TDailyLimitModalProps) => { const { data, error, isPending: isLoading, isSuccess, mutate } = api.advertiser.useUpdate(); - const { mutate: updateNotification } = api.notification.useUpdate(); + const { readAllNotifications } = api.notification.useUpdate(); const { daily_buy_limit: dailyBuyLimit, daily_sell_limit: dailySellLimit } = data ?? {}; const { isDesktop } = useDevice(); const textSize = isDesktop ? 'sm' : 'md'; @@ -40,7 +40,7 @@ const DailyLimitModal = ({ currency, isModalOpen, onRequestClose }: TDailyLimitM mutate({ upgrade_limits: 1 }); //TODO: Remove this once implemented in BE - updateNotification({ ids: [], notifications_update_status: 'remove' }); + readAllNotifications(); }} size='lg' textSize={textSize} diff --git a/src/components/Modals/DailyLimitModal/__tests__/DailyLimitModal.spec.tsx b/src/components/Modals/DailyLimitModal/__tests__/DailyLimitModal.spec.tsx index ca802f9a..da96bcbd 100644 --- a/src/components/Modals/DailyLimitModal/__tests__/DailyLimitModal.spec.tsx +++ b/src/components/Modals/DailyLimitModal/__tests__/DailyLimitModal.spec.tsx @@ -22,7 +22,7 @@ jest.mock('@/hooks', () => ({ useUpdate: jest.fn(() => mockUseAdvertiserUpdate), }, notification: { - useUpdate: jest.fn(() => ({ mutate: jest.fn() })), + useUpdate: jest.fn(() => ({ readAllNotifications: jest.fn() })), }, }, })); diff --git a/src/hooks/api/notification/__tests__/useNotificationList.spec.ts b/src/hooks/api/notification/__tests__/useNotificationList.spec.ts deleted file mode 100644 index bf2a772e..00000000 --- a/src/hooks/api/notification/__tests__/useNotificationList.spec.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { renderHook } from '@testing-library/react'; -import useNotificationList from '../useNotificationList'; - -const mockNotificationListData = { - data: { - notifications_list: { - messages: [ - { - category: 'see', - id: 1, - message_key: 'p2p-limit-upgrade-available', - }, - { - category: 'see', - id: 2, - message_key: 'poi-verified', - }, - ], - }, - }, -}; - -jest.mock('@deriv-com/api-hooks', () => ({ - useSubscribe: jest.fn(() => mockNotificationListData), -})); - -describe('useNotificationList', () => { - it('should return the list of p2p-related notifications', () => { - const { result } = renderHook(() => useNotificationList()); - - expect(result.current.data).toEqual([ - { - category: 'see', - id: 1, - message_key: 'p2p-limit-upgrade-available', - }, - ]); - }); -}); diff --git a/src/hooks/api/notification/useNotificationList.ts b/src/hooks/api/notification/useNotificationList.ts index 09a7aad1..a48a1cdb 100644 --- a/src/hooks/api/notification/useNotificationList.ts +++ b/src/hooks/api/notification/useNotificationList.ts @@ -1,5 +1,4 @@ -import { useEffect, useMemo, useState } from 'react'; -import { useSubscribe } from '@deriv-com/api-hooks'; +import { useEffect, useState } from 'react'; type TNotificationLinks = { href: string; @@ -8,69 +7,54 @@ type TNotificationLinks = { type TNotification = { category: string; id: number; - links: TNotificationLinks[]; + links?: TNotificationLinks[]; message_key: string; payload: string; read: boolean; removed: boolean; }; -const handleData = (incomingMessages: TNotification[], prevMessages: TNotification[]) => { - if (!incomingMessages) return prevMessages; - - let notifications = prevMessages; - for (let updateIdx = 0; updateIdx < incomingMessages.length; updateIdx++) { - const update = incomingMessages[updateIdx]; - - const existingMessageIndex = notifications.findIndex((message: TNotification) => message.id === update.id); - const existingMessage = notifications[existingMessageIndex]; - - if (existingMessage) { - if (update.removed) - notifications = notifications.filter((message: TNotification) => message.id !== update.id); - else notifications[existingMessageIndex] = { ...existingMessage, ...update }; - } else notifications.unshift(update); - } - - notifications.sort((a: TNotification, b: TNotification) => b.id - a.id); - - return [...notifications]; -}; - /** * Hook that returns the list of notifications. * - * @example const { data: notifications } = useNotificationList(); */ const useNotificationList = () => { - // @ts-expect-error Type undefined. This endpoint will be added to api-hooks. - const { data, ...rest } = useSubscribe('notifications_list'); - const [messages, setMessages] = useState([]); - - const modified_data = useMemo(() => { - if (!messages) return undefined; - - // TODO: Remove this filter once all the notifications are implemented - const notifications = messages.filter((notification: { message_key: string }) => - ['p2p-limit-upgrade-available'].includes(notification.message_key) - ); - - return notifications; - }, [messages]); + const [notifications, setNotifications] = useState([]); useEffect(() => { - // @ts-expect-error Type undefined. - if (data?.notifications_list) { - setMessages(prevMessages => { - // @ts-expect-error Type undefined. - return handleData(data.notifications_list.messages, prevMessages); - }); - } - }, [data]); + const fetchNotifications = async () => { + try { + const response = await fetch('https://fs191x.buildship.run/v4/notification/list', { + headers: { + 'Content-Type': 'application/json', + token: localStorage.getItem('authToken') || '', + }, + method: 'GET', + }); + + if (response.ok) { + const data = await response.json(); + + // TODO: Remove this filter once all the notifications are implemented + const messages = data.filter((notification: { message_key: string }) => + ['p2p-limit-upgrade-available'].includes(notification.message_key) + ); + setNotifications(messages); + } else { + // eslint-disable-next-line no-console + console.error('Failed to fetch notifications'); + } + } catch (error) { + // eslint-disable-next-line no-console + console.error(error); + } + }; + + fetchNotifications(); + }, []); return { - data: modified_data || [], - ...rest, + data: notifications || [], }; }; diff --git a/src/hooks/api/notification/useNotificationUpdate.ts b/src/hooks/api/notification/useNotificationUpdate.ts index 8eeb47f5..e7694c89 100644 --- a/src/hooks/api/notification/useNotificationUpdate.ts +++ b/src/hooks/api/notification/useNotificationUpdate.ts @@ -1,24 +1,26 @@ -import { useMutation } from '@deriv-com/api-hooks'; - /** * Hook that updates the status of a notification. The notification can be removed or marked as read or unread. * - * @example - * const { data, mutate } = useNotificationUpdate(); - * mutate({ notifications_update_status: 'read', ids: [notification_id]}); - * mutate({ notifications_update_status: 'unread', ids: [notification_id]}); - * mutate({ notifications_update_status: 'remove', ids: []}); */ const useNotificationUpdate = () => { - const { data, ...rest } = useMutation({ - // @ts-expect-error Type undefined. This endpoint will be added to api-hooks. - name: 'notifications_update_status', - }); - + const readAllNotifications = async () => { + try { + await fetch('https://fs191x.buildship.run/v4/notification/read', { + body: JSON.stringify({ + authorize: localStorage.getItem('authToken'), + }), + headers: { + 'Content-Type': 'application/json', + }, + method: 'POST', + }); + } catch (error) { + // eslint-disable-next-line no-console + console.error(error); + } + }; return { - // @ts-expect-error Type undefined. - data: data?.notifications_update_status, - ...rest, + readAllNotifications, }; };