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:
infinite-persistence 2021-11-18 07:55:33 -08:00 committed by GitHub
parent e288833085
commit 4a2305dca1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 19 deletions

View file

@ -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 ? (

View file

@ -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;
}
}
}
}