From 17fcf67653ff5abf7546f94ce5dd7b90ded0cab3 Mon Sep 17 00:00:00 2001 From: Marshall Polaris Date: Wed, 10 Aug 2022 00:15:42 -0700 Subject: [PATCH] Pass both user and private user through SSR to auth context --- web/components/auth-context.tsx | 4 +--- web/lib/firebase/users.ts | 4 +++- web/pages/_app.tsx | 2 +- web/pages/create.tsx | 9 ++++----- web/pages/home.tsx | 9 ++++----- web/pages/links.tsx | 9 ++++----- web/pages/notifications.tsx | 11 ++++++----- web/pages/profile.tsx | 14 ++++---------- 8 files changed, 27 insertions(+), 35 deletions(-) diff --git a/web/components/auth-context.tsx b/web/components/auth-context.tsx index 2d6fff67..7b821d4d 100644 --- a/web/components/auth-context.tsx +++ b/web/components/auth-context.tsx @@ -1,7 +1,7 @@ import { ReactNode, createContext, useEffect } from 'react' -import { User, PrivateUser } from 'common/user' import { onIdTokenChanged } from 'firebase/auth' import { + UserAndPrivateUser, auth, listenForUser, listenForPrivateUser, @@ -14,8 +14,6 @@ import { randomString } from 'common/util/random' import { identifyUser, setUserProperty } from 'web/lib/service/analytics' import { useStateCheckEquality } from 'web/hooks/use-state-check-equality' -type UserAndPrivateUser = { user: User; privateUser: PrivateUser } - // Either we haven't looked up the logged in user yet (undefined), or we know // the user is not logged in (null), or we know the user is logged in. type AuthUser = undefined | null | UserAndPrivateUser diff --git a/web/lib/firebase/users.ts b/web/lib/firebase/users.ts index 302bac10..ac0eb099 100644 --- a/web/lib/firebase/users.ts +++ b/web/lib/firebase/users.ts @@ -43,6 +43,8 @@ export const privateUsers = coll('private-users') export type { User } +export type UserAndPrivateUser = { user: User; privateUser: PrivateUser } + export type Period = 'daily' | 'weekly' | 'monthly' | 'allTime' export const auth = getAuth(app) @@ -64,7 +66,7 @@ export async function getUserAndPrivateUser(userId: string) { getDoc(doc(privateUsers, userId))!, // eslint-disable-line @typescript-eslint/no-non-null-assertion ]) ).map((d) => d.data()) as [User, PrivateUser] - return { user, privateUser } + return { user, privateUser } as UserAndPrivateUser } export async function getUserByUsername(username: string) { diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx index 42b5e922..36524dc5 100644 --- a/web/pages/_app.tsx +++ b/web/pages/_app.tsx @@ -79,7 +79,7 @@ function MyApp({ Component, pageProps }: AppProps) { content="width=device-width, initial-scale=1, maximum-scale=1" /> - + diff --git a/web/pages/create.tsx b/web/pages/create.tsx index 3225fb4d..ab566c9e 100644 --- a/web/pages/create.tsx +++ b/web/pages/create.tsx @@ -4,7 +4,7 @@ import clsx from 'clsx' import dayjs from 'dayjs' import Textarea from 'react-expanding-textarea' import { Spacer } from 'web/components/layout/spacer' -import { getUser } from 'web/lib/firebase/users' +import { getUserAndPrivateUser } from 'web/lib/firebase/users' import { Contract, contractPath } from 'web/lib/firebase/contracts' import { createMarket } from 'web/lib/firebase/api' import { FIXED_ANTE } from 'common/antes' @@ -34,8 +34,7 @@ import { SEO } from 'web/components/SEO' import { MultipleChoiceAnswers } from 'web/components/answers/multiple-choice-answers' export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => { - const user = await getUser(creds.user.uid) - return { props: { user } } + return { props: { auth: await getUserAndPrivateUser(creds.user.uid) } } }) type NewQuestionParams = { @@ -52,9 +51,9 @@ type NewQuestionParams = { initValue?: string } -export default function Create(props: { user: User }) { +export default function Create(props: { auth: { user: User } }) { useTracking('view create page') - const { user } = props + const { user } = props.auth const router = useRouter() const params = router.query as NewQuestionParams // TODO: Not sure why Question is pulled out as its own component; diff --git a/web/pages/home.tsx b/web/pages/home.tsx index 10671c15..839a08f3 100644 --- a/web/pages/home.tsx +++ b/web/pages/home.tsx @@ -10,19 +10,18 @@ import { Contract } from 'common/contract' import { User } from 'common/user' import { ContractPageContent } from './[username]/[contractSlug]' import { getContractFromSlug } from 'web/lib/firebase/contracts' -import { getUser } from 'web/lib/firebase/users' +import { getUserAndPrivateUser } from 'web/lib/firebase/users' import { useTracking } from 'web/hooks/use-tracking' import { track } from 'web/lib/service/analytics' import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth' import { useSaveReferral } from 'web/hooks/use-save-referral' export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => { - const user = await getUser(creds.user.uid) - return { props: { user } } + return { props: { auth: await getUserAndPrivateUser(creds.user.uid) } } }) -const Home = (props: { user: User }) => { - const { user } = props +const Home = (props: { auth: { user: User } }) => { + const { user } = props.auth const [contract, setContract] = useContractPage() const router = useRouter() diff --git a/web/pages/links.tsx b/web/pages/links.tsx index 258c782a..351abefb 100644 --- a/web/pages/links.tsx +++ b/web/pages/links.tsx @@ -11,7 +11,7 @@ import { Page } from 'web/components/page' import { SEO } from 'web/components/SEO' import { Title } from 'web/components/title' import { Subtitle } from 'web/components/subtitle' -import { getUser } from 'web/lib/firebase/users' +import { getUserAndPrivateUser } from 'web/lib/firebase/users' import { useUserManalinks } from 'web/lib/firebase/manalinks' import { useUserById } from 'web/hooks/use-user' import { ManalinkTxn } from 'common/txn' @@ -31,16 +31,15 @@ import { SiteLink } from 'web/components/site-link' const LINKS_PER_PAGE = 24 export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => { - const user = await getUser(creds.user.uid) - return { props: { user } } + return { props: { auth: await getUserAndPrivateUser(creds.user.uid) } } }) export function getManalinkUrl(slug: string) { return `${location.protocol}//${location.host}/link/${slug}` } -export default function LinkPage(props: { user: User }) { - const { user } = props +export default function LinkPage(props: { auth: { user: User } }) { + const { user } = props.auth const links = useUserManalinks(user.id ?? '') // const manalinkTxns = useManalinkTxns(user?.id ?? '') const [highlightedSlug, setHighlightedSlug] = useState('') diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx index 69139f9c..c875dbf2 100644 --- a/web/pages/notifications.tsx +++ b/web/pages/notifications.tsx @@ -13,7 +13,7 @@ import { MANIFOLD_USERNAME, PrivateUser, } from 'common/user' -import { getPrivateUser } from 'web/lib/firebase/users' +import { getUserAndPrivateUser } from 'web/lib/firebase/users' import clsx from 'clsx' import { RelativeTimestamp } from 'web/components/relative-timestamp' import { Linkify } from 'web/components/linkify' @@ -46,12 +46,13 @@ const MULTIPLE_USERS_KEY = 'multipleUsers' const HIGHLIGHT_CLASS = 'bg-indigo-50' export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => { - const privateUser = await getPrivateUser(creds.user.uid) - return { props: { privateUser } } + return { props: { auth: await getUserAndPrivateUser(creds.user.uid) } } }) -export default function Notifications(props: { privateUser: PrivateUser }) { - const { privateUser } = props +export default function Notifications(props: { + auth: { privateUser: PrivateUser } +}) { + const { privateUser } = props.auth const local = safeLocalStorage() let localNotifications = [] as Notification[] const localSavedNotificationGroups = local?.getItem('notification-groups') diff --git a/web/pages/profile.tsx b/web/pages/profile.tsx index 42bcb5c3..ca1f3489 100644 --- a/web/pages/profile.tsx +++ b/web/pages/profile.tsx @@ -13,8 +13,7 @@ import { Col } from 'web/components/layout/col' import { Row } from 'web/components/layout/row' import { User, PrivateUser } from 'common/user' import { - getUser, - getPrivateUser, + getUserAndPrivateUser, updateUser, updatePrivateUser, } from 'web/lib/firebase/users' @@ -24,11 +23,7 @@ import Textarea from 'react-expanding-textarea' import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth' export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => { - const [user, privateUser] = await Promise.all([ - getUser(creds.user.uid), - getPrivateUser(creds.user.uid), - ]) - return { props: { user, privateUser } } + return { props: { auth: await getUserAndPrivateUser(creds.user.uid) } } }) function EditUserField(props: { @@ -69,10 +64,9 @@ function EditUserField(props: { } export default function ProfilePage(props: { - user: User - privateUser: PrivateUser + auth: { user: User; privateUser: PrivateUser } }) { - const { user, privateUser } = props + const { user, privateUser } = props.auth const [avatarUrl, setAvatarUrl] = useState(user.avatarUrl || '') const [avatarLoading, setAvatarLoading] = useState(false) const [name, setName] = useState(user.name)