Merge pull request #169 from BoostIO/analytics

Analytics

src/components/PreferencesModal/EditorTab.tsx

@@ -24,6 +24,7 @@ import { themes } from '../../lib/CodeMirror'
 import { capitalize } from '../../lib/string'
 import CustomizedCodeEditor from '../atoms/CustomizedCodeEditor'
 import { useDebounce } from 'react-use'
+import { useAnalytics, analyticsEvents } from '../../lib/analytics'
 
 const defaultPreviewContent = `# hello-world.js
 
@@ -36,14 +37,16 @@ function say() {
 
 const EditorTab = () => {
   const { preferences, setPreferences } = usePreferences()
+  const { report } = useAnalytics()
 
   const selectEditorTheme: SelectChangeEventHandler = useCallback(
     event => {
       setPreferences({
         'editor.theme': event.target.value
       })
+      report(analyticsEvents.editorTheme)
     },
-    [setPreferences]
+    [setPreferences, report]
   )
 
   const [fontSize, setFontSize] = useState(

src/components/PreferencesModal/GeneralTab.tsx

@@ -20,18 +20,21 @@ import { SelectChangeEventHandler } from '../../lib/events'
 import { useUsers } from '../../lib/accounts'
 import UserInfo from '../atoms/UserInfo'
 import LoginButton from '../atoms/LoginButton'
+import { useAnalytics, analyticsEvents } from '../../lib/analytics'
 
 const GeneralTab = () => {
   const { preferences, setPreferences } = usePreferences()
   const [users, { removeUser }] = useUsers()
+  const { report } = useAnalytics()
 
   const selectTheme: SelectChangeEventHandler = useCallback(
     event => {
       setPreferences({
         'general.theme': event.target.value as GeneralThemeOptions
       })
+      report(analyticsEvents.colorTheme)
     },
-    [setPreferences]
+    [setPreferences, report]
   )
 
   const selectLanguage: SelectChangeEventHandler = useCallback(

src/lib/analytics.ts

@@ -1,7 +1,8 @@
-import { useCallback } from 'react'
+import { useCallback, useRef } from 'react'
 import Analytics from '@aws-amplify/analytics'
 import Auth from '@aws-amplify/auth'
 import { usePreferences } from './preferences'
+import { DbStore } from './db'
 
 const amplifyConfig = {
   Auth: {
@@ -10,8 +11,6 @@ const amplifyConfig = {
   }
 }
 
-Auth.configure(amplifyConfig)
-
 const analyticsConfig = {
   AWSPinpoint: {
     appId: process.env.AMPLIFY_PINPOINT_APPID,
@@ -20,20 +19,29 @@ const analyticsConfig = {
   }
 }
 
-Analytics.configure(analyticsConfig)
-
-const initilalized = (window as any).initilalized
-if (!initilalized) {
-  ;(window as any).initilalized = true
-  Analytics.record('init')
-}
-
 export function useAnalytics() {
+  const configured = useRef(false)
   const { preferences } = usePreferences()
   const analyticsEnabled = preferences['general.enableAnalytics']
+  const user = preferences['general.accounts'][0]
+
+  if (!configured.current) {
+    Auth.configure(amplifyConfig)
+    Analytics.configure(analyticsConfig)
+    configured.current = true
+    const initilalized = (window as any).initilalized
+    if (!initilalized) {
+      ;(window as any).initilalized = true
+      Analytics.record('init')
+    }
+  }
 
   const report = useCallback(
     (name: string, attributes?: { [key: string]: string }) => {
+      if (user != null) {
+        attributes = { ...attributes, user: user.id.toString() }
+      }
+
       if (analyticsEnabled) {
         if (attributes == null) {
           Analytics.record({ name: name })
@@ -42,10 +50,74 @@ export function useAnalytics() {
         }
       }
     },
-    [analyticsEnabled]
+    [analyticsEnabled, user]
   )
 
   return {
     report
   }
 }
+
+export const analyticsEvents = {
+  addNote: 'Note.Add',
+  editNote: 'Note.Edit',
+  deleteNote: 'Note.Delete',
+  addTag: 'Tag.Add',
+  addStorage: 'Storage.Add',
+  addFolder: 'Folder.Add',
+  colorTheme: 'ColorTheme.Edit',
+  editorTheme: 'EditorTheme.Edit'
+}
+
+export function wrapDbStoreWithAnalytics(hook: () => DbStore): () => DbStore {
+  return () => {
+    const { report } = useAnalytics()
+    const {
+      createNote,
+      updateNote,
+      trashNote,
+      createStorage,
+      createFolder,
+      ...rest
+    } = hook()
+    return {
+      createNote: useCallback(
+        (...args: Parameters<typeof createNote>) => {
+          report(analyticsEvents.addNote)
+          return createNote(...args)
+        },
+        [createNote, report]
+      ),
+      updateNote: useCallback(
+        (...args: Parameters<typeof updateNote>) => {
+          report(analyticsEvents.editNote)
+          return updateNote(...args)
+        },
+        [updateNote, report]
+      ),
+      trashNote: useCallback(
+        (...args: Parameters<typeof trashNote>) => {
+          report(analyticsEvents.deleteNote)
+          return trashNote(...args)
+        },
+        [trashNote, report]
+      ),
+      createStorage: useCallback(
+        (...args: Parameters<typeof createStorage>) => {
+          report(analyticsEvents.addStorage)
+          return createStorage(...args)
+        },
+        [createStorage, report]
+      ),
+      createFolder: useCallback(
+        (...args: Parameters<typeof createFolder>) => {
+          report(analyticsEvents.addFolder)
+          return createFolder(...args)
+        },
+        [createFolder, report]
+      ),
+      ...rest
+    }
+  }
+}
+

src/lib/db/store.ts

@@ -39,6 +39,7 @@ import {
   renameStorage as renameCloudStorage,
   getStorages
 } from '../accounts'
+import { wrapDbStoreWithAnalytics } from '../analytics'
 
 export interface DbStore {
   initialized: boolean
@@ -1121,7 +1122,9 @@ const storageDataPredicate = schema({
 export const {
   StoreProvider: DbProvider,
   useStore: useDb
-} = createStoreContext(createDbStoreCreator(localLiteStorage, 'idb'))
+} = createStoreContext(
+  wrapDbStoreWithAnalytics(createDbStoreCreator(localLiteStorage, 'idb'))
+)
 
 export function getStorageDataList(
   liteStorage: LiteStorage