no-copy-frontend/src/app/ui/notifications/notifications-list.tsx

'use client'

import { useTranslations } from 'next-intl';
import { IconCheck } from '@/app/ui/icons/icons';
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<number>>(new Set());
	const { data: allNotifications } = useAllNotifications();

	useEffect(() => {
		console.log(allNotifications);
	}, [allNotifications])

	function selectHandler(fileId: number) {
		setSelectedFiles((prev) => {
			const newSet = new Set(prev);

			if (newSet.has(fileId)) {
				newSet.delete(fileId)
			} else {
				newSet.add(fileId)
			}
			return newSet;
		});
	}

	function clearHandler() {
		setSelectedFiles(new Set());
	}

	function selectAllHandler() {
		setSelectedFiles(new Set(allNotifications?.notifications.map(item => item.id)));
	}

	return (
		<div
			className="notifications-list-wrapper"
		>
			<div
				className="notifications-list-header"
			>
				<h4>
					{t('all-notifications')}
				</h4>

				<div
					className="notifications-list-action"
				>
					{(selectedFiles.size !== 0) && (
						<>
							<button
								className="btn btn-primary"
								onClick={() => {
									clearHandler();
								}}
							>
								{t('deselect')}
							</button>

							<button
								className="btn btn-primary"
								onClick={() => {
									clearHandler();
								}}
							>
								{t('mark-all-as-read')}
							</button>
						</>
					)}
					<button
						className="btn btn-primary"
						onClick={() => {
							selectAllHandler();
						}}
					>
						{t('select-all')}
					</button>
				</div>
			</div>
			<div
				className="notifications-list-body"
			>
				{(allNotifications?.notifications.length !== 0) && (
					allNotifications?.notifications.map(item => {
						return (
							<div
								className="notification-item"
								key={item.id}
							>
								<div
									className="notification-check"
								>
									<button
										onClick={() => {
											selectHandler(item.id);
										}}
									>
										{selectedFiles.has(item.id) && (
											<IconCheck />
										)}
									</button>
								</div>

								<div
									className="notification-body"
								>
									<div
										className="notification-header"
									>
										<div
											className="notification-title"
										>
											{item.type}
										</div>
										<div
											className="notification-status"
										>
											{item.status}
										</div>
									</div>
									<div
										className="notification-text"
									>
										{item.message}
									</div>
									<div
										className="notification-footer"
									>
										<div
											className="notification-date"
										>
											{item.createdAt}
										</div>

										<button
											className="btn btn-remove"
										>
											{t('remove')}
										</button>
									</div>
								</div>
							</div>
						)
					})
				)}
			</div>
		</div>
	)
}