Pass both user and private user through SSR to auth context

This commit is contained in:
Marshall Polaris 2022-08-10 00:15:42 -07:00
parent 3cc7bd2135
commit 17fcf67653
8 changed files with 27 additions and 35 deletions

View File

@ -1,7 +1,7 @@
import { ReactNode, createContext, useEffect } from 'react' import { ReactNode, createContext, useEffect } from 'react'
import { User, PrivateUser } from 'common/user'
import { onIdTokenChanged } from 'firebase/auth' import { onIdTokenChanged } from 'firebase/auth'
import { import {
UserAndPrivateUser,
auth, auth,
listenForUser, listenForUser,
listenForPrivateUser, listenForPrivateUser,
@ -14,8 +14,6 @@ import { randomString } from 'common/util/random'
import { identifyUser, setUserProperty } from 'web/lib/service/analytics' import { identifyUser, setUserProperty } from 'web/lib/service/analytics'
import { useStateCheckEquality } from 'web/hooks/use-state-check-equality' 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 // 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. // the user is not logged in (null), or we know the user is logged in.
type AuthUser = undefined | null | UserAndPrivateUser type AuthUser = undefined | null | UserAndPrivateUser

View File

@ -43,6 +43,8 @@ export const privateUsers = coll<PrivateUser>('private-users')
export type { User } export type { User }
export type UserAndPrivateUser = { user: User; privateUser: PrivateUser }
export type Period = 'daily' | 'weekly' | 'monthly' | 'allTime' export type Period = 'daily' | 'weekly' | 'monthly' | 'allTime'
export const auth = getAuth(app) 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 getDoc(doc(privateUsers, userId))!, // eslint-disable-line @typescript-eslint/no-non-null-assertion
]) ])
).map((d) => d.data()) as [User, PrivateUser] ).map((d) => d.data()) as [User, PrivateUser]
return { user, privateUser } return { user, privateUser } as UserAndPrivateUser
} }
export async function getUserByUsername(username: string) { export async function getUserByUsername(username: string) {

View File

@ -79,7 +79,7 @@ function MyApp({ Component, pageProps }: AppProps) {
content="width=device-width, initial-scale=1, maximum-scale=1" content="width=device-width, initial-scale=1, maximum-scale=1"
/> />
</Head> </Head>
<AuthProvider serverUser={pageProps.user}> <AuthProvider serverUser={pageProps.authUser}>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<Welcome {...pageProps} /> <Welcome {...pageProps} />
<Component {...pageProps} /> <Component {...pageProps} />

View File

@ -4,7 +4,7 @@ import clsx from 'clsx'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import Textarea from 'react-expanding-textarea' import Textarea from 'react-expanding-textarea'
import { Spacer } from 'web/components/layout/spacer' 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 { Contract, contractPath } from 'web/lib/firebase/contracts'
import { createMarket } from 'web/lib/firebase/api' import { createMarket } from 'web/lib/firebase/api'
import { FIXED_ANTE } from 'common/antes' 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' import { MultipleChoiceAnswers } from 'web/components/answers/multiple-choice-answers'
export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => { export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
const user = await getUser(creds.user.uid) return { props: { auth: await getUserAndPrivateUser(creds.user.uid) } }
return { props: { user } }
}) })
type NewQuestionParams = { type NewQuestionParams = {
@ -52,9 +51,9 @@ type NewQuestionParams = {
initValue?: string initValue?: string
} }
export default function Create(props: { user: User }) { export default function Create(props: { auth: { user: User } }) {
useTracking('view create page') useTracking('view create page')
const { user } = props const { user } = props.auth
const router = useRouter() const router = useRouter()
const params = router.query as NewQuestionParams const params = router.query as NewQuestionParams
// TODO: Not sure why Question is pulled out as its own component; // TODO: Not sure why Question is pulled out as its own component;

View File

@ -10,19 +10,18 @@ import { Contract } from 'common/contract'
import { User } from 'common/user' import { User } from 'common/user'
import { ContractPageContent } from './[username]/[contractSlug]' import { ContractPageContent } from './[username]/[contractSlug]'
import { getContractFromSlug } from 'web/lib/firebase/contracts' 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 { useTracking } from 'web/hooks/use-tracking'
import { track } from 'web/lib/service/analytics' import { track } from 'web/lib/service/analytics'
import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth' import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
import { useSaveReferral } from 'web/hooks/use-save-referral' import { useSaveReferral } from 'web/hooks/use-save-referral'
export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => { export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
const user = await getUser(creds.user.uid) return { props: { auth: await getUserAndPrivateUser(creds.user.uid) } }
return { props: { user } }
}) })
const Home = (props: { user: User }) => { const Home = (props: { auth: { user: User } }) => {
const { user } = props const { user } = props.auth
const [contract, setContract] = useContractPage() const [contract, setContract] = useContractPage()
const router = useRouter() const router = useRouter()

View File

@ -11,7 +11,7 @@ import { Page } from 'web/components/page'
import { SEO } from 'web/components/SEO' import { SEO } from 'web/components/SEO'
import { Title } from 'web/components/title' import { Title } from 'web/components/title'
import { Subtitle } from 'web/components/subtitle' 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 { useUserManalinks } from 'web/lib/firebase/manalinks'
import { useUserById } from 'web/hooks/use-user' import { useUserById } from 'web/hooks/use-user'
import { ManalinkTxn } from 'common/txn' import { ManalinkTxn } from 'common/txn'
@ -31,16 +31,15 @@ import { SiteLink } from 'web/components/site-link'
const LINKS_PER_PAGE = 24 const LINKS_PER_PAGE = 24
export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => { export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
const user = await getUser(creds.user.uid) return { props: { auth: await getUserAndPrivateUser(creds.user.uid) } }
return { props: { user } }
}) })
export function getManalinkUrl(slug: string) { export function getManalinkUrl(slug: string) {
return `${location.protocol}//${location.host}/link/${slug}` return `${location.protocol}//${location.host}/link/${slug}`
} }
export default function LinkPage(props: { user: User }) { export default function LinkPage(props: { auth: { user: User } }) {
const { user } = props const { user } = props.auth
const links = useUserManalinks(user.id ?? '') const links = useUserManalinks(user.id ?? '')
// const manalinkTxns = useManalinkTxns(user?.id ?? '') // const manalinkTxns = useManalinkTxns(user?.id ?? '')
const [highlightedSlug, setHighlightedSlug] = useState('') const [highlightedSlug, setHighlightedSlug] = useState('')

View File

@ -13,7 +13,7 @@ import {
MANIFOLD_USERNAME, MANIFOLD_USERNAME,
PrivateUser, PrivateUser,
} from 'common/user' } from 'common/user'
import { getPrivateUser } from 'web/lib/firebase/users' 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'
@ -46,12 +46,13 @@ const MULTIPLE_USERS_KEY = 'multipleUsers'
const HIGHLIGHT_CLASS = 'bg-indigo-50' const HIGHLIGHT_CLASS = 'bg-indigo-50'
export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => { export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
const privateUser = await getPrivateUser(creds.user.uid) return { props: { auth: await getUserAndPrivateUser(creds.user.uid) } }
return { props: { privateUser } }
}) })
export default function Notifications(props: { privateUser: PrivateUser }) { export default function Notifications(props: {
const { privateUser } = props auth: { privateUser: PrivateUser }
}) {
const { privateUser } = props.auth
const local = safeLocalStorage() const local = safeLocalStorage()
let localNotifications = [] as Notification[] let localNotifications = [] as Notification[]
const localSavedNotificationGroups = local?.getItem('notification-groups') const localSavedNotificationGroups = local?.getItem('notification-groups')

View File

@ -13,8 +13,7 @@ import { Col } from 'web/components/layout/col'
import { Row } from 'web/components/layout/row' import { Row } from 'web/components/layout/row'
import { User, PrivateUser } from 'common/user' import { User, PrivateUser } from 'common/user'
import { import {
getUser, getUserAndPrivateUser,
getPrivateUser,
updateUser, updateUser,
updatePrivateUser, updatePrivateUser,
} from 'web/lib/firebase/users' } from 'web/lib/firebase/users'
@ -24,11 +23,7 @@ import Textarea from 'react-expanding-textarea'
import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth' import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => { export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
const [user, privateUser] = await Promise.all([ return { props: { auth: await getUserAndPrivateUser(creds.user.uid) } }
getUser(creds.user.uid),
getPrivateUser(creds.user.uid),
])
return { props: { user, privateUser } }
}) })
function EditUserField(props: { function EditUserField(props: {
@ -69,10 +64,9 @@ function EditUserField(props: {
} }
export default function ProfilePage(props: { export default function ProfilePage(props: {
user: User auth: { user: User; privateUser: PrivateUser }
privateUser: PrivateUser
}) { }) {
const { user, privateUser } = props const { user, privateUser } = props.auth
const [avatarUrl, setAvatarUrl] = useState(user.avatarUrl || '') const [avatarUrl, setAvatarUrl] = useState(user.avatarUrl || '')
const [avatarLoading, setAvatarLoading] = useState(false) const [avatarLoading, setAvatarLoading] = useState(false)
const [name, setName] = useState(user.name) const [name, setName] = useState(user.name)