diff --git a/web/hooks/use-notifications.ts b/web/hooks/use-notifications.ts index 9a41acf3..87a578be 100644 --- a/web/hooks/use-notifications.ts +++ b/web/hooks/use-notifications.ts @@ -24,20 +24,13 @@ export function usePreferredGroupedNotifications( privateUser: PrivateUser, cachedNotifications?: Notification[] ) { - const [notificationGroups, setNotificationGroups] = useState< - NotificationGroup[] | undefined - >(undefined) - const [notifications, setNotifications] = useState( - cachedNotifications ?? [] - ) - const result = useFirestoreQueryData( ['notifications-all', privateUser.id], getNotificationsQuery(privateUser.id) ) - useMemo(() => { - if (result.isLoading) return - if (!result.data) return + const notifications = useMemo(() => { + if (result.isLoading) return cachedNotifications ?? [] + if (!result.data) return cachedNotifications ?? [] const notifications = result.data as Notification[] const notificationsToShow = getAppropriateNotifications( @@ -46,8 +39,9 @@ export function usePreferredGroupedNotifications( ).filter((n) => !n.isSeenOnHref) const cachedIds = cachedNotifications?.map((n) => n.id) if (notificationsToShow.some((n) => !cachedIds?.includes(n.id))) { - setNotifications(notificationsToShow) + return notificationsToShow } + return cachedNotifications }, [ cachedNotifications, privateUser.notificationPreferences, @@ -55,17 +49,9 @@ export function usePreferredGroupedNotifications( result.isLoading, ]) - useMemo(() => { - if (!notifications) return - if (notifications.length > 0) { - const local = safeLocalStorage() - local?.setItem('notifications', JSON.stringify(notifications)) - } - const groupedNotifications = groupNotifications(notifications) - setNotificationGroups(groupedNotifications) + return useMemo(() => { + if (notifications) return groupNotifications(notifications) }, [notifications]) - - return notificationGroups } export function useUnseenPreferredNotificationGroups(privateUser: PrivateUser) { diff --git a/web/lib/firebase/auth.ts b/web/lib/firebase/auth.ts index d1c440ec..8a579764 100644 --- a/web/lib/firebase/auth.ts +++ b/web/lib/firebase/auth.ts @@ -6,7 +6,7 @@ const TOKEN_KINDS = ['refresh', 'id'] as const type TokenKind = typeof TOKEN_KINDS[number] const getAuthCookieName = (kind: TokenKind) => { - const suffix = `${PROJECT_ID}_${kind}`.toUpperCase().replaceAll('-', '_') + const suffix = `${PROJECT_ID}_${kind}`.toUpperCase() return `FIREBASE_TOKEN_${suffix}` } diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx index 9034b1ef..1d4d1794 100644 --- a/web/pages/notifications.tsx +++ b/web/pages/notifications.tsx @@ -14,9 +14,14 @@ import { MANIFOLD_USERNAME, notification_subscribe_types, PrivateUser, + User, } from 'common/user' import { ChoicesToggleGroup } from 'web/components/choices-toggle-group' -import { listenForPrivateUser, updatePrivateUser } from 'web/lib/firebase/users' +import { + getUser, + listenForPrivateUser, + updatePrivateUser, +} from 'web/lib/firebase/users' import { LoadingIndicator } from 'web/components/loading-indicator' import clsx from 'clsx' import { RelativeTimestamp } from 'web/components/relative-timestamp' @@ -44,23 +49,40 @@ import { Pagination } from 'web/components/pagination' import { useWindowSize } from 'web/hooks/use-window-size' import Router from 'next/router' import { safeLocalStorage } from 'web/lib/util/local' +import { + getServerAuthenticatedUid, + redirectIfLoggedOut, +} from 'web/lib/firebase/server-auth' +import { useQueryClient } from 'react-query' +import { getNotificationsQuery } from 'web/lib/firebase/notifications' +import { getValues } from 'web/lib/firebase/utils' export const NOTIFICATIONS_PER_PAGE = 30 const MULTIPLE_USERS_KEY = 'multipleUsers' const HIGHLIGHT_CLASS = 'bg-indigo-50' -export default function Notifications() { - const user = useUser() +export const getServerSideProps = redirectIfLoggedOut('/', async (ctx) => { + const uid = await getServerAuthenticatedUid(ctx) + if (!uid) { + return { props: { user: null } } + } + const user = await getUser(uid) + return { props: { user } } +}) + +export default function Notifications(props: { user: User }) { + const { user } = props const privateUser = usePrivateUser(user?.id) const local = safeLocalStorage() - const localSavedNotifications = local?.getItem('notifications') let localNotifications = [] as Notification[] - if (localSavedNotifications) - localNotifications = JSON.parse(localSavedNotifications) const localSavedNotificationGroups = local?.getItem('notification-groups') let localNotificationGroups = [] as NotificationGroup[] - if (localSavedNotificationGroups) + if (localSavedNotificationGroups) { localNotificationGroups = JSON.parse(localSavedNotificationGroups) + localNotifications = localNotificationGroups + .map((g) => g.notifications) + .flat() + } if (!user) return return ( @@ -149,7 +171,7 @@ function NotificationsList(props: { const [paginatedGroupedNotifications, setPaginatedGroupedNotifications] = useState(undefined) - useMemo(() => { + useEffect(() => { if (!allGroupedNotifications) return const start = page * NOTIFICATIONS_PER_PAGE const end = start + NOTIFICATIONS_PER_PAGE