work in progress on response / tts models

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

@@ -40,13 +40,6 @@ function TtsConfigsEditRulePage(props: Props) {
   const [modifiedEventResponse, setModifiedEventResponse] = useState<EventResponse>({});
   const [ruleIsDisabled, setRuleIsDisabled] = useState(false);
 
-  // ========== ??? ==========
-
-  // TODO: GET RID OF THIS
-  const [eventResponseType, setEventResponseType] = useState<EventResponseType>(EventResponseType.TtsSingleVoice);
-  // TODO: GET RID OF THIS
-  const [ttsModelToken, setTtsModelToken] = useState(''); 
-
   const getTwitchEventRule = useCallback(async (token: string) => {
     const response = await GetTwitchEventRule(token);
 
@@ -61,15 +54,6 @@ function TtsConfigsEditRulePage(props: Props) {
       setModifiedEventResponse(response.twitch_event_rule.event_response);
       setRuleIsDisabled(response.twitch_event_rule.rule_is_disabled);
 
-      // TODO: MOVE THIS
-      if (!!response.twitch_event_rule.event_response.tts_single_voice) {
-        setEventResponseType(EventResponseType.TtsSingleVoice);
-        setTtsModelToken(response.twitch_event_rule.event_response.tts_single_voice.tts_model_token)
-      } else if (!!response.twitch_event_rule.event_response.tts_random_voice) {
-        setEventResponseType(EventResponseType.TtsRandomVoice);
-        // TODO
-      }
-
     } else if (GetTwitchEventRuleIsError(response))  {
       // TODO
     }
@@ -79,26 +63,14 @@ function TtsConfigsEditRulePage(props: Props) {
     getTwitchEventRule(token);
   }, [getTwitchEventRule, token]);
 
-  const updateTtsModelToken = (token: string) => {
-    let response : EventResponse = {};
-
-    switch (eventResponseType) {
-      case EventResponseType.TtsSingleVoice:
-        response.tts_single_voice = {
-          tts_model_token: token,
-        }
-        break;
-      case EventResponseType.TtsRandomVoice:
-        break;
-    }
-
-    setTtsModelToken(token);
-  }
-
   const updateModifiedEventMatchPredicate = (predicate: EventMatchPredicate) => {
     setModifiedEventMatchPredicate(predicate);
   }
 
+  const updateModifiedEventResponse = (response: EventResponse) => {
+    setModifiedEventResponse(response);
+  }
+
   const handleFormSubmit = async (ev: React.FormEvent<HTMLFormElement>) : Promise<boolean> => {
     ev.preventDefault();
 
@@ -161,18 +133,16 @@ function TtsConfigsEditRulePage(props: Props) {
           twitchEventCategory={twitchEventRule.event_category}
           serverEventMatchPredicate={serverEventMatchPredicate}
           updateModifiedEventMatchPredicate={updateModifiedEventMatchPredicate}
-          allTtsModels={props.allTtsModels}
-          allTtsModelsByToken={props.allTtsModelsByToken}
           />
 
         <br />
         <br />
 
         <EventResponseComponent
+          serverEventResponse={serverEventResponse}
+          updateModifiedEventResponse={updateModifiedEventResponse}
           allTtsModels={props.allTtsModels}
           allTtsModelsByToken={props.allTtsModelsByToken}
-          setTtsModelToken={updateTtsModelToken}
-          ttsModelToken={ttsModelToken}
           />
 
         <h2 className="title is-4">This is the rule:</h2>

packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/EventMatchPredicateBuilderComponent.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels';
 import { BitsRuleType } from './types/BitsRuleType';
 import { TwitchEventCategory } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/TwitchEventCategory';
 import { EventMatchPredicate } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/EventMatchPredicate';
@@ -22,10 +21,6 @@ interface EventMatchPredicateBuilderComponentProps {
 
   // Updates sent back up the tree
   updateModifiedEventMatchPredicate: (predicate: EventMatchPredicate) => void,
-
-  // FakeYou voices
-  allTtsModels: TtsModelListItem[],
-  allTtsModelsByToken: Map<string, TtsModelListItem>,
 };
 
 function EventMatchPredicateBuilderComponent(props: EventMatchPredicateBuilderComponentProps) {

packages/storyteller/src/pages/tts_configs/event_response_builder/EventResponseComponent.tsx

@@ -1,13 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels';
-import { FakeYouExternalLink } from '@storyteller/components/src/elements/FakeYouExternalLink';
 import { TtsSingleVoiceForm } from './TtsSingleVoiceForm';
 import { EventResponseType } from './EventResponseType';
+import { EventResponse } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/EventResponse';
 
 interface EventResponseComponentProps {
-  // Form state communicated upstream
-  ttsModelToken: string,
-  setTtsModelToken: (token: string) => void,
+  // Original response from server.
+  // (also immutable for sanity and because we may lose info on UI changes)
+  serverEventResponse: EventResponse,
+
+  // Updates sent back up the tree
+  updateModifiedEventResponse: (response: EventResponse) => void,
 
   // FakeYou voices
   allTtsModels: TtsModelListItem[],
@@ -15,14 +18,52 @@ interface EventResponseComponentProps {
 };
 
 function EventResponseComponent(props: EventResponseComponentProps) {
+  // ========== Core UI flow ==========
+
   const [eventResponseType, setEventResponseType] = useState<EventResponseType>(EventResponseType.TtsSingleVoice);
 
+  // ========== Cached Values for Editing ==========
+
+  const [selectedTtsModelTokens, setSelectedTtsModelTokens] = useState<string[]>([]);
+
+  // NB: useState is not always setting from props correctly (after several re-renders)
+  // The following answers suggests using useEffect:
+  //  https://stackoverflow.com/a/54866051 (less clear by also using useState(), but good comments)
+  //  https://stackoverflow.com/a/62982753
+  useEffect(() => {
+    let newEventResponseType = EventResponseType.TtsSingleVoice;
+    
+    if (!!props.serverEventResponse.tts_single_voice) {
+      newEventResponseType = EventResponseType.TtsSingleVoice;
+    } else if (!!props.serverEventResponse.tts_random_voice) {
+      newEventResponseType = EventResponseType.TtsRandomVoice;
+    }
+
+    setEventResponseType(newEventResponseType);
+
+  }, [props.serverEventResponse]);
+
   const handleChangedEventResponseType = (ev: React.FormEvent<HTMLSelectElement>) : boolean => {
     const value = (ev.target as HTMLSelectElement).value;
     const responseType = value as EventResponseType;
     setEventResponseType(responseType);
     return true;
   }
+
+  const handleChangedTtsModelToken = (token: string) => {
+    // We may be only updating to a single token, but we want to be able to navigate back to 
+    // the "random voices" view, etc.
+    let updatedTokens = [... selectedTtsModelTokens];
+
+    if (updatedTokens.length > 1) {
+      updatedTokens[0] = token;
+    } else if (updatedTokens.length === 0) {
+      updatedTokens.push(token);
+    }
+
+    setSelectedTtsModelTokens(updatedTokens);
+  }
+
   return (
     <>
       <h2 className="title is-4">3) Pick how to respond</h2>
@@ -47,10 +88,10 @@ function EventResponseComponent(props: EventResponseComponentProps) {
       <h2 className="title is-4">4) Configure the response</h2>
 
       <TtsSingleVoiceForm
+        selectedTtsModelTokens={selectedTtsModelTokens}
+        updateSelectedTtsModelToken={handleChangedTtsModelToken}
         allTtsModels={props.allTtsModels}
         allTtsModelsByToken={props.allTtsModelsByToken}
-        setTtsModelToken={props.setTtsModelToken}
-        ttsModelToken={props.ttsModelToken}
         />
 
       <br />

packages/storyteller/src/pages/tts_configs/event_response_builder/TtsSingleVoiceForm.tsx

@@ -3,9 +3,8 @@ import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsMod
 import { FakeYouExternalLink } from '@storyteller/components/src/elements/FakeYouExternalLink';
 
 interface TtsSingleVoiceFormProps {
-  // Storyteller TTS configs
-  ttsModelToken: string,
-  setTtsModelToken: (token: string) => void,
+  selectedTtsModelTokens: string[],
+  updateSelectedTtsModelToken: (token: string) => void,
 
   // FakeYou voices
   allTtsModels: TtsModelListItem[],
@@ -20,8 +19,8 @@ function TtsSingleVoiceForm(props: TtsSingleVoiceFormProps) {
   //  https://stackoverflow.com/a/54866051 (less clear by also using useState(), but good comments)
   //  https://stackoverflow.com/a/62982753
   useEffect(() => {
-    setTtsModelToken(props.ttsModelToken);
-  }, [props.ttsModelToken]);
+    //setTtsModelToken(props.ttsModelToken);
+  }, []);
 
 
   const handleModelSelect = (ev: React.FormEvent<HTMLSelectElement>) : boolean => {
@@ -32,7 +31,7 @@ function TtsSingleVoiceForm(props: TtsSingleVoiceFormProps) {
     }
 
     setTtsModelToken(value);
-    props.setTtsModelToken(value);
+    //props.setTtsModelToken(value);
     return true;
   }