From e456b9a85562c8eabad9767213537bf5ec266504 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Thu, 7 Jul 2022 15:24:13 -0600
Subject: [PATCH] Analyze tab usage

---
 web/components/contract/contract-tabs.tsx |  1 +
 web/components/layout/tabs.tsx            | 16 +++++++++++++++-
 web/components/user-page.tsx              |  1 +
 web/pages/group/[...slugs]/index.tsx      |  1 +
 web/pages/groups.tsx                      |  1 +
 web/pages/leaderboards.tsx                |  1 +
 web/pages/notifications.tsx               |  1 +
 web/pages/stats.tsx                       |  1 +
 8 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx
index e68e59b9..c7759fb8 100644
--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@@ -87,6 +87,7 @@ export function ContractTabs(props: {
 
   return (
     <Tabs
+      currentPageForAnalytics={'contract'}
       tabs={[
         { title: 'Comments', content: commentActivity },
         { title: 'Bets', content: betActivity },
diff --git a/web/components/layout/tabs.tsx b/web/components/layout/tabs.tsx
index f025951c..8aec39b1 100644
--- a/web/components/layout/tabs.tsx
+++ b/web/components/layout/tabs.tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import Link from 'next/link'
 import { ReactNode, useState } from 'react'
 import { Row } from './row'
+import { track } from '@amplitude/analytics-browser'
 
 type Tab = {
   title: string
@@ -17,8 +18,16 @@ export function Tabs(props: {
   labelClassName?: string
   onClick?: (tabTitle: string, index: number) => void
   className?: string
+  currentPageForAnalytics?: string
 }) {
-  const { tabs, defaultIndex, labelClassName, onClick, className } = props
+  const {
+    tabs,
+    defaultIndex,
+    labelClassName,
+    onClick,
+    className,
+    currentPageForAnalytics,
+  } = props
   const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0)
   const activeTab = tabs[activeIndex] as Tab | undefined // can be undefined in weird case
 
@@ -32,6 +41,11 @@ export function Tabs(props: {
                 id={`tab-${i}`}
                 key={tab.title}
                 onClick={(e) => {
+                  track('Clicked Tab', {
+                    title: tab.title,
+                    href: tab.href,
+                    currentPage: currentPageForAnalytics,
+                  })
                   if (!tab.href) {
                     e.preventDefault()
                   }
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index c33476aa..af03eb46 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -262,6 +262,7 @@ export function UserPage(props: {
 
         {usersContracts !== 'loading' && commentsByContract != 'loading' ? (
           <Tabs
+            currentPageForAnalytics={'profile'}
             labelClassName={'pb-2 pt-1 '}
             defaultIndex={
               defaultTabTitle ? TAB_IDS.indexOf(defaultTabTitle) : 0
diff --git a/web/pages/group/[...slugs]/index.tsx b/web/pages/group/[...slugs]/index.tsx
index db8d38be..73d7819a 100644
--- a/web/pages/group/[...slugs]/index.tsx
+++ b/web/pages/group/[...slugs]/index.tsx
@@ -248,6 +248,7 @@ export default function GroupPage(props: {
       </Col>
 
       <Tabs
+        currentPageForAnalytics={groupPath(group.slug)}
         className={'mb-0 sm:mb-2'}
         defaultIndex={
           page === 'rankings'
diff --git a/web/pages/groups.tsx b/web/pages/groups.tsx
index 22fe7661..ae64cc76 100644
--- a/web/pages/groups.tsx
+++ b/web/pages/groups.tsx
@@ -106,6 +106,7 @@ export default function Groups(props: {
             </div>
 
             <Tabs
+              currentPageForAnalytics={'groups'}
               tabs={[
                 ...(user && memberGroupIds.length > 0
                   ? [
diff --git a/web/pages/leaderboards.tsx b/web/pages/leaderboards.tsx
index f306493b..061f3a19 100644
--- a/web/pages/leaderboards.tsx
+++ b/web/pages/leaderboards.tsx
@@ -126,6 +126,7 @@ export default function Leaderboards(props: {
     <Page>
       <Title text={'Leaderboards'} className={'hidden md:block'} />
       <Tabs
+        currentPageForAnalytics={'leaderboards'}
         defaultIndex={0}
         onClick={(title, index) => {
           const period = ['allTime', 'monthly', 'weekly', 'daily'][index]
diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx
index aa2cdc51..bb495ecd 100644
--- a/web/pages/notifications.tsx
+++ b/web/pages/notifications.tsx
@@ -50,6 +50,7 @@ export default function Notifications() {
         <Title text={'Notifications'} className={'hidden md:block'} />
         <div>
           <Tabs
+            currentPageForAnalytics={'notifications'}
             labelClassName={'pb-2 pt-1 '}
             className={'mb-0 sm:mb-2'}
             defaultIndex={0}
diff --git a/web/pages/stats.tsx b/web/pages/stats.tsx
index c81bc3ff..57c47843 100644
--- a/web/pages/stats.tsx
+++ b/web/pages/stats.tsx
@@ -25,6 +25,7 @@ export default function Analytics() {
   return (
     <Page>
       <Tabs
+        currentPageForAnalytics={'stats'}
         tabs={[
           {
             title: 'Activity',