Memoize paginated notifs

This commit is contained in:
Ian Philips 2022-07-19 08:51:53 -06:00
parent ef4fa841f3
commit fdc45515db

View File

@ -1,6 +1,6 @@
import { Tabs } from 'web/components/layout/tabs' import { Tabs } from 'web/components/layout/tabs'
import { usePrivateUser, useUser } from 'web/hooks/use-user' import { usePrivateUser, useUser } from 'web/hooks/use-user'
import React, { useEffect, useState } from 'react' import React, { useEffect, useMemo, useState } from 'react'
import { Notification, notification_source_types } from 'common/notification' import { Notification, notification_source_types } from 'common/notification'
import { Avatar, EmptyAvatar } from 'web/components/avatar' import { Avatar, EmptyAvatar } from 'web/components/avatar'
import { Row } from 'web/components/layout/row' import { Row } from 'web/components/layout/row'
@ -164,11 +164,7 @@ function NotificationsList(props: {
privateUser, privateUser,
cachedNotifications cachedNotifications
) )
const paginatedGroupedNotifications = useMemo(() => {
const [paginatedGroupedNotifications, setPaginatedGroupedNotifications] =
useState<NotificationGroup[] | undefined>(undefined)
useEffect(() => {
if (!allGroupedNotifications) return if (!allGroupedNotifications) return
const start = page * NOTIFICATIONS_PER_PAGE const start = page * NOTIFICATIONS_PER_PAGE
const end = start + NOTIFICATIONS_PER_PAGE const end = start + NOTIFICATIONS_PER_PAGE
@ -178,12 +174,12 @@ function NotificationsList(props: {
if (notification.isSeen) break if (notification.isSeen) break
else setNotificationsAsSeen(notification.notifications) else setNotificationsAsSeen(notification.notifications)
} }
setPaginatedGroupedNotifications(maxNotificationsToShow)
const local = safeLocalStorage() const local = safeLocalStorage()
local?.setItem( local?.setItem(
'notification-groups', 'notification-groups',
JSON.stringify(allGroupedNotifications) JSON.stringify(maxNotificationsToShow)
) )
return maxNotificationsToShow
}, [allGroupedNotifications, page]) }, [allGroupedNotifications, page])
if (!paginatedGroupedNotifications || !allGroupedNotifications) return <div /> if (!paginatedGroupedNotifications || !allGroupedNotifications) return <div />