delete works

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

@@ -0,0 +1,33 @@
+import { ApiConfig } from "../../ApiConfig";
+
+export interface DeleteTwitchEventRuleResponse {
+  success: boolean,
+}
+
+export async function DeleteTwitchEventRule(ruleToken: string) : Promise<DeleteTwitchEventRuleResponse> 
+{
+  const endpoint = new ApiConfig().deleteTwitchEventRule(ruleToken);
+  
+  return await fetch(endpoint, {
+    method: 'DELETE',
+    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/components/src/elements/BackLink.tsx

@@ -0,0 +1,18 @@
+import React  from 'react';
+import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons';
+
+interface Props {
+  link: string,
+  text?: string,
+}
+
+function BackLink(props: Props) {
+  const linkText = props.text === undefined ? 'Back' : props.text;
+  return (
+    <Link to={props.link}><FontAwesomeIcon icon={faAngleLeft} title={linkText} /> {linkText}</Link>
+  )
+}
+
+export { BackLink };

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

@@ -1,12 +1,12 @@
 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 { DeleteTwitchEventRule } from '@storyteller/components/src/api/storyteller/twitch_event_rules/DeleteTwitchEventRule';
+import { BackLink } from '@storyteller/components/src/elements/BackLink';
 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 { Link, useHistory, useParams } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBox, faDonate, faGem, faLightbulb, faTerminal } from '@fortawesome/free-solid-svg-icons';
-import { useParams } from 'react-router-dom';
+import { faAngleLeft, faTrash } from '@fortawesome/free-solid-svg-icons';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -15,6 +15,8 @@ interface Props {
 function TtsConfigsDeleteRulePage(props: Props) {
   const { token } : { token : string } = useParams();
 
+  const history = useHistory();
+
   const [twitchEventRule, setTwitchEventRule] = useState<TwitchEventRule|undefined>(undefined);
 
   const getTwitchEventRule = useCallback(async (token: string) => {
@@ -31,6 +33,20 @@ function TtsConfigsDeleteRulePage(props: Props) {
     getTwitchEventRule(token);
   }, [getTwitchEventRule, token]);
 
+  const indexLink = '/tts_configs';
+
+  const handleDeleteFormSubmit = async (ev: React.FormEvent<HTMLFormElement>) : Promise<boolean> => {
+    ev.preventDefault();
+
+    const result = await DeleteTwitchEventRule(token);
+    if (result.success) {
+      history.push(indexLink);
+    }
+
+    return false;
+  }
+
+
   if (!props.sessionWrapper.isLoggedIn()) {
     return <h1>Must Log In</h1>;
   }
@@ -44,12 +60,27 @@ function TtsConfigsDeleteRulePage(props: Props) {
       <div className="section">
         <h1 className="title"> Delete Rule ? </h1>
       </div>
+
+      <br />
+
       <div className="content">
         <TwitchEventRuleElement rule={twitchEventRule} hideButtons={true} />
       </div>
 
       <br />
+
+      <form onSubmit={handleDeleteFormSubmit}>
+        <button className="button is-large is-fullwidth is-danger">
+          <FontAwesomeIcon icon={faTrash} />&nbsp;Delete
+        </button>
+      </form>
+      
       <br />
+
+      <Link to={indexLink} className="button is-large is-fullwidth is-info is-outlined">
+        <FontAwesomeIcon icon={faAngleLeft} />&nbsp;Cancel / Go Back
+      </Link>
+
     </>
   )
 }