twitch panel logic

web/components/twitch-panel.tsx

@@ -3,120 +3,94 @@ import React, { useState } from 'react'
 import toast from 'react-hot-toast'
 
 import { copyToClipboard } from 'web/lib/util/copy'
-import { initLinkTwitchAccount } from 'web/lib/twitch/link-twitch-account'
+import { linkTwitchAccount } from 'web/lib/twitch/link-twitch-account'
 import { LinkIcon } from '@heroicons/react/solid'
-import { User, PrivateUser } from 'common/user'
+import { track } from 'web/lib/service/analytics'
+import { Button } from './button'
+import { LoadingIndicator } from './loading-indicator'
+import { Row } from './layout/row'
+import { usePrivateUser, useUser } from 'web/hooks/use-user'
 
-export function TwitchPanel(props: {
-  auth: { user: User; privateUser: PrivateUser }
-}) {
-  const { user, privateUser } = props.auth
+export function TwitchPanel() {
+  const user = useUser()
+  const privateUser = usePrivateUser()
 
-  const [twitchToken, setTwitchToken] = useState('')
-  const [twitchLoading, setTwitchLoading] = useState(false)
-  const [twitchLinkError, setTwitchLinkError] = useState('')
-  const [controlToken, setControlToken] = useState<string | undefined>(
-    undefined
-  )
-
-  const linkTwitchAccount = async () => {
-    if (!privateUser.apiKey) return // TODO: handle missing API key
-    try {
-      setTwitchLoading(true)
-      const [twitchAuthURL, linkSuccessPromise] = await initLinkTwitchAccount(
-        privateUser.id,
-        privateUser.apiKey
-      )
-      window.open(twitchAuthURL)
-      const data = await linkSuccessPromise
-      setTwitchToken(data.twitchName)
-      setControlToken(data.controlToken)
-    } catch (e) {
-      console.error(e)
-      toast.error('Failed to link Twitch account: ' + (e as Object).toString())
-    } finally {
-      setTwitchLoading(false)
-    }
-  }
+  const twitchName = privateUser?.twitchInfo?.twitchName
+  const twitchToken = privateUser?.twitchInfo?.controlToken
 
   const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />
+
   const copyOverlayLink = async () => {
-    copyToClipboard(`http://localhost:1000/overlay?t=${controlToken}`)
+    copyToClipboard(`http://localhost:1000/overlay?t=${twitchToken}`)
     toast.success('Overlay link copied!', {
       icon: linkIcon,
     })
   }
+
   const copyDockLink = async () => {
-    copyToClipboard(`http://localhost:1000/dock?t=${controlToken}`)
+    copyToClipboard(`http://localhost:1000/dock?t=${twitchToken}`)
     toast.success('Dock link copied!', {
       icon: linkIcon,
     })
   }
 
+  const [twitchLoading, setTwitchLoading] = useState(false)
+
+  const createLink = async () => {
+    if (!user || !privateUser) return
+    setTwitchLoading(true)
+
+    const promise = linkTwitchAccount(user, privateUser)
+    track('link twitch from profile')
+    await promise
+
+    setTwitchLoading(false)
+  }
+
   return (
     <>
       <div>
         <label className="label">Twitch</label>
-        <div className="relative flex w-full justify-items-stretch">
-          <input
-            type="text"
-            placeholder="Click link to connect your Twitch account"
-            className="input input-bordered w-full"
-            value={twitchToken}
-            readOnly
-            style={{
-              borderTopRightRadius: '0',
-              borderBottomRightRadius: '0',
-            }}
-          />
-          <button
-            className={clsx(
-              'btn btn-secondary btn-square p-2',
-              twitchLoading ? 'loading' : ''
-            )}
-            onClick={linkTwitchAccount}
-            style={{
-              borderTopLeftRadius: '0',
-              borderBottomLeftRadius: '0',
-            }}
-          >
-            {!twitchLoading && <LinkIcon />}
-          </button>
-        </div>
+
+        {!twitchName ? (
+          <Row>
+            <Button
+              color="indigo"
+              onClick={createLink}
+              disabled={twitchLoading}
+            >
+              Link your Twitch account
+            </Button>
+            {twitchLoading && <LoadingIndicator className="ml-4" />}
+          </Row>
+        ) : (
+          <Row>
+            <span className="mr-4 text-gray-500">Linked Twitch account</span>{' '}
+            {twitchName}
+          </Row>
+        )}
       </div>
 
-      <span className="text-sm text-red-400">Not editable for now</span>
-
-      <div>
-        <div className="flex w-full">
-          <div
-            className={clsx(
-              'flex grow gap-4',
-              twitchToken ? '' : 'tooltip tooltip-top'
-            )}
-            data-tip="You must link your Twitch account first"
-          >
-            <button
+      {twitchToken && (
+        <div>
+          <div className="flex w-full">
+            <div
               className={clsx(
-                'btn grow',
-                twitchToken ? 'btn-primary' : 'btn-disabled'
+                'flex grow gap-4',
+                twitchToken ? '' : 'tooltip tooltip-top'
               )}
-              onClick={copyOverlayLink}
+              data-tip="You must link your Twitch account first"
             >
-              Copy overlay link
-            </button>
-            <button
-              className={clsx(
-                'btn grow',
-                twitchToken ? 'btn-primary' : 'btn-disabled'
-              )}
-              onClick={copyDockLink}
-            >
-              Copy dock link
-            </button>
+              <Button color="blue" size="lg" onClick={copyOverlayLink}>
+                Copy overlay link
+              </Button>
+              <Button color="indigo" size="lg" onClick={copyDockLink}>
+                Copy dock link
+              </Button>
+            </div>
           </div>
         </div>
-      </div>
+      )}
     </>
   )
 }

web/pages/profile.tsx

@@ -238,7 +238,7 @@ export default function ProfilePage(props: {
             </div>
           </div>
 
-          <TwitchPanel auth={props.auth} />
+          <TwitchPanel />
         </Col>
       </Col>
     </Page>