Delete Rule WIP

packages/components/src/api/ApiConfig.ts

@@ -357,12 +357,16 @@ class ApiConfig {
     return `${this.getScheme()}://${this.getNewApiHost()}/twitch/event_rule/create`;
   }
 
-  deleteTwitchEventRule(eventRuleToken: string) : string {
-    return `${this.getScheme()}://${this.getNewApiHost()}/twitch/event_rule/delete/${eventRuleToken}`;
+  getTwitchEventRule(eventRuleToken: string) : string {
+    return `${this.getScheme()}://${this.getNewApiHost()}/twitch/event_rule/${eventRuleToken}/info`;
   }
 
   editTwitchEventRule(eventRuleToken: string) : string {
-    return `${this.getScheme()}://${this.getNewApiHost()}/twitch/event_rule/update/${eventRuleToken}`;
+    return `${this.getScheme()}://${this.getNewApiHost()}/twitch/event_rule/${eventRuleToken}/update`;
+  }
+
+  deleteTwitchEventRule(eventRuleToken: string) : string {
+    return `${this.getScheme()}://${this.getNewApiHost()}/twitch/event_rule/${eventRuleToken}/delete`;
   }
 
   obsEventsWebsocket(twitchUsername: string) : string {

packages/components/src/api/storyteller/twitch_event_rules/GetTwitchEventRule.ts

@@ -0,0 +1,62 @@
+import { ApiConfig } from "../../ApiConfig";
+import { EventMatchPredicate } from "./shared/EventMatchPredicate";
+import { EventResponse } from "./shared/EventResponse";
+import { TwitchEventCategory } from "./shared/TwitchEventCategory";
+
+export interface GetTwitchEventRuleSuccessResponse {
+  success: boolean,
+  twitch_event_rule: TwitchEventRule
+}
+
+export interface TwitchEventRule {
+  token: string,
+  event_category: TwitchEventCategory,
+  event_match_predicate: EventMatchPredicate,
+  event_response: EventResponse,
+  user_specified_rule_order: number,
+  rule_is_disabled: boolean,
+  created_at: Date,
+  updated_at: Date,
+}
+
+export interface GetTwitchEventRuleErrorResponse {
+  success: boolean,
+}
+
+type GetTwitchEventRuleResponse = GetTwitchEventRuleSuccessResponse | GetTwitchEventRuleErrorResponse;
+
+export function GetTwitchEventRuleIsOk(response: GetTwitchEventRuleResponse): response is GetTwitchEventRuleSuccessResponse {
+  return response?.success === true;
+}
+
+export function GetTwitchEventRuleIsError(response: GetTwitchEventRuleResponse): response is GetTwitchEventRuleErrorResponse {
+  return response?.success === false;
+}
+
+export async function GetTwitchEventRule(ruleToken: string) : Promise<GetTwitchEventRuleResponse> 
+{
+  const endpoint = new ApiConfig().getTwitchEventRule(ruleToken);
+  
+  return await fetch(endpoint, {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+    },
+    credentials: 'include',
+  })
+  .then(res => res.json())
+  .then(res => {
+    if (!res) {
+      return { success : false }; // TODO: This loses error semantics and is deprecated
+    }
+
+    if (res && 'success' in res) {
+      return res;
+    } else {
+      return { success : false };
+    }
+  })
+  .catch(e => {
+    return { success : false };
+  });
+}

packages/storyteller/src/App.tsx

@@ -17,6 +17,7 @@ import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapp
 import { TopNav } from './layout/TopNav';
 import { initReactI18next } from 'react-i18next';
 import { TtsConfigsCreateRulePage } from './pages/tts_configs/TtsConfigsCreateRulePage';
+import { TtsConfigsDeleteRulePage } from './pages/tts_configs/TtsConfigsDeleteRulePage';
 
 i18n
   .use(initReactI18next) // passes i18n down to react-i18next
@@ -104,6 +105,11 @@ class App extends React.Component<Props, State> {
                   sessionWrapper={this.state.sessionWrapper}
                 />
               </Route>
+              <Route exact={true} path="/tts_configs/delete/:token">
+                <TtsConfigsDeleteRulePage
+                  sessionWrapper={this.state.sessionWrapper}
+                />
+              </Route>
               <Route exact={true} path="/tts_configs">
                 <TtsConfigsIndexPage
                   sessionWrapper={this.state.sessionWrapper}

packages/storyteller/src/pages/tts_configs/TtsConfigsDeleteRulePage.tsx

@@ -0,0 +1,57 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
+import { GetTwitchEventRule, GetTwitchEventRuleIsError, GetTwitchEventRuleIsOk, TwitchEventRule } from '@storyteller/components/src/api/storyteller/twitch_event_rules/GetTwitchEventRule';
+import { TwitchEventRuleElement } from './TwitchEventRuleElement';
+import { TwitchEventCategory } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/TwitchEventCategory';
+import { DiscordLink } from '@storyteller/components/src/elements/DiscordLink';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBox, faDonate, faGem, faLightbulb, faTerminal } from '@fortawesome/free-solid-svg-icons';
+import { useParams } from 'react-router-dom';
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+}
+
+function TtsConfigsDeleteRulePage(props: Props) {
+  const { token } : { token : string } = useParams();
+
+  const [twitchEventRule, setTwitchEventRule] = useState<TwitchEventRule|undefined>(undefined);
+
+  const getTwitchEventRule = useCallback(async (token: string) => {
+    const response = await GetTwitchEventRule(token);
+
+    if (GetTwitchEventRuleIsOk(response)) {
+      setTwitchEventRule(response.twitch_event_rule);
+    } else if (GetTwitchEventRuleIsError(response))  {
+      // TODO
+    }
+  }, []);
+
+  useEffect(() => {
+    getTwitchEventRule(token);
+  }, [getTwitchEventRule, token]);
+
+  if (!props.sessionWrapper.isLoggedIn()) {
+    return <h1>Must Log In</h1>;
+  }
+
+  if (twitchEventRule === undefined) {
+    return <h1>Loading...</h1>;
+  }
+
+  return (
+    <>
+      <div className="section">
+        <h1 className="title"> Delete Rule ? </h1>
+      </div>
+      <div className="content">
+        <TwitchEventRuleElement rule={twitchEventRule} hideButtons={true} />
+      </div>
+
+      <br />
+      <br />
+    </>
+  )
+}
+
+export { TtsConfigsDeleteRulePage }

