finished header notifications

src/app/ui/notifications/notifications-list.tsx

@@ -2,65 +2,19 @@
 
 import { useTranslations } from 'next-intl';
 import { IconCheck } from '@/app/ui/icons/icons';
-import { useState } from 'react';
-
-interface Notification {
-	id: string,
-	notificationText: string,
-	data: string,
-	link: string,
-	title: string,
-	status: string,
-}
-
-const noitficationList: Notification[] = [
-	{
-		id: '1',
-		notificationText: 'text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1',
-		data: '20.20.20',
-		link: '#',
-		title: 'title 1',
-		status: 'status'
-	},
-	{
-		id: '2',
-		notificationText: 'text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 ',
-		data: '20.20.20',
-		link: '#',
-		title: 'title 2',
-		status: 'status'
-	},
-	{
-		id: '3',
-		notificationText: 'text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 ',
-		data: '20.20.20',
-		link: '#',
-		title: 'title 3',
-		status: 'status'
-	},
-	{
-		id: '4',
-		notificationText: 'text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 ',
-		data: '20.20.20',
-		link: '#',
-		title: 'title 4',
-		status: 'status'
-	},
-	{
-		id: '5',
-		notificationText: 'text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 ',
-		data: '20.20.20',
-		link: '#',
-		title: 'title 5',
-		status: 'status'
-	}
-];
+import { useEffect, useState } from 'react';
+import { useAllNotifications } from '@/app/hooks/react-query/useAllNotificationsList';
 
 export function NotificationsList() {
 	const t = useTranslations('Global');
-	const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
+	const [selectedFiles, setSelectedFiles] = useState<Set<number>>(new Set());
+	const { data: allNotifications } = useAllNotifications();
 
-	function selectHandler(fileId: string) {
+	useEffect(() => {
+		console.log(allNotifications);
+	}, [allNotifications])
+
+	function selectHandler(fileId: number) {
 		setSelectedFiles((prev) => {
 			const newSet = new Set(prev);
 
@@ -78,7 +32,7 @@ export function NotificationsList() {
 	}
 
 	function selectAllHandler() {
-		setSelectedFiles(new Set(noitficationList.map(item => item.id)));
+		setSelectedFiles(new Set(allNotifications?.notifications.map(item => item.id)));
 	}
 
 	return (
@@ -129,8 +83,8 @@ export function NotificationsList() {
 			<div
 				className="notifications-list-body"
 			>
-				{(noitficationList.length !== 0) && (
-					noitficationList.map(item => {
+				{(allNotifications?.notifications.length !== 0) && (
+					allNotifications?.notifications.map(item => {
 						return (
 							<div
 								className="notification-item"
@@ -159,7 +113,7 @@ export function NotificationsList() {
 										<div
 											className="notification-title"
 										>
-											{item.title}
+											{item.type}
 										</div>
 										<div
 											className="notification-status"
@@ -170,7 +124,7 @@ export function NotificationsList() {
 									<div
 										className="notification-text"
 									>
-										{item.notificationText}
+										{item.message}
 									</div>
 									<div
 										className="notification-footer"
@@ -178,7 +132,7 @@ export function NotificationsList() {
 										<div
 											className="notification-date"
 										>
-											{item.data}
+											{item.createdAt}
 										</div>
 
 										<button