open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Don't server side render Notifications page for improved perf

Browse Source
This commit is contained in:
James Grugett 2022-08-31 15:41:34 -05:00
parent 83696cca21
commit 3660830ec1
1 changed files with 31 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
web/pages/notifications.tsx
View File

@ -1,5 +1,6 @@
import { Tabs } from 'web/components/layout/tabs' import { Tabs } from 'web/components/layout/tabs'
import React, { useEffect, useMemo, useState } from 'react' import React, { useEffect, useMemo, useState } from 'react'
import Router from 'next/router'
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'
@ -12,7 +13,6 @@ import {
MANIFOLD_USERNAME, MANIFOLD_USERNAME,
PrivateUser, PrivateUser,
} from 'common/user' } from 'common/user'
import { getUserAndPrivateUser } from 'web/lib/firebase/users'
import clsx from 'clsx' import clsx from 'clsx'
import { RelativeTimestamp } from 'web/components/relative-timestamp' import { RelativeTimestamp } from 'web/components/relative-timestamp'
import { Linkify } from 'web/components/linkify' import { Linkify } from 'web/components/linkify'
@ -39,11 +39,10 @@ import { track } from '@amplitude/analytics-browser'
import { Pagination } from 'web/components/pagination' import { Pagination } from 'web/components/pagination'
import { useWindowSize } from 'web/hooks/use-window-size' import { useWindowSize } from 'web/hooks/use-window-size'
import { safeLocalStorage } from 'web/lib/util/local' import { safeLocalStorage } from 'web/lib/util/local'
import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
import { SiteLink } from 'web/components/site-link' import { SiteLink } from 'web/components/site-link'
import { NotificationSettings } from 'web/components/NotificationSettings' import { NotificationSettings } from 'web/components/NotificationSettings'
import { SEO } from 'web/components/SEO' import { SEO } from 'web/components/SEO'
import { useUser } from 'web/hooks/use-user' import { usePrivateUser, useUser } from 'web/hooks/use-user'
import { import {
MultiUserTipLink, MultiUserTipLink,
MultiUserLinkInfo, MultiUserLinkInfo,
@ -54,14 +53,12 @@ import { LoadingIndicator } from 'web/components/loading-indicator'
export const NOTIFICATIONS_PER_PAGE = 30 export const NOTIFICATIONS_PER_PAGE = 30
const HIGHLIGHT_CLASS = 'bg-indigo-50' const HIGHLIGHT_CLASS = 'bg-indigo-50'
export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => { export default function Notifications() {
return { props: { auth: await getUserAndPrivateUser(creds.user.uid) } } const privateUser = usePrivateUser()
})
export default function Notifications(props: { useEffect(() => {
auth: { privateUser: PrivateUser } if (privateUser === null) Router.push('/')
}) { })
const { privateUser } = props.auth
return ( return (
<Page> <Page>
@ -69,28 +66,30 @@ export default function Notifications(props: {
<Title text={'Notifications'} className={'hidden md:block'} /> <Title text={'Notifications'} className={'hidden md:block'} />
<SEO title="Notifications" description="Manifold user notifications" /> <SEO title="Notifications" description="Manifold user notifications" />
<div> {privateUser && (
<Tabs <div>
currentPageForAnalytics={'notifications'} <Tabs
labelClassName={'pb-2 pt-1 '} currentPageForAnalytics={'notifications'}
className={'mb-0 sm:mb-2'} labelClassName={'pb-2 pt-1 '}
defaultIndex={0} className={'mb-0 sm:mb-2'}
tabs={[ defaultIndex={0}
{ tabs={[
title: 'Notifications', {
content: <NotificationsList privateUser={privateUser} />, title: 'Notifications',
}, content: <NotificationsList privateUser={privateUser} />,
{ },
title: 'Settings', {
content: ( title: 'Settings',
<div className={''}> content: (
<NotificationSettings /> <div className={''}>
</div> <NotificationSettings />
), </div>
}, ),
]} },
/> ]}
</div> />
</div>
)}
</div> </div>
</Page> </Page>
) )