From 8a6f833ab8d21027d7dbdaafe2f1390ee970d399 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sat, 21 Jan 2023 00:37:19 -0500
Subject: [PATCH] add more instrumentation

---
 packages/fakeyou.com/src/common/Analytics.ts    | 17 +++++++++++++++++
 .../tts/tts_model_list/TtsModelListPage.tsx     |  2 +-
 .../tts_model_list/explore/CategoryOptions.tsx  |  2 ++
 .../tts_model_list/explore/LanguageOptions.tsx  |  2 ++
 .../tts/tts_model_list/search/SelectSearch.tsx  |  2 ++
 5 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/fakeyou.com/src/common/Analytics.ts b/packages/fakeyou.com/src/common/Analytics.ts
index ff967ea46b..7dbae44dca 100644
--- a/packages/fakeyou.com/src/common/Analytics.ts
+++ b/packages/fakeyou.com/src/common/Analytics.ts
@@ -128,6 +128,23 @@ class Analytics {
     Analytics.sendCategorizedEvent(this.TTS, 'click_select_category');
   }
 
+  static ttsOpenCategorySelectMenu() {
+    Analytics.sendCategorizedEvent(this.TTS, 'open_category_select_menu');
+  }
+
+  static ttsOpenLanguageSelectMenu() {
+    Analytics.sendCategorizedEvent(this.TTS, 'open_language_select_menu');
+  }
+
+  static ttsOpenPrimaryVoiceSelectMenu() {
+    Analytics.sendCategorizedEvent(this.TTS, 'open_primary_voice_select_menu');
+  }
+
+  static ttsOpenExploreVoicesModal() {
+    Analytics.sendCategorizedEvent(this.TTS, 'open_explore_voices_modal');
+  }
+
+
   //static ttsClickVoiceSearchBox() {
   //  Analytics.sendCategorizedEvent(this.TTS, 'click_voice_search_box');
   //}
diff --git a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx
index 5f07cb1575..1b50479846 100644
--- a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx
@@ -483,7 +483,7 @@ function TtsModelListPage(props: Props) {
                     </div>
 
                     <button
-                      onClick={handleClearClick}
+                      onClick={() => { Analytics.ttsOpenExploreVoicesModal() } }
                       className="btn btn-primary rounded-50"
                       data-bs-toggle="modal"
                       data-bs-target="#exploreModal"
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 b0492b924c..b22bef968a 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
@@ -9,6 +9,7 @@ import { TtsCategoryType } from "../../../../../AppWrapper";
 //import { useTranslation } from "react-i18next";
 import Select from "react-select";
 import { SearchFieldClass } from "../search/SearchFieldClass";
+import { Analytics } from "../../../../../common/Analytics";
 
 interface Props {
   allTtsCategories: TtsCategoryType[];
@@ -167,6 +168,7 @@ function buildDropdowns(
       className:"w-100",
       autoFocus: false, // On mobile, we don't want the onscreen keyboard to take up half the UI.
       isSearchable: false, // On mobile, we don't want the onscreen keyboard to take up half the UI.
+      onMenuOpen: () => { Analytics.ttsOpenCategorySelectMenu() },
       onChange: (option: any) => handleChangeCategory(i, option?.value),
     };
 
diff --git a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/LanguageOptions.tsx b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/LanguageOptions.tsx
index 20b7ce188f..83c1895c46 100644
--- a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/LanguageOptions.tsx
+++ b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/LanguageOptions.tsx
@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Select from "react-select";
 import { SearchFieldClass } from "../search/SearchFieldClass";
 import { AVAILABLE_TTS_LANGUAGE_CATEGORY_MAP } from "../../../../../_i18n/AvailableLanguageMap";
+import { Analytics } from "../../../../../common/Analytics";
 
 interface Props {
   selectedTtsLanguageScope: string,
@@ -55,6 +56,7 @@ export function LanguageOptions(props: Props) {
         options={languageOptions}
         classNames={SearchFieldClass}
         onChange={handleChange}
+        onMenuOpen={() => { Analytics.ttsOpenCategorySelectMenu() } }
       />
     </div>
   )
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 9563510016..baf13e52de 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
@@ -7,6 +7,7 @@ import Select, { ActionMeta, createFilter, components } from "react-select";
 import Option from "react-select";
 import { SearchFieldClass } from "./SearchFieldClass";
 import { FastReactSelectOption } from "../../../_common/FastReactSelectOption";
+import { Analytics } from "../../../../../common/Analytics";
 
 interface Props {
   allTtsCategories: TtsCategoryType[];
@@ -87,6 +88,7 @@ export function SelectSearch(props: Props) {
           options={options}
           classNames={SearchFieldClass}
           onChange={handleChange}
+          onMenuOpen={() => { Analytics.ttsOpenPrimaryVoiceSelectMenu() } }
           // NB: The following settings improve upon performance. 
           // See: https://github.com/JedWatson/react-select/issues/3128
           filterOption={createFilter({ignoreAccents: false})}