LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Augment doNotificationList to get a filtered list.

Browse source 
Initially, the filtered list was done at the component level, and the list was simply a subset of `notifications`. But due to the limit issue explained in 5694, we now query the filtered list instead.

Considerations:
- The filtered list could contain items not listed in the 'All' list. We could add a string at the bottom of 'All' that says "not all items retrieved" if this confuses the user.
- The unseen count needs to be based on 'All' and not the filtered one, so that data needs to be stashed somehow (can't re-use the array).

Use 2 arrays for now instead of trying to accumulate "all" and "filtered" into 1 array.
This commit is contained in:
infinite-persistence 2021-03-24 15:45:41 +08:00 committed by Sean Yesmunt
parent 4252db91f9
commit b8ec0c9967
3 changed files with 98 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
ui/redux/actions/notifications.js
View file

@ -3,7 +3,7 @@ import * as ACTIONS from 'constants/action_types';
import * as NOTIFICATIONS from 'constants/notifications';
import { Lbryio } from 'lbryinc';
import { v4 as uuid } from 'uuid';
import { selectNotifications } from 'redux/selectors/notifications';
import { selectNotifications, selectNotificationsFiltered } from 'redux/selectors/notifications';
import { doResolveUris } from 'lbry-redux';
export function doToast(params: ToastParams) {
@ -41,10 +41,16 @@ export function doDismissError() {
};
}
export function doNotificationList() {
export function doNotificationList(rule: string = '') {
return (dispatch: Dispatch) => {
dispatch({ type: ACTIONS.NOTIFICATION_LIST_STARTED });
return Lbryio.call('notification', 'list', { is_app_readable: true })
let params: any = { is_app_readable: true };
if (rule && rule !== NOTIFICATIONS.NOTIFICATION_RULE_NONE) {
params.type = rule;
}
return Lbryio.call('notification', 'list', params)
.then((response) => {
const notifications = response || [];
const channelsToResolve = notifications
@ -68,7 +74,13 @@ export function doNotificationList() {
});
dispatch(doResolveUris(channelsToResolve));
dispatch({ type: ACTIONS.NOTIFICATION_LIST_COMPLETED, data: { notifications } });
dispatch({
type: ACTIONS.NOTIFICATION_LIST_COMPLETED,
data: {
newNotifications: notifications,
filterRule: rule,
},
});
})
.catch((error) => {
dispatch({ type: ACTIONS.NOTIFICATION_LIST_FAILED, data: { error } });
@ -80,17 +92,20 @@ export function doReadNotifications(notificationsIds: Array<number>) {
return (dispatch: Dispatch, getState: GetState) => {
const state = getState();
const notifications = selectNotifications(state);
const unreadNotifications = notifications && notifications.filter((notification) => !notification.is_read);
const notificationsFiltered = selectNotificationsFiltered(state);
if (!notifications || !notificationsFiltered) {
return;
}
let ids;
if (notificationsIds && Array.isArray(notificationsIds) && notificationsIds.length !== 0) {
// Wipe specified notications.
ids = unreadNotifications
.filter((notification) => notificationsIds.includes(notification.id))
.map((notification) => notification.id);
// Wipe specified notifications.
ids = notificationsIds;
} else {
// A null or invalid argument will wipe all unread notifications.
ids = unreadNotifications.map((notification) => notification.id);
const getUnreadIds = (list) => list.filter((n) => !n.is_read).map((n) => n.id);
ids = [...new Set([...getUnreadIds(notifications), ...getUnreadIds(notificationsFiltered)])];
}
dispatch({ type: ACTIONS.NOTIFICATION_READ_STARTED });
@ -126,11 +141,16 @@ export function doSeeAllNotifications() {
return (dispatch: Dispatch, getState: GetState) => {
const state = getState();
const notifications = selectNotifications(state);
const unSeenNotifications =
notifications &&
notifications.filter((notification) => !notification.is_seen).map((notification) => notification.id);
const notificationsFiltered = selectNotificationsFiltered(state);
dispatch(doSeeNotifications(unSeenNotifications));
if (!notifications || !notificationsFiltered) {
return;
}
const getUnseenIds = (list) => list.filter((n) => !n.is_seen).map((n) => n.id);
const unseenIds = [...new Set([...getUnseenIds(notifications), ...getUnseenIds(notificationsFiltered)])];
dispatch(doSeeNotifications(unseenIds));
};
}

80
ui/redux/reducers/notifications.js
View file

@ -4,6 +4,7 @@ import { handleActions } from 'util/redux-utils';
const defaultState: NotificationState = {
notifications: [],
notificationsFiltered: [],
fetchingNotifications: false,
toasts: [],
errors: [],
@ -40,12 +41,20 @@ export default handleActions(
};
},
[ACTIONS.NOTIFICATION_LIST_COMPLETED]: (state, action) => {
const { notifications } = action.data;
return {
...state,
notifications,
fetchingNotifications: false,
};
const { filterRule, newNotifications } = action.data;
if (filterRule && filterRule !== '') {
return {
...state,
notificationsFiltered: newNotifications,
fetchingNotifications: false,
};
} else {
return {
...state,
notifications: newNotifications,
fetchingNotifications: false,
};
}
},
[ACTIONS.NOTIFICATION_LIST_FAILED]: (state, action) => {
return {
@ -54,20 +63,26 @@ export default handleActions(
};
},
[ACTIONS.NOTIFICATION_READ_COMPLETED]: (state, action) => {
const { notifications } = state;
const { notifications, notificationsFiltered } = state;
const { notificationIds } = action.data;
const newNotifications =
notifications &&
notifications.map((notification) => {
if (notificationIds.includes(notification.id)) {
return { ...notification, is_read: true };
} else {
return { ...notification };
}
});
const markIdsAsRead = (list, ids) => {
return (
list &&
list.map((n) => {
if (ids.includes(n.id)) {
return { ...n, is_read: true };
} else {
return { ...n };
}
})
);
};
return {
...state,
notifications: newNotifications,
notifications: markIdsAsRead(notifications, notificationIds),
notificationsFiltered: markIdsAsRead(notificationsFiltered, notificationIds),
};
},
[ACTIONS.NOTIFICATION_READ_FAILED]: (state, action) => {
@ -76,31 +91,36 @@ export default handleActions(
};
},
[ACTIONS.NOTIFICATION_SEEN_COMPLETED]: (state, action) => {
const { notifications } = state;
const { notifications, notificationsFiltered } = state;
const { notificationIds } = action.data;
const newNotifications = notifications.map((notification) => {
if (notificationIds.includes(notification.id)) {
return { ...notification, is_seen: true };
}
return notification;
});
const markIdsAsSeen = (list, ids) => {
return list.map((n) => {
if (ids.includes(n.id)) {
return { ...n, is_seen: true };
}
return n;
});
};
return {
...state,
notifications: newNotifications,
notifications: markIdsAsSeen(notifications, notificationIds),
notificationsFiltered: markIdsAsSeen(notificationsFiltered, notificationIds),
};
},
[ACTIONS.NOTIFICATION_DELETE_COMPLETED]: (state, action) => {
const { notifications } = state;
const { notifications, notificationsFiltered } = state;
const { notificationId } = action.data;
const newNotifications = notifications.filter((notification) => {
return notification.id !== notificationId;
});
const deleteId = (list, id) => {
return list.filter((n) => n.id !== id);
};
return {
...state,
notifications: newNotifications,
notifications: deleteId(notifications, notificationId),
notificationsFiltered: deleteId(notificationsFiltered, notificationId),
};
},

26
ui/redux/selectors/notifications.js
View file

@ -1,15 +1,17 @@
import { createSelector } from 'reselect';
export const selectState = state => state.notifications || {};
export const selectState = (state) => state.notifications || {};
export const selectNotifications = createSelector(selectState, state => state.notifications);
export const selectNotifications = createSelector(selectState, (state) => state.notifications);
export const makeSelectNotificationForCommentId = id =>
createSelector(selectNotifications, notifications => {
export const selectNotificationsFiltered = createSelector(selectState, (state) => state.notificationsFiltered);
export const makeSelectNotificationForCommentId = (id) =>
createSelector(selectNotifications, (notifications) => {
const match =
notifications &&
notifications.find(
n =>
(n) =>
n.notification_parameters &&
n.notification_parameters.dynamic &&
n.notification_parameters.dynamic.hash === id
@ -17,17 +19,17 @@ export const makeSelectNotificationForCommentId = id =>
return match;
});
export const selectIsFetchingNotifications = createSelector(selectState, state => state.fetchingNotifications);
export const selectIsFetchingNotifications = createSelector(selectState, (state) => state.fetchingNotifications);
export const selectUnreadNotificationCount = createSelector(selectNotifications, notifications => {
return notifications ? notifications.filter(notification => !notification.is_read).length : 0;
export const selectUnreadNotificationCount = createSelector(selectNotifications, (notifications) => {
return notifications ? notifications.filter((notification) => !notification.is_read).length : 0;
});
export const selectUnseenNotificationCount = createSelector(selectNotifications, notifications => {
return notifications ? notifications.filter(notification => !notification.is_seen).length : 0;
export const selectUnseenNotificationCount = createSelector(selectNotifications, (notifications) => {
return notifications ? notifications.filter((notification) => !notification.is_seen).length : 0;
});
export const selectToast = createSelector(selectState, state => {
export const selectToast = createSelector(selectState, (state) => {
if (state.toasts.length) {
const { id, params } = state.toasts[0];
return {
@ -39,7 +41,7 @@ export const selectToast = createSelector(selectState, state => {
return null;
});
export const selectError = createSelector(selectState, state => {
export const selectError = createSelector(selectState, (state) => {
if (state.errors.length) {
const { error } = state.errors[0];
return {