diff --git a/public/assets/images/readall.png b/public/assets/images/readall.png new file mode 100644 index 0000000..1b21a52 Binary files /dev/null and b/public/assets/images/readall.png differ diff --git a/src/app/[name]/(Dialogs)/notifications/hooks/useNotificationData.ts b/src/app/[name]/(Dialogs)/notifications/hooks/useNotificationData.ts index 48c7cea..6092672 100644 --- a/src/app/[name]/(Dialogs)/notifications/hooks/useNotificationData.ts +++ b/src/app/[name]/(Dialogs)/notifications/hooks/useNotificationData.ts @@ -17,3 +17,14 @@ export const useDeleteNotification = () => { }, }); }; + +export const useReadAllNotifications = () => { + const queryClient = useQueryClient(); + return useMutation({ + mutationFn: api.readAll, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["notifications"] }); + queryClient.invalidateQueries({ queryKey: ["notificationsCount"] }); + }, + }); +}; diff --git a/src/app/[name]/(Dialogs)/notifications/page.tsx b/src/app/[name]/(Dialogs)/notifications/page.tsx index 11e2edf..da33b31 100644 --- a/src/app/[name]/(Dialogs)/notifications/page.tsx +++ b/src/app/[name]/(Dialogs)/notifications/page.tsx @@ -6,8 +6,10 @@ import { useRouter } from 'next/navigation'; import React from 'react' import Image from 'next/image'; import { useTranslation } from 'react-i18next'; -import { useGetNotifications, useDeleteNotification } from './hooks/useNotificationData'; +import { useGetNotifications, useDeleteNotification, useReadAllNotifications } from './hooks/useNotificationData'; import type { Notification } from './types/Types'; +import { useGetNotificationsCount } from '../../(Main)/hooks/useMenuData'; +import Prompt from '@/components/utils/Prompt'; type Props = object @@ -33,6 +35,9 @@ export default function NotificationsIndex({ }: Props) { const router = useRouter(); const { data, isLoading } = useGetNotifications(); const { mutate: deleteNotification } = useDeleteNotification(); + const { mutate: readAllNotifications } = useReadAllNotifications(); + const { data: notificationsCount } = useGetNotificationsCount(); + const [showReadAllConfirm, setShowReadAllConfirm] = React.useState(false); const notifications = React.useMemo(() => { return data?.data ?? []; @@ -42,6 +47,23 @@ export default function NotificationsIndex({ }: Props) { deleteNotification(id); }; + const handleReadAll = (e: React.MouseEvent) => { + e?.preventDefault(); + e?.stopPropagation(); + readAllNotifications(); + setShowReadAllConfirm(false); + }; + + const toggleReadAllConfirm = (e: React.MouseEvent) => { + e?.preventDefault(); + e?.stopPropagation(); + setShowReadAllConfirm(false); + }; + + const handleReadAllClick = () => { + setShowReadAllConfirm(true); + }; + return (
{notification.content}