97 lines
3.0 KiB
TypeScript
Executable File
97 lines
3.0 KiB
TypeScript
Executable File
import {NotificationList} from './notification-list';
|
|
import {useUserNotifications} from './dialog/requests/user-notifications';
|
|
import {ProgressCircle} from '../ui/progress/progress-circle';
|
|
import {NotificationEmptyStateMessage} from './empty-state/notification-empty-state-message';
|
|
import {Navbar} from '../ui/navigation/navbar/navbar';
|
|
import {Trans} from '../i18n/trans';
|
|
import {useMarkNotificationsAsRead} from './requests/use-mark-notifications-as-read';
|
|
import {useAuth} from '../auth/use-auth';
|
|
import {Button} from '../ui/buttons/button';
|
|
import {DoneAllIcon} from '../icons/material/DoneAll';
|
|
import {StaticPageTitle} from '../seo/static-page-title';
|
|
import {Fragment} from 'react';
|
|
import {Footer} from '@common/ui/footer/footer';
|
|
import {IconButton} from '@common/ui/buttons/icon-button';
|
|
import {Link} from 'react-router-dom';
|
|
import {SettingsIcon} from '@common/icons/material/Settings';
|
|
import {useSettings} from '@common/core/settings/use-settings';
|
|
|
|
export function NotificationsPage() {
|
|
const {user} = useAuth();
|
|
const {data, isLoading} = useUserNotifications({perPage: 30});
|
|
const hasUnread = !!user?.unread_notifications_count;
|
|
const markAsRead = useMarkNotificationsAsRead();
|
|
const {notif} = useSettings();
|
|
|
|
const handleMarkAsRead = () => {
|
|
if (!data) return;
|
|
markAsRead.mutate({
|
|
markAllAsUnread: true,
|
|
});
|
|
};
|
|
|
|
const markAsReadButton = (
|
|
<Button
|
|
variant="outline"
|
|
color="primary"
|
|
size="xs"
|
|
startIcon={<DoneAllIcon />}
|
|
onClick={handleMarkAsRead}
|
|
disabled={markAsRead.isPending || isLoading}
|
|
className="ml-auto"
|
|
>
|
|
<Trans message="Mark all as read" />
|
|
</Button>
|
|
);
|
|
|
|
return (
|
|
<Fragment>
|
|
<StaticPageTitle>
|
|
<Trans message="Notifications" />
|
|
</StaticPageTitle>
|
|
<Navbar menuPosition="notifications-page" />
|
|
<div className="container mx-auto min-h-[1000px] p-16 md:p-24">
|
|
<div className="mb-30 flex items-center gap-24">
|
|
<h1 className="text-3xl">
|
|
<Trans message="Notifications" />
|
|
</h1>
|
|
{hasUnread && markAsReadButton}
|
|
{notif.subs.integrated && (
|
|
<IconButton
|
|
className="ml-auto text-muted"
|
|
elementType={Link}
|
|
to="/notifications/settings"
|
|
target="_blank"
|
|
>
|
|
<SettingsIcon />
|
|
</IconButton>
|
|
)}
|
|
</div>
|
|
<PageContent />
|
|
</div>
|
|
<Footer className="container mx-auto mt-48 p-16 md:p-24" />
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
function PageContent() {
|
|
const {data, isLoading} = useUserNotifications({perPage: 30});
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-10">
|
|
<ProgressCircle aria-label="Loading notifications..." isIndeterminate />
|
|
</div>
|
|
);
|
|
}
|
|
if (!data?.pagination.data.length) {
|
|
return <NotificationEmptyStateMessage />;
|
|
}
|
|
return (
|
|
<NotificationList
|
|
className="rounded border"
|
|
notifications={data.pagination.data}
|
|
/>
|
|
);
|
|
}
|