Skip to content

Commit 2ba5fd3

Browse files
Convert EventTracker to abstract class and object payloads
1 parent 5dae795 commit 2ba5fd3

File tree

9 files changed

+93
-41
lines changed

9 files changed

+93
-41
lines changed

src/layouts/Header/components/UserDropdown/UserDropdown.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function UserDropdown() {
3636
})
3737

3838
const { provider, owner, repo } = useParams<URLParams>()
39-
const isGh = providerToName(provider) === 'Github'
39+
const isGh = providerToName(provider) === 'GitHub'
4040
const history = useHistory()
4141

4242
const items =
@@ -46,9 +46,12 @@ function UserDropdown() {
4646
to: { pageName: 'codecovAppInstallation' },
4747
children: 'Install Codecov app',
4848
onClick: () =>
49-
eventTracker(provider, owner, repo).track('Button Clicked', {
50-
buttonType: 'Install Github App',
51-
buttonLocation: 'UserDropdown',
49+
eventTracker(provider, owner, repo).track({
50+
type: 'Button Clicked',
51+
properties: {
52+
buttonType: 'Install Github App',
53+
buttonLocation: 'UserDropdown',
54+
},
5255
}),
5356
} as DropdownItem,
5457
]

src/pages/OwnerPage/HeaderBanners/GithubConfigBanner/GithubConfigBanner.jsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { useParams } from 'react-router-dom'
22

3+
import { eventTracker } from 'services/events/events'
34
import { providerToName } from 'shared/utils/provider'
45
import A from 'ui/A'
56
import Banner from 'ui/Banner'
67
import BannerContent from 'ui/Banner/BannerContent'
78
import BannerHeading from 'ui/Banner/BannerHeading'
89

910
const GithubConfigBanner = () => {
10-
const { provider } = useParams()
11+
const { provider, owner } = useParams()
1112
const isGh = providerToName(provider) === 'GitHub'
1213

1314
if (!isGh) return null
@@ -21,6 +22,15 @@ const GithubConfigBanner = () => {
2122
<A
2223
data-testid="codecovGithubApp-link"
2324
to={{ pageName: 'codecovGithubAppSelectTarget' }}
25+
onClick={() =>
26+
eventTracker(provider, owner).track({
27+
type: 'Button Clicked',
28+
properties: {
29+
buttonType: 'Install Github App',
30+
buttonLocation: 'GithubConfigBanner',
31+
},
32+
})
33+
}
2434
>
2535
Codecov&apos;s GitHub app
2636
</A>

src/services/events/amplitude/amplitude.ts

+11-4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
} from 'shared/utils/provider'
88

99
import { EventTracker } from '../events'
10+
import { Event } from '../types'
1011

1112
const AMPLITUDE_API_KEY = process.env.REACT_APP_AMPLITUDE_API_KEY
1213

@@ -42,7 +43,13 @@ export class AmplitudeEventTracker implements EventTracker {
4243
this.#repo = repo
4344
}
4445

45-
identify(userOwnerId: number | string, username: string) {
46+
identify({
47+
userOwnerId,
48+
username,
49+
}: {
50+
userOwnerId: number
51+
username: string
52+
}) {
4653
amplitude.setUserId(userOwnerId.toString())
4754
const identifyEvent = new amplitude.Identify()
4855
if (this.#provider) {
@@ -52,15 +59,15 @@ export class AmplitudeEventTracker implements EventTracker {
5259
amplitude.identify(identifyEvent)
5360
}
5461

55-
track(eventType: string, eventProperties: any) {
62+
track(event: Event) {
5663
amplitude.track({
5764
// eslint-disable-next-line camelcase
58-
event_type: eventType,
65+
event_type: event.type,
5966
// eslint-disable-next-line camelcase
6067
event_properties: {
6168
owner: this.#providerOwner,
6269
repo: this.#repo,
63-
...eventProperties,
70+
...event.properties,
6471
},
6572
// This attaches the event to the owner's user group as well
6673
groups: this.#providerOwner

src/services/events/events.ts

+18-20
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,29 @@ import { Provider } from 'shared/api/helpers'
22

33
import { AmplitudeEventTracker, initAmplitude } from './amplitude/amplitude'
44
import { StubbedEventTracker } from './stub'
5+
import { Event } from './types'
56

67
const AMPLITUDE_API_KEY = process.env.REACT_APP_AMPLITUDE_API_KEY
78

8-
export interface EventTracker {
9+
export abstract class EventTracker {
910
// Identifies the user this session belongs to.
10-
identify(userOwnerId: number, username: string): void
11+
identify({
12+
userOwnerId: _userOwnerId,
13+
username: _username,
14+
}: {
15+
userOwnerId: number
16+
username: string
17+
}): void {
18+
throw new Error(
19+
'EventTracker is abstract. Method identify must be implemented.'
20+
)
21+
}
1122

12-
// Add new events as a new overloaded method signature here.
13-
// Please keep the `eventType`s very generic as we have a limited number of
14-
// them. Instead, add more detail in `eventProperties` where possible.
15-
// Adding event types this way provides type safety for event properties.
16-
// E.g., every 'Button Clicked' event must have the buttonType property.
17-
track(
18-
eventType: 'Button Clicked',
19-
eventProperties: {
20-
buttonType: 'Install Github App' | 'Configure Repo'
21-
buttonLocation?: string
22-
}
23-
): void
24-
track(
25-
eventType: 'Page Viewed',
26-
eventProperties: {
27-
pageName: 'OwnerPage'
28-
}
29-
): void
23+
track(_event: Event): void {
24+
throw new Error(
25+
'EventTracker is abstract. Method track must be implemented.'
26+
)
27+
}
3028
}
3129

3230
export function initEventTracker(): void {

src/services/events/stub.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import { EventTracker } from './events'
2+
import { Event } from './types'
23

34
export class StubbedEventTracker implements EventTracker {
4-
identify(_userOwnerId: string | number, _username: string): void {}
5-
track(_eventType: string, _eventProperties: any): void {}
5+
identify({
6+
userOwnerId: _userOwnerId,
7+
username: _username,
8+
}: {
9+
userOwnerId: number
10+
username: string
11+
}): void {}
12+
track(_event: Event): void {}
613
}

src/services/events/types.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Add new events to the union type here.
2+
// Please keep the values of `type` very generic as we have a limited number of
3+
// them. Instead, add more detail in `properties` where possible.
4+
// Adding event types this way provides type safety for names and event
5+
// properties.
6+
// E.g., every 'Button Clicked' event must have the buttonType property.
7+
8+
export type Event =
9+
| {
10+
type: 'Button Clicked'
11+
properties: {
12+
buttonType: 'Install Github App' | 'Configure Repo'
13+
buttonLocation?: string
14+
}
15+
}
16+
| {
17+
type: 'Page Viewed'
18+
properties: {
19+
pageName: 'OwnerPage'
20+
}
21+
}

src/services/user/useUser.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -167,10 +167,10 @@ export function useUser({ options }: UseUserArgs = {}) {
167167
parsedRes.data.me?.owner.ownerid &&
168168
parsedRes.data.me?.owner.username
169169
) {
170-
eventTracker(provider).identify(
171-
parsedRes.data.me.owner.ownerid,
172-
parsedRes.data.me.owner.username
173-
)
170+
eventTracker(provider).identify({
171+
userOwnerId: parsedRes.data.me.owner.ownerid,
172+
username: parsedRes.data.me.owner.username,
173+
})
174174
}
175175

176176
return parsedRes.data.me

src/shared/ListRepo/InactiveRepo/InactiveRepo.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,11 @@ function InactiveRepo({
3232
},
3333
}}
3434
onClick={() =>
35-
eventTracker(provider, owner, repoName).track('Button Clicked', {
36-
buttonType: 'Configure Repo',
35+
eventTracker(provider, owner, repoName).track({
36+
type: 'Button Clicked',
37+
properties: {
38+
buttonType: 'Configure Repo',
39+
},
3740
})
3841
}
3942
>

src/ui/ContextSwitcher/ContextSwitcher.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ function ContextSwitcher({
171171
const intersectionRef = useLoadMore({ onLoadMore })
172172
const defaultOrgUsername = currentUser?.defaultOrgUsername
173173

174-
const isGh = providerToName(provider) === 'Github'
174+
const isGh = providerToName(provider) === 'GitHub'
175175
const isSelfHosted = config.IS_SELF_HOSTED
176176
const isCustomGitHubApp = config.GH_APP !== DEFAULT_GH_APP
177177

@@ -219,9 +219,12 @@ function ContextSwitcher({
219219
<A
220220
to={{ pageName: 'codecovAppInstallation' }}
221221
onClick={() =>
222-
eventTracker(provider, owner).track('Button Clicked', {
223-
buttonType: 'Install Github App',
224-
buttonLocation: 'ContextSwitcher',
222+
eventTracker(provider, owner).track({
223+
type: 'Button Clicked',
224+
properties: {
225+
buttonType: 'Install Github App',
226+
buttonLocation: 'ContextSwitcher',
227+
},
225228
})
226229
}
227230
isExternal

0 commit comments

Comments
 (0)