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 (
@@ -55,6 +77,9 @@ export default function NotificationsIndex({ }: Props) { />
+
+
+
{isLoading ? (
@@ -75,7 +100,15 @@ export default function NotificationsIndex({ }: Props) {
) : ( -
); @@ -113,6 +141,19 @@ export default function NotificationsIndex({ }: Props) { )} + +
+ +
) } \ No newline at end of file diff --git a/src/app/[name]/(Dialogs)/notifications/service/NotificationService.ts b/src/app/[name]/(Dialogs)/notifications/service/NotificationService.ts index 3d668c7..097710d 100644 --- a/src/app/[name]/(Dialogs)/notifications/service/NotificationService.ts +++ b/src/app/[name]/(Dialogs)/notifications/service/NotificationService.ts @@ -4,7 +4,7 @@ import { BaseResponse } from "@/app/[name]/(Main)/types/Types"; export const getNotifications = async (): Promise => { const { data } = await api.get( - "/public/notifications" + "/public/notifications?status=unseen" ); return data; }; @@ -17,3 +17,8 @@ export const deleteNotification = async ( ); return data; }; + +export const readAll = async () => { + const { data } = await api.put("/public/notifications/read/all"); + return data; +}; diff --git a/src/components/input/SearchBox.tsx b/src/components/input/SearchBox.tsx index 100b1c7..c242a68 100644 --- a/src/components/input/SearchBox.tsx +++ b/src/components/input/SearchBox.tsx @@ -10,7 +10,7 @@ interface SearchboxProps onChange: (e: React.ChangeEvent) => void } -export default function SearchBox ({ +export default function SearchBox({ className, value, placeholder = '', @@ -29,7 +29,7 @@ export default function SearchBox ({ onChange={onChange} value={value} placeholder={placeholder} - className='text-[#8C90A3] pt-1 block outline-none border-none focus:ring-0 focus:outline-none text-sm px-[7px] h-full items-center w-full' + className='text-[#8C90A3] pt-1 block outline-none border-none focus:ring-0 focus:outline-none px-[7px] h-full items-center w-full text-xs!' type='search' {...props} />