diff --git a/web/components/groups/group-chat.tsx b/web/components/groups/group-chat.tsx index 0cec8885..244a3ffe 100644 --- a/web/components/groups/group-chat.tsx +++ b/web/components/groups/group-chat.tsx @@ -19,7 +19,7 @@ import { sum } from 'lodash' import { formatMoney } from 'common/util/format' import { useWindowSize } from 'web/hooks/use-window-size' import { Content, useTextEditor } from 'web/components/editor' -import { useUnseenPreferredNotifications } from 'web/hooks/use-notifications' +import { useUnseenNotifications } from 'web/hooks/use-notifications' import { ChevronDownIcon, UsersIcon } from '@heroicons/react/outline' import { setNotificationsAsSeen } from 'web/pages/notifications' import { usePrivateUser } from 'web/hooks/use-user' @@ -277,7 +277,7 @@ function GroupChatNotificationsIcon(props: { hidden: boolean }) { const { privateUser, group, shouldSetAsSeen, hidden } = props - const preferredNotificationsForThisGroup = useUnseenPreferredNotifications( + const notificationsForThisGroup = useUnseenNotifications( privateUser // Disabled tracking by customHref for now. // { @@ -286,9 +286,9 @@ function GroupChatNotificationsIcon(props: { ) useEffect(() => { - if (!preferredNotificationsForThisGroup) return + if (!notificationsForThisGroup) return - preferredNotificationsForThisGroup.forEach((notification) => { + notificationsForThisGroup.forEach((notification) => { if ( (shouldSetAsSeen && notification.isSeenOnHref?.includes('chat')) || // old style chat notif that simply ended with the group slug @@ -297,14 +297,14 @@ function GroupChatNotificationsIcon(props: { setNotificationsAsSeen([notification]) } }) - }, [group.slug, preferredNotificationsForThisGroup, shouldSetAsSeen]) + }, [group.slug, notificationsForThisGroup, shouldSetAsSeen]) return (
0 && + notificationsForThisGroup && + notificationsForThisGroup.length > 0 && !shouldSetAsSeen ? 'absolute right-4 top-4 h-3 w-3 rounded-full border-2 border-white bg-red-500' : 'hidden' diff --git a/web/components/notifications-icon.tsx b/web/components/notifications-icon.tsx index dbdad6a9..55284e96 100644 --- a/web/components/notifications-icon.tsx +++ b/web/components/notifications-icon.tsx @@ -4,7 +4,7 @@ import { Row } from 'web/components/layout/row' import { useEffect, useState } from 'react' import { usePrivateUser } from 'web/hooks/use-user' import { useRouter } from 'next/router' -import { useUnseenPreferredNotificationGroups } from 'web/hooks/use-notifications' +import { useUnseenGroupedNotification } from 'web/hooks/use-notifications' import { NOTIFICATIONS_PER_PAGE } from 'web/pages/notifications' import { PrivateUser } from 'common/user' @@ -30,7 +30,7 @@ function UnseenNotificationsBubble(props: { privateUser: PrivateUser }) { else setSeen(false) }, [router.pathname]) - const notifications = useUnseenPreferredNotificationGroups(privateUser) + const notifications = useUnseenGroupedNotification(privateUser) if (!notifications || notifications.length === 0 || seen) { return
} diff --git a/web/hooks/use-notifications.ts b/web/hooks/use-notifications.ts index f106c502..d02d3d30 100644 --- a/web/hooks/use-notifications.ts +++ b/web/hooks/use-notifications.ts @@ -13,7 +13,7 @@ export type NotificationGroup = { type: 'income' | 'normal' } -function usePreferredNotifications(privateUser: PrivateUser) { +function useNotifications(privateUser: PrivateUser) { const result = useFirestoreQueryData( ['notifications-all', privateUser.id], getNotificationsQuery(privateUser.id), @@ -35,24 +35,23 @@ function usePreferredNotifications(privateUser: PrivateUser) { return notifications } -export function useUnseenPreferredNotifications(privateUser: PrivateUser) { - const notifications = usePreferredNotifications(privateUser) - const unseen = useMemo( +export function useUnseenNotifications(privateUser: PrivateUser) { + const notifications = useNotifications(privateUser) + return useMemo( () => notifications && notifications.filter((n) => !n.isSeen), [notifications] ) - return unseen } -export function usePreferredGroupedNotifications(privateUser: PrivateUser) { - const notifications = usePreferredNotifications(privateUser) +export function useGroupedNotifications(privateUser: PrivateUser) { + const notifications = useNotifications(privateUser) return useMemo(() => { if (notifications) return groupNotifications(notifications) }, [notifications]) } -export function useUnseenPreferredNotificationGroups(privateUser: PrivateUser) { - const notifications = useUnseenPreferredNotifications(privateUser) +export function useUnseenGroupedNotification(privateUser: PrivateUser) { + const notifications = useUnseenNotifications(privateUser) return useMemo(() => { if (notifications) return groupNotifications(notifications) }, [notifications]) diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx index ef333383..85cbcbae 100644 --- a/web/pages/notifications.tsx +++ b/web/pages/notifications.tsx @@ -26,7 +26,7 @@ import { } from 'web/components/outcome-label' import { NotificationGroup, - usePreferredGroupedNotifications, + useGroupedNotifications, } from 'web/hooks/use-notifications' import { TrendingUpIcon } from '@heroicons/react/outline' import { formatMoney } from 'common/util/format' @@ -124,7 +124,7 @@ function RenderNotificationGroups(props: { function NotificationsList(props: { privateUser: PrivateUser }) { const { privateUser } = props const [page, setPage] = useState(0) - const allGroupedNotifications = usePreferredGroupedNotifications(privateUser) + const allGroupedNotifications = useGroupedNotifications(privateUser) const paginatedGroupedNotifications = useMemo(() => { if (!allGroupedNotifications) return const start = page * NOTIFICATIONS_PER_PAGE