Update GUI to use queried notification filter.
- Re-organize the return statement of 'NotificationsPage' a bit, otherwise the entire page will reload (blink) every time the drop-down value is changed due to the 'fetching' flag. - Retained the original behavior of (only showing a blank page + spinner) on the very first load. I think there is merit in not showing the buttons immediately (e.g. when not logged in and `/$/notifications` is accessed directly).
This commit is contained in:
infinite-persistence
Sean Yesmunt
parent
b8ec0c9967
commit
3bab4feeca
3 changed files with 105 additions and 95 deletions
|
|
@ -1358,8 +1358,8 @@
|
|||
"Terms": "Terms",
|
||||
"Privacy Policy": "Privacy Policy",
|
||||
"Comment replies": "Comment replies",
|
||||
"Daily watch availability": "Daily watch availability",
|
||||
"Daily watch reminders": "Daily watch reminders",
|
||||
"Replies": "Replies",
|
||||
"Others": "Others",
|
||||
"New content": "New content",
|
||||
"No notifications": "No notifications",
|
||||
"Try selecting another filter.": "Try selecting another filter.",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { connect } from 'react-redux';
|
||||
import {
|
||||
selectNotifications,
|
||||
selectNotificationsFiltered,
|
||||
selectIsFetchingNotifications,
|
||||
selectUnreadNotificationCount,
|
||||
selectUnseenNotificationCount,
|
||||
|
|
@ -8,8 +9,9 @@ import {
|
|||
import { doReadNotifications, doNotificationList, doSeeAllNotifications } from 'redux/actions/notifications';
|
||||
import NotificationsPage from './view';
|
||||
|
||||
const select = state => ({
|
||||
const select = (state) => ({
|
||||
notifications: selectNotifications(state),
|
||||
notificationsFiltered: selectNotificationsFiltered(state),
|
||||
fetching: selectIsFetchingNotifications(state),
|
||||
unreadCount: selectUnreadNotificationCount(state),
|
||||
unseenCount: selectUnseenNotificationCount(state),
|
||||
|
|
|
|||
|
|
@ -9,64 +9,68 @@ import Button from 'component/button';
|
|||
import usePersistedState from 'effects/use-persisted-state';
|
||||
import Yrbl from 'component/yrbl';
|
||||
import * as NOTIFICATIONS from 'constants/notifications';
|
||||
import useFetched from 'effects/use-fetched';
|
||||
|
||||
const RULE_LABELS = {
|
||||
[NOTIFICATIONS.NOTIFICATION_RULE_NONE]: 'All',
|
||||
[NOTIFICATIONS.NOTIFICATION_RULE_COMMENTS]: 'Comments',
|
||||
[NOTIFICATIONS.NOTIFICATION_RULE_REPLIES]: 'Replies',
|
||||
[NOTIFICATIONS.NOTIFICATION_RULE_FOLLOWERS]: 'Followers',
|
||||
[NOTIFICATIONS.NOTIFICATION_RULE_NEW_CONTENT]: 'New content',
|
||||
[NOTIFICATIONS.NOTIFICATION_RULE_OTHERS]: 'Others',
|
||||
};
|
||||
|
||||
type Props = {
|
||||
notifications: Array<Notification>,
|
||||
notificationsFiltered: Array<Notification>,
|
||||
fetching: boolean,
|
||||
unreadCount: number,
|
||||
unseenCount: number,
|
||||
doSeeAllNotifications: () => void,
|
||||
doReadNotifications: () => void,
|
||||
doNotificationList: (string) => void,
|
||||
};
|
||||
|
||||
const ALL_NOTIFICATIONS = 'all';
|
||||
|
||||
export default function NotificationsPage(props: Props) {
|
||||
const { notifications, fetching, unreadCount, unseenCount, doSeeAllNotifications, doReadNotifications } = props;
|
||||
const hasNotifications = notifications.length > 0;
|
||||
const [filterBy, setFilterBy] = usePersistedState('notifications--filter-by', 'all');
|
||||
const [filteredNotifications, setFilteredNotifications] = React.useState(notifications);
|
||||
const isFiltered = filterBy !== ALL_NOTIFICATIONS;
|
||||
const {
|
||||
notifications,
|
||||
notificationsFiltered,
|
||||
fetching,
|
||||
unreadCount,
|
||||
unseenCount,
|
||||
doSeeAllNotifications,
|
||||
doReadNotifications,
|
||||
doNotificationList,
|
||||
} = props;
|
||||
|
||||
const NOTIFICATION_FILTER_TYPES = [
|
||||
ALL_NOTIFICATIONS,
|
||||
NOTIFICATIONS.NOTIFICATION_CREATOR_SUBSCRIBER,
|
||||
NOTIFICATIONS.NOTIFICATION_COMMENT,
|
||||
NOTIFICATIONS.NOTIFICATION_REPLY,
|
||||
NOTIFICATIONS.DAILY_WATCH_AVAILABLE,
|
||||
NOTIFICATIONS.DAILY_WATCH_REMIND,
|
||||
NOTIFICATIONS.NEW_CONTENT,
|
||||
];
|
||||
const initialFetchDone = useFetched(fetching);
|
||||
const [rule, setRule] = usePersistedState('notifications--rule', NOTIFICATIONS.NOTIFICATION_RULE_NONE);
|
||||
const isFiltered = rule !== NOTIFICATIONS.NOTIFICATION_RULE_NONE;
|
||||
const list = isFiltered ? notificationsFiltered : notifications;
|
||||
|
||||
React.useEffect(() => {
|
||||
if (unseenCount > 0 || unreadCount > 0) {
|
||||
// If there are unread notifications when entering the page, reset to All.
|
||||
setFilterBy(ALL_NOTIFICATIONS);
|
||||
setRule(NOTIFICATIONS.NOTIFICATION_RULE_NONE);
|
||||
}
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (notifications && filterBy !== ALL_NOTIFICATIONS) {
|
||||
setFilteredNotifications(notifications.filter((n) => n.notification_rule === filterBy));
|
||||
} else {
|
||||
setFilteredNotifications(notifications);
|
||||
}
|
||||
}, [notifications, filterBy]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (unseenCount > 0) {
|
||||
doSeeAllNotifications();
|
||||
}
|
||||
}, [unseenCount, doSeeAllNotifications]);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
{fetching && !hasNotifications && (
|
||||
<div className="main--empty">
|
||||
<Spinner delayed />
|
||||
</div>
|
||||
)}
|
||||
{!fetching && (
|
||||
React.useEffect(() => {
|
||||
if (rule && rule !== '') {
|
||||
// Fetch filtered list when:
|
||||
// (1) 'rule' changed
|
||||
// (2) new "all" notifications received (e.g. from websocket).
|
||||
doNotificationList(rule);
|
||||
}
|
||||
}, [rule, notifications]);
|
||||
|
||||
const notificationListElement = (
|
||||
<>
|
||||
<div className="claim-list__header">
|
||||
<h1 className="card__title">{__('Notifications')}</h1>
|
||||
|
|
@ -74,45 +78,36 @@ export default function NotificationsPage(props: Props) {
|
|||
{fetching && <Spinner type="small" />}
|
||||
|
||||
{unreadCount > 0 && (
|
||||
<Button
|
||||
icon={ICONS.EYE}
|
||||
onClick={doReadNotifications}
|
||||
button="secondary"
|
||||
label={__('Mark all as read')}
|
||||
/>
|
||||
<Button icon={ICONS.EYE} onClick={doReadNotifications} button="secondary" label={__('Mark all as read')} />
|
||||
)}
|
||||
<FormField
|
||||
className="notification__filter"
|
||||
type="select"
|
||||
name="filter"
|
||||
value={filterBy || ALL_NOTIFICATIONS}
|
||||
onChange={(e) => setFilterBy(e.target.value)}
|
||||
value={rule}
|
||||
onChange={(e) => setRule(e.target.value)}
|
||||
>
|
||||
{NOTIFICATION_FILTER_TYPES.map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{/* i18fixme */}
|
||||
{type === ALL_NOTIFICATIONS && __('All')}
|
||||
{type === NOTIFICATIONS.NOTIFICATION_CREATOR_SUBSCRIBER && __('Followers')}
|
||||
{type === NOTIFICATIONS.NOTIFICATION_COMMENT && __('Comments')}
|
||||
{type === NOTIFICATIONS.NOTIFICATION_REPLY && __('Comment replies')}
|
||||
{type === NOTIFICATIONS.DAILY_WATCH_AVAILABLE && __('Daily watch availability')}
|
||||
{type === NOTIFICATIONS.DAILY_WATCH_REMIND && __('Daily watch reminders')}
|
||||
{type === NOTIFICATIONS.NEW_CONTENT && __('New content')}
|
||||
{Object.entries(RULE_LABELS).map((r) => {
|
||||
return (
|
||||
<option key={r[0]} value={r[0]}>
|
||||
{__(String(r[1]))}
|
||||
</option>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
{filteredNotifications && filteredNotifications.length > 0 ? (
|
||||
{list && list.length > 0 ? (
|
||||
<div className="card">
|
||||
<div className="notification_list">
|
||||
{filteredNotifications.map((notification, index) => {
|
||||
{list.map((notification, index) => {
|
||||
return <Notification key={notification.id} notification={notification} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="main--empty">
|
||||
{!fetching && (
|
||||
<Yrbl
|
||||
title={__('No notifications')}
|
||||
subtitle={
|
||||
|
|
@ -128,9 +123,22 @@ export default function NotificationsPage(props: Props) {
|
|||
</div>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
{initialFetchDone ? (
|
||||
notificationListElement
|
||||
) : fetching ? (
|
||||
<div className="main--empty">
|
||||
<Spinner delayed />
|
||||
</div>
|
||||
) : (
|
||||
notificationListElement
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue