cover more usecase for analytics

src/analytics/Track.js

@@ -1,3 +1,4 @@
+import logger from 'logger'
 import { PureComponent } from 'react'
 import { track } from './segment'
 
@@ -6,9 +7,11 @@ class Track extends PureComponent<{
   onUnmount?: boolean,
   onUpdate?: boolean,
   event: string,
-  properties?: Object,
 }> {
   componentDidMount() {
+    if (typeof this.props.event !== 'string') {
+      logger.warn('analytics Track: invalid event=', this.props.event)
+    }
     if (this.props.onMount) this.track()
   }
   componentDidUpdate() {
@@ -18,7 +21,7 @@ class Track extends PureComponent<{
     if (this.props.onUnmount) this.track()
   }
   track = () => {
-    const { event, properties } = this.props
+    const { event, onMount, onUnmount, onUpdate, ...properties } = this.props
     track(event, properties)
   }
   render() {

src/analytics/TrackPage.js

@@ -1,9 +1,9 @@
 import { PureComponent } from 'react'
 import { page } from './segment'
 
-class TrackPage extends PureComponent<{ category: string, name?: string, properties?: Object }> {
+class TrackPage extends PureComponent<{ category: string, name?: string }> {
   componentDidMount() {
-    const { category, name, properties } = this.props
+    const { category, name, ...properties } = this.props
     page(category, name, properties)
   }
   render() {

src/components/AccountPage/index.js

@@ -109,10 +109,8 @@ class AccountPage extends PureComponent<Props> {
       <Box key={account.id}>
         <TrackPage
           category="Account"
-          properties={{
-            currency: account.currency.id,
-            operationsLength: account.operations.length,
-          }}
+          currency={account.currency.id}
+          operationsLength={account.operations.length}
         />
         <SyncOneAccountOnMount priority={10} accountId={account.id} />
         <Box horizontal mb={5} flow={4}>

src/components/DashboardPage/index.js

@@ -104,7 +104,9 @@ class DashboardPage extends PureComponent<Props> {
         <UpdateNotifier />
         <TrackPage
           category="Portfolio"
-          properties={{ totalAccounts, totalOperations, totalCurrencies }}
+          totalAccounts={totalAccounts}
+          totalOperations={totalOperations}
+          totalCurrencies={totalCurrencies}
         />
         <Box flow={7}>
           {totalAccounts > 0 ? (

src/components/ExportLogsBtn.js

@@ -71,7 +71,7 @@ class ExportLogsBtn extends Component<{
     return hookToShortcut ? (
       <KeyHandler keyValue="e" onKeyHandle={this.onKeyHandle} />
     ) : (
-      <Button primary onClick={this.handleExportLogs}>
+      <Button primary event="ExportLogs" onClick={this.handleExportLogs}>
         {t('app:settings.exportLogs.btn')}
       </Button>
     )

src/components/OperationsList/index.js

@@ -134,13 +134,11 @@ export class OperationsList extends PureComponent<Props, State> {
             <Track
               onMount
               event="OperationsListEndReached"
-              properties={{
-                totalSections: groupedOperations.sections.length,
-                totalOperations: groupedOperations.sections.reduce(
-                  (sum, s) => sum + s.data.length,
-                  0,
-                ),
-              }}
+              totalSections={groupedOperations.sections.length}
+              totalOperations={groupedOperations.sections.reduce(
+                (sum, s) => sum + s.data.length,
+                0,
+              )}
             />
           ) : null}
           {!groupedOperations.completed ? (

src/components/SettingsPage/sections/Profile.js

@@ -15,6 +15,7 @@ import hardReset from 'helpers/hardReset'
 import type { SettingsState } from 'reducers/settings'
 import type { T } from 'types/common'
 
+import Track from 'analytics/Track'
 import TrackPage from 'analytics/TrackPage'
 import ExportLogsBtn from 'components/ExportLogsBtn'
 import CheckBox from 'components/base/CheckBox'
@@ -157,6 +158,7 @@ class TabProfile extends PureComponent<Props, State> {
             title={t('app:settings.profile.password')}
             desc={t('app:settings.profile.passwordDesc')}
           >
+            <Track onUpdate event={isPasswordEnabled ? 'PasswordEnabled' : 'PasswordDisabled'} />
             <Box horizontal flow={2} align="center">
               {isPasswordEnabled && (
                 <Button onClick={this.handleOpenPasswordModal}>
@@ -170,6 +172,7 @@ class TabProfile extends PureComponent<Props, State> {
             title={t('app:settings.profile.developerMode')}
             desc={t('app:settings.profile.developerModeDesc')}
           >
+            <Track onUpdate event={settings.developerMode ? 'DevModeEnabled' : 'DevModeDisabled'} />
             <CheckBox
               isChecked={settings.developerMode}
               onChange={developerMode => saveSettings({ developerMode })}
@@ -179,6 +182,7 @@ class TabProfile extends PureComponent<Props, State> {
             title={t('app:settings.profile.reportErrors')}
             desc={t('app:settings.profile.reportErrorsDesc')}
           >
+            <Track onUpdate event={settings.sentryLogs ? 'SentryEnabled' : 'SentryDisabled'} />
             <CheckBox
               isChecked={settings.sentryLogs}
               onChange={sentryLogs => saveSettings({ sentryLogs })}
@@ -188,6 +192,7 @@ class TabProfile extends PureComponent<Props, State> {
             title={t('app:settings.profile.analytics')}
             desc={t('app:settings.profile.analyticsDesc')}
           >
+            <Track onUpdate event={settings.sentryLogs ? 'SentryEnabled' : 'SentryDisabled'} />
             <CheckBox
               isChecked={settings.shareAnalytics}
               onChange={shareAnalytics => saveSettings({ shareAnalytics })}
@@ -197,7 +202,7 @@ class TabProfile extends PureComponent<Props, State> {
             title={t('app:settings.profile.softResetTitle')}
             desc={t('app:settings.profile.softResetDesc')}
           >
-            <Button primary onClick={this.handleOpenSoftResetModal}>
+            <Button primary onClick={this.handleOpenSoftResetModal} event="ClearCacheIntent">
               {t('app:settings.profile.softReset')}
             </Button>
           </Row>
@@ -205,7 +210,7 @@ class TabProfile extends PureComponent<Props, State> {
             title={t('app:settings.profile.hardResetTitle')}
             desc={t('app:settings.profile.hardResetDesc')}
           >
-            <Button danger onClick={this.handleOpenHardResetModal}>
+            <Button danger onClick={this.handleOpenHardResetModal} event="HardResetIntent">
               {t('app:settings.profile.hardReset')}
             </Button>
           </Row>

src/components/base/Button/index.js

@@ -4,6 +4,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { space, fontSize, fontWeight, color } from 'styled-system'
 import noop from 'lodash/noop'
+import { track } from 'analytics/segment'
 
 import { darken, lighten, rgba } from 'styles/helpers'
 import fontFamily from 'styles/styled/fontFamily'
@@ -171,13 +172,24 @@ type Props = {
   small?: boolean,
   padded?: boolean,
   isLoading?: boolean,
+  event?: string,
+  eventProperties?: Object,
 }
 
 const Button = (props: Props) => {
-  const { onClick, children, disabled, isLoading } = props
+  const { disabled } = props
+  const { onClick, children, isLoading, event, eventProperties, ...rest } = props
   const isClickDisabled = disabled || isLoading
+  const onClickHandler = e => {
+    if (onClick) {
+      if (event) {
+        track(event, eventProperties)
+      }
+      onClick(e)
+    }
+  }
   return (
-    <Base {...props} onClick={isClickDisabled ? undefined : onClick}>
+    <Base {...rest} onClick={isClickDisabled ? undefined : onClickHandler}>
       {isLoading ? <Spinner size={16} /> : children}
     </Base>
   )