reorder request works!!

packages/components/src/api/ApiConfig.ts

@@ -357,6 +357,10 @@ class ApiConfig {
     return `${this.getScheme()}://${this.getNewApiHost()}/twitch/event_rule/create`;
   }
 
+  reorderTwitchEventRules() : string {
+    return `${this.getScheme()}://${this.getNewApiHost()}/twitch/event_rule/reorder`;
+  }
+
   getTwitchEventRule(eventRuleToken: string) : string {
     return `${this.getScheme()}://${this.getNewApiHost()}/twitch/event_rule/${eventRuleToken}/info`;
   }

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

@@ -0,0 +1,58 @@
+import { ApiConfig } from "../../ApiConfig";
+
+export interface RuleTokenPositionPair {
+  rule_token: string,
+  position: number,
+}
+
+export interface ReorderTwitchEventRulesRequest {
+  rule_token_position_pairs: RuleTokenPositionPair[],
+}
+
+export interface ReorderTwitchEventRulesSuccessResponse {
+  success: boolean,
+}
+
+export interface ReorderTwitchEventRulesErrorResponse {
+  success: boolean,
+}
+
+type ReorderTwitchEventRulesResponse = ReorderTwitchEventRulesSuccessResponse | ReorderTwitchEventRulesErrorResponse;
+
+export function ReorderTwitchEventRulesIsOk(response: ReorderTwitchEventRulesResponse): response is ReorderTwitchEventRulesSuccessResponse {
+  return response?.success === true;
+}
+
+export function ReorderTwitchEventRulesIsError(response: ReorderTwitchEventRulesResponse): response is ReorderTwitchEventRulesErrorResponse {
+  return response?.success === false;
+}
+
+export async function ReorderTwitchEventRules(request: ReorderTwitchEventRulesRequest) : Promise<ReorderTwitchEventRulesResponse> 
+{
+  const endpoint = new ApiConfig().reorderTwitchEventRules();
+  
+  return await fetch(endpoint, {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+    },
+    credentials: 'include',
+    body: JSON.stringify(request),
+  })
+  .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/pages/tts_configs/TtsConfigsReorderPage.tsx

@@ -1,14 +1,15 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
 import { ListTwitchEventRules, ListTwitchEventRulesIsError, ListTwitchEventRulesIsOk, TwitchEventRule } from '@storyteller/components/src/api/storyteller/twitch_event_rules/ListTwitchEventRules';
-import { TwitchEventRuleElement } from './rule_cards/TwitchEventRuleElement';
+import { ReorderTwitchEventRules, ReorderTwitchEventRulesIsOk, ReorderTwitchEventRulesRequest } from '@storyteller/components/src/api/storyteller/twitch_event_rules/ReorderTwitchEventRules';
 import { TwitchEventCategory, TWITCH_EVENT_CATEGORY_BY_STRING } 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, faHeart, faLightbulb, faMeteor, faPlus, faSort, faTerminal } from '@fortawesome/free-solid-svg-icons';
+import { faBox, faDonate, faGem, faHeart, faLightbulb, faMeteor, faPlus, faSave, faSort, faTerminal } from '@fortawesome/free-solid-svg-icons';
 import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels';
 import { Link, useHistory, useParams } from 'react-router-dom';
 import { ReorderableTwitchEventRuleElement } from './rule_cards/ReorderableTwitchEventRuleElement';
+import { parseIsolatedEntityName } from 'typescript';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -90,6 +91,27 @@ function TtsConfigsReorderPage(props: Props) {
     setTwitchEventRules(newEventRules);
   }
 
+  const handleSaveOrderings = async (ev: React.FormEvent<HTMLButtonElement>) : Promise<boolean> => {
+    
+    const pairs = twitchEventRules.map((rule, index) => {
+      return {
+        rule_token: rule.token,
+        position: index,
+      }
+    })
+
+    const request : ReorderTwitchEventRulesRequest = {
+      rule_token_position_pairs: pairs,
+    };
+
+    const result = await ReorderTwitchEventRules(request);
+    if (result.success) {
+      history.push(indexLink);
+    }
+
+    return false;
+  }
+
   if (!props.sessionWrapper.isLoggedIn()) {
     return <h1>Must Log In</h1>;
   }
@@ -126,8 +148,12 @@ function TtsConfigsReorderPage(props: Props) {
         })}
       </div>
 
-      <br />
-      <br />
+      <button 
+        className="button is-large is-fullwidth is-primary"
+        onClick={handleSaveOrderings}
+        >
+        Save Orderings &nbsp;<FontAwesomeIcon icon={faSave} />
+      </button>
     </>
   )
 }