Twitch username

packages/components/src/api/storyteller/twitch_oauth/CheckTwitchOauth.ts

@@ -3,6 +3,8 @@ import { ApiConfig } from "../../ApiConfig";
 export interface CheckTwitchOauthSuccessResponse {
   success: boolean,
   oauth_token_found: boolean,
+  maybe_twitch_username?: string,
+  maybe_twitch_username_lowercase?: string,
 }
 
 export interface CheckTwitchOauthErrorResponse {

packages/components/src/urls/StorytellerUrlConfig.ts

@@ -28,6 +28,10 @@ export class StorytellerUrlConfig {
     return `${this.getScheme()}://${this.getApiHost()}/twitch/oauth/enroll_redirect_begin`;
   }
 
+  obsPageFortwitch(twitchUsername: string) : string {
+    return `${this.getScheme()}://${this.getObsHost()}/twitch/${twitchUsername}`;
+  }
+
   // =============== API HOSTS ===============
 
   private getApiHost() : string {

packages/storyteller/src/pages/obs_configs/ObsConfigsPage.tsx

@@ -1,19 +1,39 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faDiscord } from '@fortawesome/free-brands-svg-icons';
+import { CheckTwitchOauth, CheckTwitchOauthIsError, CheckTwitchOauthIsOk } from '@storyteller/components/src/api/storyteller/twitch_oauth/CheckTwitchOauth';
+import { StorytellerUrlConfig } from '@storyteller/components/src/urls/StorytellerUrlConfig';
+import { faArrowAltCircleUp, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 
 interface Props {
   sessionWrapper: SessionWrapper,
 }
 
 function ObsConfigsPage(props: Props) {
+  const [maybeTwitchUsername, setMaybeTwitchUsername] = useState("");
+
+  const checkTwitchOauth = useCallback(async () => {
+    const result = await CheckTwitchOauth();
+
+    if (CheckTwitchOauthIsOk(result)) {
+      setMaybeTwitchUsername(result.maybe_twitch_username || "");
+    } else if (CheckTwitchOauthIsError(result))  {
+    }
+  }, []);
+
+  useEffect(() => {
+    checkTwitchOauth();
+  }, [])
+
 
   if (!props.sessionWrapper.isLoggedIn()) {
     return <h1>Must Log In</h1>;
   }
 
-  const obsUrl = 'https://obs.storyteller.io/twitch/YOUR_USERNAME';
+  const username = !!maybeTwitchUsername ? maybeTwitchUsername : 'YOUR_USERNAME';
+
+  const obsUrl = new StorytellerUrlConfig().obsPageFortwitch(username);
 
   return (
     <div>
@@ -61,6 +81,17 @@ function ObsConfigsPage(props: Props) {
 
           <br />
 
+          <a
+            href={obsUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="button is-large is-info is-fullwidth"
+            >
+              Open In New Tab&nbsp;<FontAwesomeIcon icon={faExternalLinkAlt} />
+          </a>
+
+          <br />
+
           <p>This page is a work in progress! It will include instructions, more configs, etc.</p>
 
         </div>