Bot linking button functional.

web/components/profile/twitch-panel.tsx

@@ -6,38 +6,101 @@ import { LinkIcon } from '@heroicons/react/solid'
 import { usePrivateUser, useUser } from 'web/hooks/use-user'
 import { updatePrivateUser } from 'web/lib/firebase/users'
 import { track } from 'web/lib/service/analytics'
-import { linkTwitchAccountRedirect } from 'web/lib/twitch/link-twitch-account'
+import {
+  linkTwitchAccountRedirect,
+  updateBotEnabledForUser,
+} from 'web/lib/twitch/link-twitch-account'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { Button, ColorType } from './../button'
 import { Row } from './../layout/row'
 import { LoadingIndicator } from './../loading-indicator'
+import { PrivateUser } from 'common/user'
 
 function BouncyButton(props: {
   children: ReactNode
   onClick?: MouseEventHandler<any>
   color?: ColorType
+  className?: string
 }) {
-  const { children, onClick, color } = props
+  const { children, onClick, color, className } = props
   return (
     <Button
       color={color}
       size="lg"
       onClick={onClick}
-      className="btn h-[inherit] flex-shrink-[inherit] border-none font-normal normal-case"
+      className={clsx(
+        'btn h-[inherit] flex-shrink-[inherit] border-none font-normal normal-case',
+        className
+      )}
     >
       {children}
     </Button>
   )
 }
 
+function BotConnectButton(props: {
+  privateUser: PrivateUser | null | undefined
+}) {
+  const { privateUser } = props
+  const [loading, setLoading] = useState(false)
+
+  const updateBotConnected = (connected: boolean) => async () => {
+    if (!privateUser) return
+    const twitchInfo = privateUser.twitchInfo
+    if (!twitchInfo) return
+
+    const error = connected
+      ? 'Failed to add bot to your channel'
+      : 'Failed to remove bot from your channel'
+    const success = connected
+      ? 'Added bot to your channel'
+      : 'Removed bot from your channel'
+
+    setLoading(true)
+    toast.promise(
+      updateBotEnabledForUser(privateUser, connected).then(() =>
+        updatePrivateUser(privateUser.id, {
+          twitchInfo: { ...twitchInfo, botEnabled: connected },
+        })
+      ),
+      { loading: 'Updating bot settings...', error, success }
+    )
+    try {
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      {privateUser?.twitchInfo?.botEnabled ? (
+        <BouncyButton
+          color="red"
+          onClick={updateBotConnected(false)}
+          className={clsx(loading && 'btn-disabled')}
+        >
+          Remove bot from your channel
+        </BouncyButton>
+      ) : (
+        <BouncyButton
+          color="green"
+          onClick={updateBotConnected(true)}
+          className={clsx(loading && 'btn-disabled')}
+        >
+          Add bot to your channel
+        </BouncyButton>
+      )}
+    </>
+  )
+}
+
 export function TwitchPanel() {
   const user = useUser()
   const privateUser = usePrivateUser()
 
   const twitchInfo = privateUser?.twitchInfo
-  const twitchName = privateUser?.twitchInfo?.twitchName
+  const twitchName = twitchInfo?.twitchName
-  const twitchToken = privateUser?.twitchInfo?.controlToken
+  const twitchToken = twitchInfo?.controlToken
-  const twitchBotConnected = privateUser?.twitchInfo?.botEnabled
 
   const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />
 
@@ -55,13 +118,6 @@ export function TwitchPanel() {
     })
   }
 
-  const updateBotConnected = (connected: boolean) => async () => {
-    if (user && twitchInfo) {
-      twitchInfo.botEnabled = connected
-      await updatePrivateUser(user.id, { twitchInfo })
-    }
-  }
-
   const [twitchLoading, setTwitchLoading] = useState(false)
 
   const createLink = async () => {
@@ -115,17 +171,12 @@ export function TwitchPanel() {
               <BouncyButton color="indigo" onClick={copyDockLink}>
                 Copy dock link
               </BouncyButton>
-              {twitchBotConnected ? (
-                <BouncyButton color="red" onClick={updateBotConnected(false)}>
-                  Remove bot from your channel
-                </BouncyButton>
-              ) : (
-                <BouncyButton color="green" onClick={updateBotConnected(true)}>
-                  Add bot to your channel
-                </BouncyButton>
-              )}
             </div>
           </div>
+          <div className="mt-4" />
+          <div className="flex w-full">
+            <BotConnectButton privateUser={privateUser} />
+          </div>
         </div>
       )}
     </>

web/lib/twitch/link-twitch-account.ts

@@ -1,22 +1,26 @@
 import { PrivateUser, User } from 'common/user'
 import { generateNewApiKey } from '../api/api-key'
 
-const TWITCH_BOT_PUBLIC_URL = 'https://king-prawn-app-5btyw.ondigitalocean.app' // TODO: Add this to env config appropriately
+const TWITCH_BOT_PUBLIC_URL = 'http://localhost:9172' //'https://king-prawn-app-5btyw.ondigitalocean.app' // TODO: Add this to env config appropriately
+
+function postToBot(url: string, body: any): Promise<Response> {
+  return fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  })
+}
 
 export async function initLinkTwitchAccount(
   manifoldUserID: string,
   manifoldUserAPIKey: string
 ): Promise<[string, Promise<{ twitchName: string; controlToken: string }>]> {
-  const response = await fetch(`${TWITCH_BOT_PUBLIC_URL}/api/linkInit`, {
+  const response = await postToBot(`${TWITCH_BOT_PUBLIC_URL}/api/linkInit`, {
-    method: 'POST',
+    manifoldID: manifoldUserID,
-    headers: {
+    apiKey: manifoldUserAPIKey,
-      'Content-Type': 'application/json',
+    redirectURL: window.location.href,
-    },
-    body: JSON.stringify({
-      manifoldID: manifoldUserID,
-      apiKey: manifoldUserAPIKey,
-      redirectURL: window.location.href,
-    }),
   })
   const responseData = await response.json()
   if (!response.ok) {
@@ -39,3 +43,26 @@ export async function linkTwitchAccountRedirect(
 
   window.location.href = twitchAuthURL
 }
+
+export async function updateBotEnabledForUser(
+  privateUser: PrivateUser,
+  botEnabled: boolean
+) {
+  if (botEnabled) {
+    return postToBot(`${TWITCH_BOT_PUBLIC_URL}/registerchanneltwitch`, {
+      apiKey: privateUser.apiKey,
+    })
+      .then((r) => r.json())
+      .then((r) => {
+        if (!r.success) throw new Error(r.message)
+      })
+  } else {
+    return postToBot(`${TWITCH_BOT_PUBLIC_URL}/unregisterchanneltwitch`, {
+      apiKey: privateUser.apiKey,
+    })
+      .then((r) => r.json())
+      .then((r) => {
+        if (!r.success) throw new Error(r.message)
+      })
+  }
+}