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 2021-03-25 12:37:53 +08:00 committed by Sean Yesmunt
parent b8ec0c9967
commit 3bab4feeca
3 changed files with 105 additions and 95 deletions

View file

@ -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.",

View file

@ -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),

View file

@ -9,128 +9,136 @@ 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]);
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>
<div className="claim-list__alt-controls--wrap">
{fetching && <Spinner type="small" />}
{unreadCount > 0 && (
<Button icon={ICONS.EYE} onClick={doReadNotifications} button="secondary" label={__('Mark all as read')} />
)}
<FormField
className="notification__filter"
type="select"
name="filter"
value={rule}
onChange={(e) => setRule(e.target.value)}
>
{Object.entries(RULE_LABELS).map((r) => {
return (
<option key={r[0]} value={r[0]}>
{__(String(r[1]))}
</option>
);
})}
</FormField>
</div>
</div>
{list && list.length > 0 ? (
<div className="card">
<div className="notification_list">
{list.map((notification, index) => {
return <Notification key={notification.id} notification={notification} />;
})}
</div>
</div>
) : (
<div className="main--empty">
{!fetching && (
<Yrbl
title={__('No notifications')}
subtitle={
<p>
{isFiltered
? __('Try selecting another filter.')
: __("You don't have any notifications yet, but they will be here when you do!")}
</p>
}
actions={
<div className="section__actions">
<Button button="primary" icon={ICONS.HOME} label={__('Go Home')} navigate="/" />
</div>
}
/>
)}
</div>
)}
</>
);
return (
<Page>
{fetching && !hasNotifications && (
{initialFetchDone ? (
notificationListElement
) : fetching ? (
<div className="main--empty">
<Spinner delayed />
</div>
)}
{!fetching && (
<>
<div className="claim-list__header">
<h1 className="card__title">{__('Notifications')}</h1>
<div className="claim-list__alt-controls--wrap">
{fetching && <Spinner type="small" />}
{unreadCount > 0 && (
<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)}
>
{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')}
</option>
))}
</FormField>
</div>
</div>
{filteredNotifications && filteredNotifications.length > 0 ? (
<div className="card">
<div className="notification_list">
{filteredNotifications.map((notification, index) => {
return <Notification key={notification.id} notification={notification} />;
})}
</div>
</div>
) : (
<div className="main--empty">
<Yrbl
title={__('No notifications')}
subtitle={
<p>
{isFiltered
? __('Try selecting another filter.')
: __("You don't have any notifications yet, but they will be here when you do!")}
</p>
}
actions={
<div className="section__actions">
<Button button="primary" icon={ICONS.HOME} label={__('Go Home')} navigate="/" />
</div>
}
/>
</div>
)}
</>
) : (
notificationListElement
)}
</Page>
);