97 lines
2.6 KiB
TypeScript
97 lines
2.6 KiB
TypeScript
import clsx from 'clsx'
|
|
import React, { useState } from 'react'
|
|
import toast from 'react-hot-toast'
|
|
|
|
import { copyToClipboard } from 'web/lib/util/copy'
|
|
import { linkTwitchAccount } from 'web/lib/twitch/link-twitch-account'
|
|
import { LinkIcon } from '@heroicons/react/solid'
|
|
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() {
|
|
const user = useUser()
|
|
const privateUser = usePrivateUser()
|
|
|
|
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=${twitchToken}`)
|
|
toast.success('Overlay link copied!', {
|
|
icon: linkIcon,
|
|
})
|
|
}
|
|
|
|
const copyDockLink = async () => {
|
|
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>
|
|
|
|
{!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>
|
|
|
|
{twitchToken && (
|
|
<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 color="blue" size="lg" onClick={copyOverlayLink}>
|
|
Copy overlay link
|
|
</Button>
|
|
<Button color="indigo" size="lg" onClick={copyDockLink}>
|
|
Copy dock link
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|