empty data
This commit is contained in:
hamid zarghami
@@ -4,6 +4,7 @@ import { ef } from '@/lib/helpers/utfNumbers';
|
||||
import { ArrowLeft, Trash } from 'iconsax-react';
|
||||
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 type { Notification } from './types/Types';
|
||||
@@ -30,7 +31,7 @@ const formatTime = (dateString: string): string => {
|
||||
export default function NotificationsIndex({ }: Props) {
|
||||
const { t } = useTranslation('notifications')
|
||||
const router = useRouter();
|
||||
const { data, isLoading, isError } = useGetNotifications();
|
||||
const { data, isLoading } = useGetNotifications();
|
||||
const { mutate: deleteNotification } = useDeleteNotification();
|
||||
|
||||
const notifications = React.useMemo(() => {
|
||||
@@ -41,50 +42,9 @@ export default function NotificationsIndex({ }: Props) {
|
||||
deleteNotification(id);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
|
||||
<div className='grid grid-cols-3 items-center py-4 '>
|
||||
<span></span>
|
||||
<h1 className='text-sm2 place-self-center font-medium'>{t("Heading")}</h1>
|
||||
<ArrowLeft
|
||||
className='cursor-pointer place-self-end'
|
||||
size='24'
|
||||
color='currentColor'
|
||||
onClick={() => { router.back() }}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground'>
|
||||
<span className='h-4 w-4 animate-spin rounded-full border border-dashed border-foreground border-t-transparent'></span>
|
||||
<p>در حال دریافت اعلانها...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError || !notifications.length) {
|
||||
return (
|
||||
<div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
|
||||
<div className='grid grid-cols-3 items-center py-4 '>
|
||||
<span></span>
|
||||
<h1 className='text-sm2 place-self-center font-medium'>{t("Heading")}</h1>
|
||||
<ArrowLeft
|
||||
className='cursor-pointer place-self-end'
|
||||
size='24'
|
||||
color='currentColor'
|
||||
onClick={() => { router.back() }}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground'>
|
||||
<p>اعلانی وجود ندارد</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
|
||||
<div className='grid grid-cols-3 items-center py-4 '>
|
||||
<div className='overflow-y-auto h-full noscrollbar flex flex-col'>
|
||||
<div className='grid grid-cols-3 items-center'>
|
||||
<span></span>
|
||||
<h1 className='text-sm2 place-self-center font-medium'>{t("Heading")}</h1>
|
||||
<ArrowLeft
|
||||
@@ -95,42 +55,64 @@ export default function NotificationsIndex({ }: Props) {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul className='flex flex-col gap-4 pb-20'>
|
||||
{notifications.map((notification: Notification) => {
|
||||
const isNew = !notification.sentAt;
|
||||
const formattedDate = formatDate(notification.createdAt);
|
||||
const formattedTime = formatTime(notification.createdAt);
|
||||
<div className="mt-8 flex-1 h-full">
|
||||
{isLoading ? (
|
||||
<div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground'>
|
||||
<span className='h-4 w-4 animate-spin rounded-full border border-dashed border-foreground border-t-transparent'></span>
|
||||
<p>در حال دریافت اعلانها...</p>
|
||||
</div>
|
||||
) : notifications.length === 0 ? (
|
||||
<div className='flex flex-col items-center justify-center gap-4 h-full'>
|
||||
<Image
|
||||
src='/assets/images/notification.png'
|
||||
alt='notification'
|
||||
width={120}
|
||||
height={120}
|
||||
className='object-contain'
|
||||
/>
|
||||
<div className='flex flex-col items-center gap-2 text-sm2 text-muted-foreground'>
|
||||
<p>اعلانی وجود ندارد</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ul className='flex flex-col gap-4 pb-20'>
|
||||
{notifications.map((notification: Notification) => {
|
||||
const isNew = !notification.sentAt;
|
||||
const formattedDate = formatDate(notification.createdAt);
|
||||
const formattedTime = formatTime(notification.createdAt);
|
||||
|
||||
return (
|
||||
<li key={notification.id} className='bg-container py-5 px-4 rounded-container shadow-lg'>
|
||||
<h5 className='font-medium text-sm'>{notification.title}</h5>
|
||||
<p className='text-xs mt-2 leading-5'>{notification.content}</p>
|
||||
return (
|
||||
<li key={notification.id} className='bg-container py-5 px-4 rounded-container shadow-lg'>
|
||||
<h5 className='font-medium text-sm'>{notification.title}</h5>
|
||||
<p className='text-xs mt-2 leading-5'>{notification.content}</p>
|
||||
|
||||
<div className='flex items-center justify-between mt-5 '>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
{isNew && (
|
||||
<span className='px-4 pt-1 pb-0.5 text-xs bg-primary text-white rounded-md'>
|
||||
{t('Tags.New')}
|
||||
</span>
|
||||
)}
|
||||
<span className='text-disabled2 text-xs pt-0.5'>
|
||||
{ef(formattedDate)}
|
||||
</span>
|
||||
<span className='size-1.5 bg-disabled rounded-full'></span>
|
||||
<span className='text-disabled2 text-xs pt-0.5'>
|
||||
{ef(formattedTime)}
|
||||
</span>
|
||||
</div>
|
||||
<Trash
|
||||
size={24}
|
||||
className='stroke-primary dark:stroke-foreground cursor-pointer'
|
||||
onClick={() => handleDelete(notification.id)}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<div className='flex items-center justify-between mt-5 '>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
{isNew && (
|
||||
<span className='px-4 pt-1 pb-0.5 text-xs bg-primary text-white rounded-md'>
|
||||
{t('Tags.New')}
|
||||
</span>
|
||||
)}
|
||||
<span className='text-disabled2 text-xs pt-0.5'>
|
||||
{ef(formattedDate)}
|
||||
</span>
|
||||
<span className='size-1.5 bg-disabled rounded-full'></span>
|
||||
<span className='text-disabled2 text-xs pt-0.5'>
|
||||
{ef(formattedTime)}
|
||||
</span>
|
||||
</div>
|
||||
<Trash
|
||||
size={24}
|
||||
className='stroke-primary dark:stroke-foreground cursor-pointer'
|
||||
onClick={() => handleDelete(notification.id)}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user