diff --git a/web/components/notification-settings.tsx b/web/components/notification-settings.tsx index 756adbfd..408cc245 100644 --- a/web/components/notification-settings.tsx +++ b/web/components/notification-settings.tsx @@ -54,21 +54,20 @@ export function NotificationSettings(props: { 'resolutions_on_watched_markets_with_shares_in', 'resolutions_on_watched_markets', - 'tagged_user', 'trending_markets', 'onboarding_flow', 'thank_you_for_purchases', // TODO: add these + 'tagged_user', // 'contract_from_followed_user', // 'referral_bonuses', // 'unique_bettors_on_your_contract', + // 'on_new_follow', + // 'profit_loss_updates', // 'tips_on_your_markets', // 'tips_on_your_comments', - // 'subsidized_your_market', - // 'on_new_follow', // maybe the following? - // 'profit_loss_updates', // 'probability_updates_on_watched_markets', // 'limit_order_fills', ] diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx index 57e13fb9..0c748ec7 100644 --- a/web/pages/notifications.tsx +++ b/web/pages/notifications.tsx @@ -26,6 +26,7 @@ import { import { NotificationGroup, useGroupedNotifications, + useUnseenGroupedNotification, } from 'web/hooks/use-notifications' import { TrendingUpIcon } from '@heroicons/react/outline' import { formatMoney } from 'common/util/format' @@ -153,16 +154,13 @@ function NotificationsList(props: { privateUser: PrivateUser }) { const { privateUser } = props const [page, setPage] = useState(0) const allGroupedNotifications = useGroupedNotifications(privateUser) + const unseenGroupedNotifications = useUnseenGroupedNotification(privateUser) const paginatedGroupedNotifications = useMemo(() => { if (!allGroupedNotifications) return const start = page * NOTIFICATIONS_PER_PAGE const end = start + NOTIFICATIONS_PER_PAGE const maxNotificationsToShow = allGroupedNotifications.slice(start, end) - const remainingNotification = allGroupedNotifications.slice(end) - for (const notification of remainingNotification) { - if (notification.isSeen) break - else setNotificationsAsSeen(notification.notifications) - } + const local = safeLocalStorage() local?.setItem( 'notification-groups', @@ -171,6 +169,19 @@ function NotificationsList(props: { privateUser: PrivateUser }) { return maxNotificationsToShow }, [allGroupedNotifications, page]) + // Set all notifications that don't fit on the first page to seen + useEffect(() => { + if ( + paginatedGroupedNotifications && + paginatedGroupedNotifications?.length >= NOTIFICATIONS_PER_PAGE + ) { + const allUnseenNotifications = unseenGroupedNotifications + ?.map((ng) => ng.notifications) + .flat() + allUnseenNotifications && setNotificationsAsSeen(allUnseenNotifications) + } + }, [paginatedGroupedNotifications, unseenGroupedNotifications]) + if (!paginatedGroupedNotifications || !allGroupedNotifications) return