From 1415932df29d78da47c0980c752ae516b434d453 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Thu, 19 Jan 2023 06:01:52 -0500
Subject: [PATCH] filter voices in "explore" by language

---
 .../explore/CategoryOptions.tsx               |  4 +++
 .../explore/ExploreVoicesModal.tsx            |  2 ++
 .../explore/ScopedVoiceModelOptions.tsx       | 31 ++++++++++++-------
 .../tts_model_list/search/SelectSearch.tsx    |  4 +--
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/CategoryOptions.tsx b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/CategoryOptions.tsx
index 78177e327b..b0492b924c 100644
--- a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/CategoryOptions.tsx
+++ b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/CategoryOptions.tsx
@@ -28,6 +28,8 @@ interface Props {
   setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void;
 
   handleChangeCategory: (level: number, maybeToken?: string) => void;
+
+  selectedTtsLanguageScope: string,
 }
 
 export function CategoryOptions(props: Props) {
@@ -72,6 +74,8 @@ export function CategoryOptions(props: Props) {
   );
 }
 
+// ========= Build dropdowns ========
+
 function buildDropdowns(
   dropdownCategories: TtsCategoryType[][], 
   selectedCategories: TtsCategoryType[], 
diff --git a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ExploreVoicesModal.tsx b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ExploreVoicesModal.tsx
index b3140b1b6a..1c0f7fdc7c 100644
--- a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ExploreVoicesModal.tsx
+++ b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ExploreVoicesModal.tsx
@@ -147,6 +147,7 @@ export function ExploreVoicesModal(props: Props) {
                   maybeSelectedTtsModel={props.maybeSelectedTtsModel}
                   setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
                   handleChangeCategory={handleChangeCategory}
+                  selectedTtsLanguageScope={props.selectedTtsLanguageScope}
                 />
               </div>
             </div>
@@ -164,6 +165,7 @@ export function ExploreVoicesModal(props: Props) {
                 selectedCategories={props.selectedCategories}
                 maybeSelectedTtsModel={props.maybeSelectedTtsModel}
                 setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
+                selectedTtsLanguageScope={props.selectedTtsLanguageScope}
               />
             </div>
           </div>
diff --git a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx
index 1e88d880bd..eb22cb22fd 100644
--- a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx
+++ b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx
@@ -25,6 +25,8 @@ interface Props {
 
   maybeSelectedTtsModel?: TtsModelListItem;
   setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void;
+
+  selectedTtsLanguageScope: string,
 }
 
 export function ScopedVoiceModelOptions(props: Props) {
@@ -40,12 +42,9 @@ export function ScopedVoiceModelOptions(props: Props) {
   const handleChange = (option: any, actionMeta: any) => {
     const ttsModelToken = option?.value;
     const maybeNewTtsModel = props.allTtsModelsByTokenMap.get(ttsModelToken);
-
-    if (maybeNewTtsModel === undefined) {
-      return;
+    if (maybeNewTtsModel !== undefined) {
+      props.setMaybeSelectedTtsModel(maybeNewTtsModel);
     }
-
-    props.setMaybeSelectedTtsModel(maybeNewTtsModel);
   }
 
   const leafiestCategory = selectedCategories[selectedCategories.length - 1];
@@ -61,12 +60,20 @@ export function ScopedVoiceModelOptions(props: Props) {
     leafiestCategoryModels = Array.from(new Set(allTtsModels));
   }
 
-  let options = leafiestCategoryModels.map((ttsModel) => {
-    return {
-      label: ttsModel.title,
-      value: ttsModel.model_token,
-    }
-  });
+  let options = leafiestCategoryModels
+    .filter((ttsModel) => {
+      // Scope to currently selected language
+      if (props.selectedTtsLanguageScope === "*") {
+        return true; // NB: Sentinel value of "*" means all languages.
+      }
+      return ttsModel.ietf_primary_language_subtag === props.selectedTtsLanguageScope;
+    })
+    .map((ttsModel) => {
+      return {
+        label: ttsModel.title,
+        value: ttsModel.model_token,
+      }
+    });
 
   let selectedOption = options.find((option) => option.value === maybeSelectedTtsModel?.model_token);
 
@@ -74,7 +81,7 @@ export function ScopedVoiceModelOptions(props: Props) {
     selectedOption = options[0];
   }
  
-  const voiceCount = leafiestCategoryModels.length;
+  const voiceCount = options.length;
 
   let isLoading = false;
 
diff --git a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/search/SelectSearch.tsx b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/search/SelectSearch.tsx
index d7f349c5e3..916bb62e12 100644
--- a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/search/SelectSearch.tsx
+++ b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/search/SelectSearch.tsx
@@ -40,9 +40,9 @@ export function SelectSearch(props: Props) {
 
   const options : any = props.allTtsModels
     .filter((ttsModel) => {
+      // Scope to currently selected language
       if (props.selectedTtsLanguageScope === "*") {
-        // NB: Sentinel value of "*" means all languages.
-        return true;
+        return true; // NB: Sentinel value of "*" means all languages.
       }
       return ttsModel.ietf_primary_language_subtag === props.selectedTtsLanguageScope;
     })