matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

?

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-07-04 23:51:24 +02:00
parent f673710eb4
commit 63dbfe5610
2 changed files with 12 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/pl-fe/src/columns/notifications.tsx
View File

@ -12,8 +12,10 @@ import {
setFilter,
} from 'pl-fe/actions/notifications';
import PullToRefresh from 'pl-fe/components/pull-to-refresh';
import ScrollTopButton from 'pl-fe/components/scroll-top-button';
import ScrollableList from 'pl-fe/components/scrollable-list';
import Icon from 'pl-fe/components/ui/icon';
import Portal from 'pl-fe/components/ui/portal';
import Tabs from 'pl-fe/components/ui/tabs';
import Notification from 'pl-fe/features/notifications/components/notification';
import PlaceholderNotification from 'pl-fe/features/placeholder/components/placeholder-notification';
@ -148,7 +150,7 @@ const NotificationsColumn = () => {
const showFilterBar = (features.notificationsExcludeTypes || features.notificationsIncludeTypes) && settings.notifications.quickFilter.show;
const activeFilter = settings.notifications.quickFilter.active;
const [topNotification, setTopNotification] = useState<string>();
const { displayedNotifications } = useAppSelector(state => getNotifications(state, topNotification));
const { queuedNotificationCount, displayedNotifications } = useAppSelector(state => getNotifications(state, topNotification));
const isLoading = useAppSelector(state => state.notifications.isLoading);
// const isUnread = useAppSelector(state => state.notifications.unread > 0);
const hasMore = useAppSelector(state => state.notifications.hasMore);
@ -279,6 +281,14 @@ const NotificationsColumn = () => {
<>
{filterBarContainer}
<Portal>
<ScrollTopButton
onClick={handleDequeueNotifications}
count={queuedNotificationCount}
message={messages.queue}
/>
</Portal>
<PullToRefresh onRefresh={handleRefresh}>
{scrollContainer}
</PullToRefresh>

54
packages/pl-fe/src/pages/notifications/notifications.tsx
View File

@ -1,76 +1,24 @@
import React, { useCallback, useEffect, useState } from 'react';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { createSelector } from 'reselect';
import { markReadNotifications } from 'pl-fe/actions/notifications';
import NotificationsColumn from 'pl-fe/columns/notifications';
import ScrollTopButton from 'pl-fe/components/scroll-top-button';
import Column from 'pl-fe/components/ui/column';
import Portal from 'pl-fe/components/ui/portal';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { useSettings } from 'pl-fe/hooks/use-settings';
import type { RootState } from 'pl-fe/store';
const messages = defineMessages({
title: { id: 'column.notifications', defaultMessage: 'Notifications' },
queue: { id: 'notifications.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {notification} other {notifications}}' },
});
const getNotifications = createSelector([
(state: RootState) => state.notifications.items,
(_, topNotification?: string) => topNotification,
], (notifications, topNotificationId) => {
if (topNotificationId) {
const queuedNotificationCount = notifications.findIndex((notification) =>
notification.most_recent_notification_id <= topNotificationId,
);
const displayedNotifications = notifications.slice(queuedNotificationCount);
return {
queuedNotificationCount,
displayedNotifications,
};
}
return {
queuedNotificationCount: 0,
displayedNotifications: notifications,
};
});
const NotificationsPage = () => {
const dispatch = useAppDispatch();
const features = useFeatures();
const intl = useIntl();
const settings = useSettings();
const showFilterBar = (features.notificationsExcludeTypes || features.notificationsIncludeTypes) && settings.notifications.quickFilter.show;
const [topNotification, setTopNotification] = useState<string>();
const { queuedNotificationCount, displayedNotifications } = useAppSelector(state => getNotifications(state, topNotification));
const handleDequeueNotifications = useCallback(() => {
setTopNotification(undefined);
dispatch(markReadNotifications());
}, []);
useEffect(() => {
if (topNotification || displayedNotifications.length === 0) return;
setTopNotification(displayedNotifications[0].most_recent_notification_id);
}, [displayedNotifications.length]);
return (
<Column label={intl.formatMessage(messages.title)} withHeader={!showFilterBar}>
<Portal>
<ScrollTopButton
onClick={handleDequeueNotifications}
count={queuedNotificationCount}
message={messages.queue}
/>
</Portal>
<NotificationsColumn />
</Column>
);