101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useRef } from 'react';
|
|
import { fetchFruits } from '@/app/actions/action';
|
|
import { useClickOutside } from '@/app/hooks/useClickOutside';
|
|
import { useTranslations } from 'next-intl';
|
|
import Link from 'next/link';
|
|
import {IconNotification} from '@/app/ui/icons/icons';
|
|
|
|
export default function NotificationsButton() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [data, setData] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const menuRef = useRef<HTMLDivElement | null>(null);
|
|
const t = useTranslations('Global');
|
|
|
|
useClickOutside(menuRef, () => {
|
|
setIsOpen(false);
|
|
});
|
|
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const result = await fetchFruits();
|
|
setData("result");
|
|
setIsOpen(true);
|
|
} catch (err) {
|
|
setError('error message');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleButtonClick = () => {
|
|
if (!isOpen) {
|
|
fetchData();
|
|
} else {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="notification-wrapper" ref={menuRef}>
|
|
<button
|
|
className="icon-btn"
|
|
id="notifications-btn"
|
|
title="Уведомления"
|
|
onClick={handleButtonClick}
|
|
>
|
|
<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: "20px", height: "20px" }}>
|
|
<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path>
|
|
</svg>
|
|
</button>
|
|
<div className={`notification-dropdown ${isOpen ? 'show' : ''}`}>
|
|
{error ? (
|
|
<div className="p-4 text-red-500">{error}</div>
|
|
) : (
|
|
<>
|
|
<div className='notification-header'>
|
|
<h4>
|
|
{t('notifications')}
|
|
</h4>
|
|
<span className="notification-count">
|
|
{t('no-new')}
|
|
</span>
|
|
</div>
|
|
{data ? (
|
|
<div className="notification-list">
|
|
<div className="notification-item">
|
|
<div className="notification-icon">
|
|
<IconNotification/>
|
|
</div>
|
|
<div className="notification-content">
|
|
<div className="notification-title">
|
|
{t('tokens-added')}
|
|
</div>
|
|
<div className="notification-text">{t('added')} 100 {t('tokens')}.</div>
|
|
<div className="notification-time">4 {t('days-ago')}</div>
|
|
</div>
|
|
</div>
|
|
{JSON.stringify(data)}
|
|
</div>
|
|
) : (
|
|
<p>
|
|
{t('no-data')}
|
|
</p>
|
|
)}
|
|
<div className="notification-footer">
|
|
<Link href="/pages/notifications" className="notification-link">
|
|
{t('view-all')}
|
|
</Link>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |