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

Mostly migrate pl-fe notifications to notification groups

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-11-03 00:18:29 +01:00
parent 40c0c7512d
commit fe5653cce9
11 changed files with 301 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/pl-fe/src/features/notifications/components/notification.tsx
View File

@ -24,11 +24,9 @@ import { useModalsStore } from 'pl-fe/stores/modals';
import { useSettingsStore } from 'pl-fe/stores/settings';
import { NotificationType } from 'pl-fe/utils/notification';
import type { Notification as BaseNotification } from 'pl-api';
import type { NotificationGroup } from 'pl-api';
import type { Account } from 'pl-fe/normalizers/account';
import type { Notification as NotificationEntity } from 'pl-fe/normalizers/notification';
import type { Status as StatusEntity } from 'pl-fe/normalizers/status';
import type { MinifiedNotification } from 'pl-fe/reducers/notifications';
const notificationForScreenReader = (intl: IntlShape, message: string, timestamp: string) => {
const output = [message];
@ -184,13 +182,13 @@ const avatarSize = 48;
interface INotification {
hidden?: boolean;
notification: MinifiedNotification;
notification: NotificationGroup;
onMoveUp?: (notificationId: string) => void;
onMoveDown?: (notificationId: string) => void;
onReblog?: (status: StatusEntity, e?: KeyboardEvent) => void;
}
const getNotificationStatus = (n: NotificationEntity | BaseNotification) => {
const getNotificationStatus = (n: Pick<Exclude<ReturnType<ReturnType<typeof makeGetNotification>>, null>, 'type' | 'status'>) => {
if (['mention', 'status', 'reblog', 'favourite', 'poll', 'update', 'emoji_reaction', 'event_reminder', 'participation_accepted', 'participation_request'].includes(n.type))
// @ts-ignore
return n.status;
@ -207,15 +205,17 @@ const Notification: React.FC<INotification> = (props) => {
const { me } = useLoggedIn();
const { openModal } = useModalsStore();
const { settings } = useSettingsStore();
const notification = useAppSelector((state) => getNotification(state, props.notification));
const status = getNotificationStatus(notification);
const history = useHistory();
const intl = useIntl();
const instance = useInstance();
const type = notification.type;
const { account, accounts } = notification;
const status = getNotificationStatus(notification);
const { accounts } = notification;
const account = accounts[0];
const getHandlers = () => ({
reply: handleMention,
@ -289,13 +289,13 @@ const Notification: React.FC<INotification> = (props) => {
const handleMoveUp = () => {
if (onMoveUp) {
onMoveUp(notification.id);
onMoveUp(notification.group_key);
}
};
const handleMoveDown = () => {
if (onMoveDown) {
onMoveDown(notification.id);
onMoveDown(notification.group_key);
}
};
@ -393,7 +393,7 @@ const Notification: React.FC<INotification> = (props) => {
name: account && typeof account === 'object' ? account.acct : '',
targetName,
}),
notification.created_at,
notification.latest_page_notification_at!,
)
);
@ -433,7 +433,7 @@ const Notification: React.FC<INotification> = (props) => {
truncate
data-testid='message'
>
<RelativeTimestamp timestamp={notification.created_at} theme='muted' size='sm' className='whitespace-nowrap' />
<RelativeTimestamp timestamp={notification.latest_page_notification_at!} theme='muted' size='sm' className='whitespace-nowrap' />
</Text>
</div>
)}

17
packages/pl-fe/src/features/notifications/index.tsx
View File

@ -32,7 +32,7 @@ const messages = defineMessages({
const getNotifications = createSelector([
(state: RootState) => state.notifications.items.toList(),
], (notifications) => notifications.filter(item => item !== null && !item.duplicate));
], (notifications) => notifications.filter(item => item !== null));
const Notifications = () => {
const dispatch = useAppDispatch();
@ -54,8 +54,13 @@ const Notifications = () => {
// };
const handleLoadOlder = useCallback(debounce(() => {
const last = notifications.last();
dispatch(expandNotifications({ maxId: last && last.id }));
const minId = notifications.reduce<string | undefined>(
(minId, notification) => minId && notification.page_min_id && notification.page_min_id > minId
? minId
: notification.page_min_id,
undefined,
);
dispatch(expandNotifications({ maxId: minId }));
}, 300, { leading: true }), [notifications]);
const handleScroll = useCallback(debounce((startIndex?: number) => {
@ -63,12 +68,12 @@ const Notifications = () => {
}, 100), []);
const handleMoveUp = (id: string) => {
const elementIndex = notifications.findIndex(item => item !== null && item.id === id) - 1;
const elementIndex = notifications.findIndex(item => item !== null && item.group_key === id) - 1;
_selectChild(elementIndex);
};
const handleMoveDown = (id: string) => {
const elementIndex = notifications.findIndex(item => item !== null && item.id === id) + 1;
const elementIndex = notifications.findIndex(item => item !== null && item.group_key === id) + 1;
_selectChild(elementIndex);
};
@ -111,7 +116,7 @@ const Notifications = () => {
} else if (notifications.size > 0 || hasMore) {
scrollableContent = notifications.map((item) => (
<Notification
key={item.id}
key={item.group_key}
notification={item}
onMoveUp={handleMoveUp}
onMoveDown={handleMoveDown}