packages/storyteller/src/pages/tts_configs/TtsConfigsIndexPage.tsx

@@ -3,8 +3,9 @@ import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapp
 import { ListTwitchEventRules, ListTwitchEventRulesIsError, ListTwitchEventRulesIsOk, TwitchEventRule } from '@storyteller/components/src/api/storyteller/twitch_event_rules/ListTwitchEventRules';
 import { TwitchEventRuleElement } from './TwitchEventRuleElement';
 import { TwitchEventCategory } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/TwitchEventCategory';
+import { DiscordLink } from '@storyteller/components/src/elements/DiscordLink';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBox, faCircleNotch, faCoins, faDonate, faExclamation, faGem, faLightbulb, faTerminal } from '@fortawesome/free-solid-svg-icons';
+import { faBox, faDonate, faGem, faLightbulb, faTerminal } from '@fortawesome/free-solid-svg-icons';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -103,7 +104,9 @@ function TtsConfigsIndexPage(props: Props) {
         <h2 className="subtitle is-4">
           We want to build the things you want
         </h2>
-        <p>Can you think of anything we haven't provided? Please let us know in Discord so that we can build it!</p>
+        <p>Can you think of anything we haven't 
+          provided? <DiscordLink text="Please let us know in Discord" iconAfterText={true} /> so 
+          that we can build it!</p>
       </div>
       <br />
       <br />

packages/storyteller/src/pages/tts_configs/TwitchEventRuleElement.tsx

@@ -1,13 +1,17 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
 import { TwitchEventRule } from '@storyteller/components/src/api/storyteller/twitch_event_rules/ListTwitchEventRules';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowDown, faArrowUp, faRulerVertical } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faArrowUp, faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { Link } from 'react-router-dom';
 
 interface Props {
   rule: TwitchEventRule,
+  hideButtons?: boolean,
 }
 
 function TwitchEventRuleElement(props: Props) {
+  const hideButtons = !!props.hideButtons;
+
   let title = "Not Set";
   let subtitle = <></>;
   let description = <></>;
@@ -55,6 +59,43 @@ function TwitchEventRuleElement(props: Props) {
     );
   }
 
+  const editUrl = `/tts_configs/edit/${props.rule.token}`;
+  const deleteUrl = `/tts_configs/delete/${props.rule.token}`;
+
+  let buttons = <></>;
+  if (!hideButtons) {
+    buttons = (
+      <>
+        <footer className="card-footer">
+          <p className="card-footer-item">
+            <span className="icon">
+              <FontAwesomeIcon icon={faArrowUp} />&nbsp;Up
+            </span>
+          </p>
+          <p className="card-footer-item">
+            <span className="icon">
+              <FontAwesomeIcon icon={faArrowDown} />&nbsp;Down
+            </span>
+          </p>
+          <p className="card-footer-item">
+            <span>
+              <Link to={editUrl}>
+                <FontAwesomeIcon icon={faEdit} />&nbsp;Edit
+              </Link>
+            </span>
+          </p>
+          <p className="card-footer-item">
+            <span>
+              <Link to={deleteUrl}>
+                <FontAwesomeIcon icon={faTrash} /> Delete
+              </Link>
+            </span>
+          </p>
+        </footer>
+      </>
+    )
+  }
+
   return (
     <div>
       <div className="card">
@@ -66,28 +107,7 @@ function TwitchEventRuleElement(props: Props) {
             {description}
           </p>
         </div>
-        <footer className="card-footer">
-          <p className="card-footer-item">
-            <span className="icon">
-              <FontAwesomeIcon icon={faArrowUp} />
-            </span>
-          </p>
-          <p className="card-footer-item">
-            <span className="icon">
-              <FontAwesomeIcon icon={faArrowDown} />
-            </span>
-          </p>
-          <p className="card-footer-item">
-            <span>
-              Edit
-            </span>
-          </p>
-          <p className="card-footer-item">
-            <span>
-              Delete
-            </span>
-          </p>
-        </footer>
+        {buttons}
       </div>
       <br />
     </div>