first commit

common/resources/client/notifications/notifications-page.tsx

@@ -0,0 +1,96 @@
+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}
+    />
+  );
+}