74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import parse from 'html-react-parser';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { Fragment } from 'react';
|
|
|
|
import { Separator } from '@/components/ui/common/Separator';
|
|
import {
|
|
useFindNotificationByUserQuery,
|
|
useFindUnreadNotificationsCountQuery,
|
|
} from '@/graphql/generated/output';
|
|
import { getNotificationIcon } from '@/utils/get-notification-icon';
|
|
|
|
export const NotificationsList = () => {
|
|
const t = useTranslations(
|
|
'layout.header.headerMenu.profileMenu.notifications',
|
|
);
|
|
|
|
const { refetch } = useFindUnreadNotificationsCountQuery();
|
|
|
|
const { data, loading: isLoadingNotifications } = useFindNotificationByUserQuery({
|
|
onCompleted() {
|
|
void refetch();
|
|
},
|
|
});
|
|
const notifications = data?.findNotificationByUser ?? [];
|
|
|
|
return (
|
|
<>
|
|
<h2 className="text-center text-lg font-medium">
|
|
{t('heading')}
|
|
</h2>
|
|
|
|
<Separator className="my-3" />
|
|
|
|
{/* eslint-disable-next-line no-nested-ternary */}
|
|
{isLoadingNotifications
|
|
? (
|
|
<div className="flex items-center justify-center gap-x-2 text-sm text-foreground">
|
|
<Loader2 className="size-5 animate-spin" />
|
|
|
|
{t('loading')}
|
|
</div>
|
|
)
|
|
: notifications.length
|
|
? notifications.map((notification, index) => {
|
|
const Icon = getNotificationIcon(notification.type);
|
|
|
|
return (
|
|
<Fragment key={notification.id}>
|
|
<div className="flex items-center gap-x-3 text-sm">
|
|
<div className="rounded-full bg-foreground p-2">
|
|
<Icon className="size-6 text-secondary" />
|
|
</div>
|
|
|
|
<div>
|
|
{parse(notification.text)}
|
|
</div>
|
|
</div>
|
|
|
|
{index < notifications.length - 1 && (
|
|
<Separator className="my-3" />
|
|
)}
|
|
</Fragment>
|
|
);
|
|
})
|
|
: (
|
|
<div className="text-center text-muted-foreground">
|
|
{t('empty')}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|