From fb63cad3f685e40e44d0edb4a5396635146b0a00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateus=20Felipe=20Gon=C3=A7alves?=
 <mateusfelipefg77@gmail.com>
Date: Fri, 18 Aug 2023 20:07:27 -0300
Subject: [PATCH] feat(analytics): add umami event tracker on buttons and links

---
 src/components/clear-button/index.tsx           |  1 +
 src/components/footer/index.tsx                 | 17 ++++++++++++++---
 src/components/header/combo-list/index.tsx      |  3 +++
 .../header/global-volume-controller/index.tsx   |  1 +
 src/components/header/pomodoro/config-modal.tsx |  3 +++
 src/components/header/pomodoro/index.tsx        |  2 ++
 src/components/header/theme-menu/index.tsx      |  2 ++
 src/components/sound/index.tsx                  |  5 +++--
 8 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/clear-button/index.tsx b/src/components/clear-button/index.tsx
index 2b33fc6f..3247136b 100644
--- a/src/components/clear-button/index.tsx
+++ b/src/components/clear-button/index.tsx
@@ -27,6 +27,7 @@ export function ClearButton() {
       onClick={clear}
       className={actionButton({ theme })}
       title="Clear all active sounds"
+      umami-data-event="Clear Button"
     >
       clear
     </button>
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index 7d8c35ac..0f0066f5 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -41,19 +41,29 @@ export function Footer() {
           <Info
             href="https://github.com/mateusfg7/Noisekun/blob/master/LICENSE"
             className="cursor-pointer"
+            umami-data-event="License Link"
           >
             <AiOutlineCopyrightCircle /> MIT License
           </Info>
-          <Info href="https://github.com/mateusfg7">
+          <Info
+            href="https://github.com/mateusfg7"
+            umami-data-event="Author Link"
+          >
             by <span className="font-bold">mateusfg7</span>
           </Info>
         </section>
         <section className="flex flex-col gap-2 sm:gap-0">
-          <Info href="https://github.com/mateusfg7/Noisekun">
+          <Info
+            href="https://github.com/mateusfg7/Noisekun"
+            umami-data-event="Repository Link"
+          >
             <FiGithub /> Source
           </Info>
 
-          <Info href="https://github.com/mateusfg7/Noisekun/#credits">
+          <Info
+            href="https://github.com/mateusfg7/Noisekun/#credits"
+            umami-data-event="Credits Link"
+          >
             <FiAward /> Credits
           </Info>
         </section>
@@ -61,6 +71,7 @@ export function Footer() {
       <a
         href={`https://github.com/mateusfg7/Noisekun/releases/tag/${packageJson.version}`}
         className={version({ theme })}
+        umami-data-event="Version Link"
       >
         {packageJson.version}
       </a>
diff --git a/src/components/header/combo-list/index.tsx b/src/components/header/combo-list/index.tsx
index f579ffc2..d4ca2a19 100644
--- a/src/components/header/combo-list/index.tsx
+++ b/src/components/header/combo-list/index.tsx
@@ -53,6 +53,7 @@ export function ComboList() {
       <Menu>
         <Menu.Button
           title="Toggle combo list"
+          umami-data-event="Open combo list"
           disabled={isEmpty}
           className={triggerButton({ theme })}
         >
@@ -94,6 +95,7 @@ export function ComboList() {
                     <button
                       className={comboButton({ theme, active })}
                       onClick={() => updateCombo(combo.id)}
+                      umami-data-event="Select combo"
                     >
                       <span className="font-bold">{combo.name}</span>
                     </button>
@@ -107,6 +109,7 @@ export function ComboList() {
                   key={combo.id}
                   className={editButton({ theme })}
                   onClick={() => deleteCombo(combo.id)}
+                  umami-data-event="Delete combo"
                 >
                   <span className="font-bold">{combo.name}</span>
                   <FiTrash />
diff --git a/src/components/header/global-volume-controller/index.tsx b/src/components/header/global-volume-controller/index.tsx
index e5197a68..10dab3ac 100644
--- a/src/components/header/global-volume-controller/index.tsx
+++ b/src/components/header/global-volume-controller/index.tsx
@@ -67,6 +67,7 @@ export function GlobalVolumeController() {
         title="Enable/disable sound"
         className={soundButton({ theme })}
         onClick={toggleMuted}
+        umami-data-event="Mute/Unmute global volume"
       >
         {globalVolume >= 0.5 && <FiVolume2 size={25} />}
         {globalVolume >= 0.25 && globalVolume < 0.5 && <FiVolume1 size={25} />}
diff --git a/src/components/header/pomodoro/config-modal.tsx b/src/components/header/pomodoro/config-modal.tsx
index abf77e8b..abfc2b0a 100644
--- a/src/components/header/pomodoro/config-modal.tsx
+++ b/src/components/header/pomodoro/config-modal.tsx
@@ -52,6 +52,7 @@ export function ConfigModal({
           type="button"
           onClick={openModal}
           className={display({ theme })}
+          umami-data-event="Open pomodoro config"
         >
           <div
             title="Pomodoro timer"
@@ -119,12 +120,14 @@ export function ConfigModal({
                   <div className="flex justify-end gap-1">
                     <button
                       onClick={handleReset}
+                      umami-data-event="Reset pomodoro config"
                       className="rounded-lg px-5 py-3 text-lg leading-none text-red-800 transition-colors hover:bg-red-800 hover:text-red-100"
                     >
                       Reset
                     </button>
                     <button
                       onClick={handleSave}
+                      umami-data-event="Save pomodoro config"
                       className="rounded-lg bg-green-100 px-5 py-3 text-lg leading-none text-green-950 transition-colors hover:bg-green-900 hover:text-green-100"
                     >
                       Save
diff --git a/src/components/header/pomodoro/index.tsx b/src/components/header/pomodoro/index.tsx
index 6f472c63..1a9f02c5 100644
--- a/src/components/header/pomodoro/index.tsx
+++ b/src/components/header/pomodoro/index.tsx
@@ -99,6 +99,7 @@ export function Pomodoro() {
         title="Reset Pomodoro timer"
         onClick={resetTimer}
         className={controlButton({ theme })}
+        umami-data-event="Reset pomodoro timer"
       >
         <FiRotateCw />
       </button>
@@ -116,6 +117,7 @@ export function Pomodoro() {
         title="Toggle Pomodoro timer"
         onClick={handleToggle}
         className={controlButton({ theme })}
+        umami-data-event="Play/pause pomodoro timer"
       >
         {isTicking ? <FiPause /> : <FiPlay />}
       </button>
diff --git a/src/components/header/theme-menu/index.tsx b/src/components/header/theme-menu/index.tsx
index 89ae6a09..a23033d7 100644
--- a/src/components/header/theme-menu/index.tsx
+++ b/src/components/header/theme-menu/index.tsx
@@ -64,6 +64,7 @@ export function ThemeMenu() {
           <Menu.Button
             title="Toggle theme menu"
             className={triggerButton({ theme: currentTheme })}
+            umami-data-event="Open theme menu"
           >
             <PiPaintBrushBroadBold size={22} />
           </Menu.Button>
@@ -95,6 +96,7 @@ export function ThemeMenu() {
                             background: theme.id
                           })}
                           onClick={() => handleTheme(theme.id)}
+                          umami-data-event={`Select ${theme.title} Theme`}
                         >
                           {theme.title}
                         </button>
diff --git a/src/components/sound/index.tsx b/src/components/sound/index.tsx
index 5baec312..ebb1bf7b 100644
--- a/src/components/sound/index.tsx
+++ b/src/components/sound/index.tsx
@@ -147,12 +147,13 @@ export const SoundButton: React.FC<SoundButtonProps> = ({ sound }) => {
       <audio ref={soundRef} preload="auto" loop>
         <source src={sound.file.url} type={sound.file.type} />
       </audio>
-      <div
+      <button
+        umami-data-event={sound.title}
         className={iconContainer({ active: localSoundState.active, theme })}
         onClick={() => setIsUpdatingSoundState(true)}
       >
         <Icon className={icon()} />
-      </div>
+      </button>
       <VolumeController
         isActive={localSoundState.active}
         soundName={sound.title}