Links update

packages/storyteller-stream-dashboard/src/pages/dashboard/DashboardPage.tsx

@@ -1,4 +1,4 @@
-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 { faVideo, faVolumeUp } from "@fortawesome/free-solid-svg-icons";
@@ -9,12 +9,41 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 import { Link } from "react-router-dom";
 import { MustBeLoggedInView } from "../../layout/MustBeLoggedInView";
+import { StorytellerUrlConfig } from "@storyteller/components/src/urls/StorytellerUrlConfig";
+import {
+  CheckTwitchOauth,
+  CheckTwitchOauthIsError,
+  CheckTwitchOauthIsOk,
+} from "@storyteller/components/src/api/storyteller/twitch_oauth/CheckTwitchOauth";
 
 interface Props {
   sessionWrapper: SessionWrapper;
 }
 
 function DashboardPage(props: Props) {
+  const oauthUrl = new StorytellerUrlConfig().twitchOauthEnrollRedirect();
+
+  const [oauthTokenFound, setOauthTokenFound] = useState(false);
+
+  const checkTwitchOauth = useCallback(async () => {
+    const result = await CheckTwitchOauth();
+
+    if (CheckTwitchOauthIsOk(result)) {
+      setOauthTokenFound(result.oauth_token_found);
+    } else if (CheckTwitchOauthIsError(result)) {
+    }
+  }, []);
+
+  useEffect(() => {
+    checkTwitchOauth();
+  }, [checkTwitchOauth]);
+
+  let twitchText = "Link Your Twitch";
+
+  if (oauthTokenFound) {
+    twitchText = "Re-link Your Twitch";
+  }
+
   if (!props.sessionWrapper.isLoggedIn()) {
     return (
       <>
@@ -38,14 +67,17 @@ function DashboardPage(props: Props) {
                     icon={faTwitch}
                     className="features-icon purple-glow twitch-color dashboard-icon"
                   />
-                  <h4 className="features-title mb-3">Link Your Twitch</h4>
+                  <h4 className="features-title mb-3">{twitchText}</h4>
                   <p className="mb-4">
                     Morbi dapibus commodo porta. Sed faucibus tristique orci in
                     tristique. Praesent quam nunc, fermentum eu feugiat sit.
                   </p>
-                  <button className="btn btn-primary w-100 twitch-btn">
-                    Link Twitch
-                  </button>
+                  <a
+                    href={oauthUrl}
+                    className="btn btn-primary w-100 twitch-btn"
+                  >
+                    {twitchText}
+                  </a>
                 </div>
               </div>
               <div className="col-md-4 d-flex align-items-stretch">

packages/storyteller-stream-dashboard/src/pages/tts_configs/TtsConfigsCreateRulePage.tsx

@@ -19,6 +19,7 @@ import { EventResponseComponent } from "./event_response_builder/EventResponseCo
 import { TwitchEventRuleElement } from "./rule_cards/TwitchEventRuleElement";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleLeft, faSave } from "@fortawesome/free-solid-svg-icons";
+import { MustBeLoggedInView } from "../../layout/MustBeLoggedInView";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -100,7 +101,11 @@ function TtsConfigsCreateRulePage(props: Props) {
   };
 
   if (!props.sessionWrapper.isLoggedIn()) {
-    return <h1>Must Log In</h1>;
+    return (
+      <>
+        <MustBeLoggedInView />
+      </>
+    );
   }
 
   // NB: This is a hypothetical version of what we'll update to

packages/storyteller-stream-dashboard/src/pages/tts_configs/TtsConfigsDeleteRulePage.tsx

@@ -12,6 +12,7 @@ import { Link, useHistory, useParams } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleLeft, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
+import { MustBeLoggedInView } from "../../layout/MustBeLoggedInView";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -57,7 +58,11 @@ function TtsConfigsDeleteRulePage(props: Props) {
   };
 
   if (!props.sessionWrapper.isLoggedIn()) {
-    return <h1>Must Log In</h1>;
+    return (
+      <>
+        <MustBeLoggedInView />
+      </>
+    );
   }
 
   if (twitchEventRule === undefined) {

packages/storyteller-stream-dashboard/src/pages/tts_configs/TtsConfigsEditRulePage.tsx

@@ -19,6 +19,7 @@ import { EventResponse } from "@storyteller/components/src/api/storyteller/twitc
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
 import { EventResponseComponent } from "./event_response_builder/EventResponseComponent";
 import { EventMatchPredicateBuilderComponent } from "./event_match_predicate_builder/EventMatchPredicateBuilderComponent";
+import { MustBeLoggedInView } from "../../layout/MustBeLoggedInView";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -116,7 +117,11 @@ function TtsConfigsEditRulePage(props: Props) {
   };
 
   if (!props.sessionWrapper.isLoggedIn()) {
-    return <h1>Must Log In</h1>;
+    return (
+      <>
+        <MustBeLoggedInView />
+      </>
+    );
   }
 
   if (twitchEventRule === undefined) {

packages/storyteller-stream-dashboard/src/pages/tts_configs/TtsConfigsReorderPage.tsx

@@ -19,6 +19,7 @@ import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
 import { useHistory, useParams } from "react-router-dom";
 import { ReorderableTwitchEventRuleElement } from "./rule_cards/ReorderableTwitchEventRuleElement";
+import { MustBeLoggedInView } from "../../layout/MustBeLoggedInView";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -133,7 +134,11 @@ function TtsConfigsReorderPage(props: Props) {
   };
 
   if (!props.sessionWrapper.isLoggedIn()) {
-    return <h1>Must Log In</h1>;
+    return (
+      <>
+        <MustBeLoggedInView />
+      </>
+    );
   }
 
   return (