Notifications filter changes (#319)
## Issue
312 Save notification on back navigation, enable filter on mobile
## Changes
- Don't clear then filter when mounted and there are unread notifications.
- We previously clear the filter because the user could be clicking the notification bell (which is showing some number) and we ended up with a blank page because of the filter.
- Allow the filter in mobile.
- Previously, it was intentionally removed for mobile (see bd42418f
). I believe it was just because we don't have the style set up for mobile. Here's my quick attempt.
This commit is contained in:
parent
e288833085
commit
4a2305dca1
2 changed files with 19 additions and 19 deletions
|
@ -73,13 +73,6 @@ export default function NotificationsPage(props: Props) {
|
|||
}
|
||||
}, [doCommentReactList, list, activeChannel, fetching, initialFetchDone]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (unseenCount > 0 || unreadCount > 0) {
|
||||
// If there are unread notifications when entering the page, reset to All.
|
||||
setName(NOTIFICATIONS.NOTIFICATION_NAME_ALL);
|
||||
}
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (unseenCount > 0) {
|
||||
doSeeAllNotifications();
|
||||
|
@ -120,13 +113,7 @@ export default function NotificationsPage(props: Props) {
|
|||
<Button icon={ICONS.EYE} onClick={doReadNotifications} button="secondary" label={__('Mark all as read')} />
|
||||
)}
|
||||
{notificationCategories && (
|
||||
<FormField
|
||||
className="notification__filter"
|
||||
type="select"
|
||||
name="filter"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
>
|
||||
<FormField type="select" name="filter" value={name} onChange={(e) => setName(e.target.value)}>
|
||||
{notificationCategories.map((category) => {
|
||||
return (
|
||||
<option key={category.name} value={category.name}>
|
||||
|
@ -170,7 +157,7 @@ export default function NotificationsPage(props: Props) {
|
|||
);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Page className="notification-page">
|
||||
{initialFetchDone ? (
|
||||
notificationListElement
|
||||
) : fetching ? (
|
||||
|
|
|
@ -279,10 +279,23 @@ $contentMaxWidth: 60rem;
|
|||
}
|
||||
}
|
||||
|
||||
.notification__filter {
|
||||
display: none;
|
||||
.notification-page {
|
||||
@media (max-width: $breakpoint-small) {
|
||||
.claim-list__header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-small) {
|
||||
display: block;
|
||||
.claim-list__alt-controls--wrap {
|
||||
display: block;
|
||||
text-align: right;
|
||||
|
||||
.button {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
fieldset-section {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue