From 54778ec1b1d268e4e871287392367e764990f22b Mon Sep 17 00:00:00 2001 From: mantikoros <95266179+mantikoros@users.noreply.github.com> Date: Tue, 20 Sep 2022 19:23:18 -0500 Subject: [PATCH] Fix twitch onboarding (#910) * don't show welcome dialog for twitch users * handle sign up race conditions with more hooks * content organization and copy tweaks * lint * fix import --- web/components/onboarding/welcome.tsx | 36 ++++++++--- web/pages/twitch.tsx | 92 +++++++++++++++------------ 2 files changed, 79 insertions(+), 49 deletions(-) diff --git a/web/components/onboarding/welcome.tsx b/web/components/onboarding/welcome.tsx index 654357c5..b18ef83f 100644 --- a/web/components/onboarding/welcome.tsx +++ b/web/components/onboarding/welcome.tsx @@ -1,6 +1,9 @@ -import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid' import clsx from 'clsx' -import { useState } from 'react' +import { useRouter } from 'next/router' +import { useEffect, useState } from 'react' +import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid' + +import { User } from 'common/user' import { useUser } from 'web/hooks/use-user' import { updateUser } from 'web/lib/firebase/users' import { Col } from '../layout/col' @@ -27,16 +30,12 @@ export default function Welcome() { } } - async function setUserHasSeenWelcome() { - if (user) { - await updateUser(user.id, { ['shouldShowWelcome']: false }) - } + const setUserHasSeenWelcome = async () => { + if (user) await updateUser(user.id, { ['shouldShowWelcome']: false }) } const [groupSelectorOpen, setGroupSelectorOpen] = useState(false) - if (!user || (!user.shouldShowWelcome && !groupSelectorOpen)) return <> - const toggleOpen = (isOpen: boolean) => { setUserHasSeenWelcome() setOpen(isOpen) @@ -45,6 +44,12 @@ export default function Welcome() { setGroupSelectorOpen(true) } } + + const isTwitch = useIsTwitch(user) + + if (isTwitch || !user || (!user.shouldShowWelcome && !groupSelectorOpen)) + return <> + return ( <> { + const router = useRouter() + const isTwitch = router.pathname === '/twitch' + + useEffect(() => { + console.log('twich?', isTwitch) + + if (isTwitch && user?.shouldShowWelcome) { + updateUser(user.id, { ['shouldShowWelcome']: false }) + } + }, [isTwitch, user]) + + return isTwitch +} + function PageIndicator(props: { page: number; totalpages: number }) { const { page, totalpages } = props return ( diff --git a/web/pages/twitch.tsx b/web/pages/twitch.tsx index 46856eaf..22d3152d 100644 --- a/web/pages/twitch.tsx +++ b/web/pages/twitch.tsx @@ -1,8 +1,7 @@ import { LinkIcon } from '@heroicons/react/solid' import clsx from 'clsx' import { PrivateUser, User } from 'common/user' -import Link from 'next/link' -import { MouseEventHandler, ReactNode, useState } from 'react' +import { MouseEventHandler, ReactNode, useEffect, useState } from 'react' import toast from 'react-hot-toast' import { Button } from 'web/components/button' @@ -17,11 +16,7 @@ import { Title } from 'web/components/title' import { useSaveReferral } from 'web/hooks/use-save-referral' import { useTracking } from 'web/hooks/use-tracking' import { usePrivateUser, useUser } from 'web/hooks/use-user' -import { - firebaseLogin, - getUserAndPrivateUser, - updatePrivateUser, -} from 'web/lib/firebase/users' +import { firebaseLogin, updatePrivateUser } from 'web/lib/firebase/users' import { track } from 'web/lib/service/analytics' import { getDockURLForUser, @@ -40,23 +35,32 @@ function ButtonGetStarted(props: { const { user, privateUser, buttonClass, spinnerClass } = props const [isLoading, setLoading] = useState(false) + const needsRelink = privateUser?.twitchInfo?.twitchName && privateUser?.twitchInfo?.needsRelinking + const [waitingForUser, setWaitingForUser] = useState(false) + useEffect(() => { + if (waitingForUser && user && privateUser) { + setWaitingForUser(false) + + if (privateUser.twitchInfo?.twitchName) return // If we've already linked Twitch, no need to do so again + + setLoading(true) + + linkTwitchAccountRedirect(user, privateUser).then(() => { + setLoading(false) + }) + } + }, [user, privateUser, waitingForUser]) + const callback = user && privateUser ? () => linkTwitchAccountRedirect(user, privateUser) : async () => { - const result = await firebaseLogin() - - const userId = result.user.uid - const { user, privateUser } = await getUserAndPrivateUser(userId) - if (!user || !privateUser) return - - if (privateUser.twitchInfo?.twitchName) return // If we've already linked Twitch, no need to do so again - - await linkTwitchAccountRedirect(user, privateUser) + await firebaseLogin() + setWaitingForUser(true) } const getStarted = async () => { @@ -110,20 +114,9 @@ function TwitchPlaysManifoldMarkets(props: { className={'!-my-0 md:block'} /> - -
- Similar to Twitch channel point predictions, Manifold Markets allows - you to create and feature on stream any question you like with users - predicting to earn play money. -
-
- The key difference is that Manifold's questions function more like a - stock market and viewers can buy and sell shares over the course of - the event and not just at the start. The market will eventually - resolve to yes or no at which point the winning shareholders will - receive their profit. -
- Start playing now by logging in with Google and typing commands in chat! + + Start betting on Twitch now by linking your account and typing commands + in chat! {twitchUser && !twitchInfo.needsRelinking ? (