retain cheer name / prefix

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

@@ -36,9 +36,12 @@ function TtsConfigsEditRulePage(props: Props) {
 
   // The rule types differ per category and the user can change them
   const [bitsRuleType, setBitsRuleType] = useState<BitsRuleType>(BitsRuleType.BitsCheermoteNameExactMatch);
-  const [channelPointsRuleType, setChannelPointsRuleType] = useState<ChannelPointsRuleType>(ChannelPointsRuleType.ChannelPointsRewardNameExactMatch);
+  //const [channelPointsRuleType, setChannelPointsRuleType] = useState<ChannelPointsRuleType>(ChannelPointsRuleType.ChannelPointsRewardNameExactMatch);
 
-  // Field values
+  // Field values (editing)
+  const [cheerNameOrPrefix, setCheerNameOrPrefix] = useState('');
+
+  // Field values (final)
   const [eventMatchPredicate, setEventMatchPredicate] = useState<EventMatchPredicate|undefined>(undefined);
   const [eventResponse, setEventResponse] = useState<EventResponse|undefined>(undefined);
   const [ruleIsDisabled, setRuleIsDisabled] = useState(false);
@@ -89,6 +92,10 @@ function TtsConfigsEditRulePage(props: Props) {
     return true;
   }
 
+  const updateCheerNameOrPrefix = (nameOrPrefix: string) => {
+    setCheerNameOrPrefix(nameOrPrefix);
+  }
+
   const handleFormSubmit = async (ev: React.FormEvent<HTMLFormElement>) : Promise<boolean> => {
     ev.preventDefault();
 
@@ -124,10 +131,16 @@ function TtsConfigsEditRulePage(props: Props) {
   if (twitchEventCategory === TwitchEventCategory.Bits) {
     switch (bitsRuleType) {
       case BitsRuleType.BitsCheermoteNameExactMatch:
-        ruleTypeForm = <BitsCheermoteNameExactMatchForm />;
+        ruleTypeForm = <BitsCheermoteNameExactMatchForm 
+          cheerName={cheerNameOrPrefix}
+          updateCheerNameOrPrefix={updateCheerNameOrPrefix}
+          />;
         break;
       case BitsRuleType.BitsCheermotePrefixSpendThreshold:
-        ruleTypeForm = <BitsCheermotePrefixSpendThresholdForm />
+        ruleTypeForm = <BitsCheermotePrefixSpendThresholdForm 
+          cheerPrefix={cheerNameOrPrefix}
+          updateCheerNameOrPrefix={updateCheerNameOrPrefix}
+          />
         break;
       case BitsRuleType.BitsSpendThreshold:
         ruleTypeForm = <BitsSpendThresholdForm />;

packages/storyteller/src/pages/tts_configs/components/BitsCheermoteNameExactMatchForm.tsx

@@ -4,12 +4,14 @@ import { faGem } from '@fortawesome/free-solid-svg-icons';
 import { CHEER_BIT_LEVELS, CHEER_PREFIXES } from '../../../twitch/Cheers';
 
 interface BitsCheermoteNameExactMatchProps {
+  cheerName: string,
+  updateCheerNameOrPrefix: (cheerNameOrPrefix: string) => void,
 };
 
 function BitsCheermoteNameExactMatchForm(props: BitsCheermoteNameExactMatchProps) {
-  const [cheerPrefix, setCheerPrefix] = useState<string|undefined>();
+  const [cheerPrefix, setCheerPrefix] = useState<string|undefined>(props.cheerName);
   const [bitsValue, setBitsValue] = useState<number>(1);
-  const [manualCheerValue, setManualCheerValue] = useState<string>("");
+  const [manualCheerValue, setManualCheerValue] = useState<string>(props.cheerName);
 
   const updateCheerPrefix = (ev: React.FormEvent<HTMLSelectElement>) : boolean => {
     const value = (ev.target as HTMLSelectElement).value;
@@ -29,6 +31,7 @@ function BitsCheermoteNameExactMatchForm(props: BitsCheermoteNameExactMatchProps
   const updateTextCheerValue = (ev: React.FormEvent<HTMLInputElement>) : boolean => {
     const value = (ev.target as HTMLInputElement).value;
     setManualCheerValue(value);
+    props.updateCheerNameOrPrefix(value);
     return true;
   }
 
@@ -39,6 +42,7 @@ function BitsCheermoteNameExactMatchForm(props: BitsCheermoteNameExactMatchProps
     }
     const cheerValue = `${prefix}${bits}`;
     setManualCheerValue(cheerValue);
+    props.updateCheerNameOrPrefix(cheerValue);
   }
 
   return (

packages/storyteller/src/pages/tts_configs/components/BitsCheermotePrefixSpendThresholdForm.tsx

@@ -4,11 +4,13 @@ import { faGem } from '@fortawesome/free-solid-svg-icons';
 import { CHEER_BIT_LEVELS, CHEER_PREFIXES } from '../../../twitch/Cheers';
 
 interface BitsCheermotePrefixSpendThresholdProps {
+  cheerPrefix: string,
+  updateCheerNameOrPrefix: (cheerNameOrPrefix: string) => void,
 };
 
 function BitsCheermotePrefixSpendThresholdForm(props: BitsCheermotePrefixSpendThresholdProps) {
-  const [cheerPrefix, setCheerPrefix] = useState<string|undefined>();
-  const [customCheerPrefix, setCustomCheerPrefix] = useState<string>("");
+  const [cheerPrefix, setCheerPrefix] = useState<string>(props.cheerPrefix);
+  const [customCheerPrefix, setCustomCheerPrefix] = useState<string>(props.cheerPrefix);
 
   const [bitsValue, setBitsValue] = useState<number>(1);
   const [customBitsValue, setCustomBitsValue] = useState<number>(1);
@@ -20,27 +22,21 @@ function BitsCheermotePrefixSpendThresholdForm(props: BitsCheermotePrefixSpendTh
     return true;
   }
 
-  const updateBitsValue = (ev: React.FormEvent<HTMLSelectElement>) : boolean => {
-    const value = (ev.target as HTMLSelectElement).value;
-    const numericValue = parseInt(value);
-    setBitsValue(numericValue);
-    recalcuateFieldValue(cheerPrefix, numericValue);
-    return true;
-  }
-
   const updateTextCheerValue = (ev: React.FormEvent<HTMLInputElement>) : boolean => {
     const value = (ev.target as HTMLInputElement).value;
     setCustomCheerPrefix(value);
+    props.updateCheerNameOrPrefix(value);
     return true;
   }
 
   // When the dropdowns are used, replace any manual text entry.
-  const recalcuateFieldValue = (prefix: string|undefined, bits: number) => {
+  const recalcuateFieldValue = (prefix: string, bits: number) => {
     if (prefix === undefined) {
       return;
     }
     const cheerValue = `${prefix}`;
     setCustomCheerPrefix(cheerValue);
+    props.updateCheerNameOrPrefix(cheerValue);
   }
 
   const handleBitSelect = (ev: React.FormEvent<HTMLSelectElement>) : boolean => {
@@ -57,7 +53,6 @@ function BitsCheermotePrefixSpendThresholdForm(props: BitsCheermotePrefixSpendTh
     return true;
   }
 
-
   return (
     <>
       <article className="message is-warning">
@@ -115,8 +110,6 @@ function BitsCheermotePrefixSpendThresholdForm(props: BitsCheermotePrefixSpendTh
         </div>
       </article>
 
-
-      <hr />
       <h1 className="title is-5">Bits spent</h1>
 
       <div className="field is-grouped">