Merge pull request #715 from asmsuechan/add-checkbox-for-ama

Add checkbox for ama

browser/main/lib/AwsMobileAnalyticsConfig.js

@@ -3,7 +3,7 @@ const AMA = require('aws-sdk-mobile-analytics')
 const ConfigManager = require('browser/main/lib/ConfigManager')
 
 AWS.config.region = 'us-east-1'
-if (process.env.NODE_ENV === 'production') {
+if (process.env.NODE_ENV === 'production' && ConfigManager.default.get().amaEnabled) {
   AWS.config.credentials = new AWS.CognitoIdentityCredentials({
     IdentityPoolId: 'us-east-1:xxxxxxxxxxxxxxxxxxxxxxxxx'
   })
@@ -14,7 +14,7 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 function initAwsMobileAnalytics () {
-  if (process.env.NODE_ENV !== 'production') return
+  if (process.env.NODE_ENV !== 'production' || !ConfigManager.default.get().amaEnabled) return
   AWS.config.credentials.get((err) => {
     if (!err) {
       console.log('Cognito Identity ID: ' + AWS.config.credentials.identityId)
@@ -24,12 +24,12 @@ function initAwsMobileAnalytics () {
 }
 
 function recordDynamitCustomEvent (type) {
-  if (process.env.NODE_ENV !== 'production') return
+  if (process.env.NODE_ENV !== 'production' || !ConfigManager.default.get().amaEnabled) return
   mobileAnalyticsClient.recordEvent(type)
 }
 
 function recordStaticCustomEvent () {
-  if (process.env.NODE_ENV !== 'production') return
+  if (process.env.NODE_ENV !== 'production' || !ConfigManager.default.get().amaEnabled) return
   mobileAnalyticsClient.recordEvent('UI_COLOR_THEME', {
     uiColorTheme: ConfigManager.default.get().ui.theme
   })

browser/main/lib/ConfigManager.js

@@ -14,6 +14,7 @@ export const DEFAULT_CONFIG = {
   navWidth: 200,
   sortBy: 'UPDATED_AT', // 'CREATED_AT', 'UPDATED_AT', 'APLHABETICAL'
   listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL'
+  amaEnabled: true,
   hotkey: {
     toggleFinder: OSX ? 'Cmd + Alt + S' : 'Super + Alt + S',
     toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'

browser/main/modals/PreferencesModal/InfoTab.js

@@ -1,6 +1,9 @@
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoTab.styl'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import store from 'browser/main/store'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 const electron = require('electron')
 const { shell, remote } = electron
@@ -11,6 +14,7 @@ class InfoTab extends React.Component {
     super(props)
 
     this.state = {
+      config: this.props.config
     }
   }
 
@@ -19,6 +23,28 @@ class InfoTab extends React.Component {
     e.preventDefault()
   }
 
+  handleConfigChange (e) {
+    const newConfig = { amaEnabled: this.refs.amaEnabled.checked }
+
+    this.setState({ config: newConfig })
+  }
+
+  handleSaveButtonClick (e) {
+    let newConfig = {
+      amaEnabled: this.state.config.amaEnabled
+    }
+
+    ConfigManager.set(newConfig)
+
+    store.dispatch({
+      type: 'SET_CONFIG',
+      config: newConfig
+    })
+    if (!newConfig.amaEnabled) {
+      AwsMobileAnalyticsConfig.recordDynamitCustomEvent('DISABLE_AMA')
+    }
+  }
+
   render () {
     return (
       <div styleName='root'>
@@ -68,6 +94,18 @@ class InfoTab extends React.Component {
             License: GPL v3
           </li>
         </ul>
+        <hr />
+        <div styleName='policy'>Data collection policy</div>
+        <p>We collect only the number of users on Boostnote for DAU and any detail information<br />
+        such as a note's content or title is not collected.</p>
+        <p>You can see how it works on <a href='https://github.com/BoostIO/Boostnote'>GitHub</a></p>
+        <input onChange={(e) => this.handleConfigChange(e)}
+          checked={this.state.config.amaEnabled}
+          ref='amaEnabled'
+          type='checkbox'
+        />
+        Enable to send analytics to our servers<br />
+        <button onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
       </div>
     )
   }

browser/main/modals/PreferencesModal/InfoTab.styl

@@ -41,7 +41,10 @@
   a
     color #4E8EC6
     text-decoration none
-  
+
+.policy
+  font-size 20px
+
 body[data-theme="dark"]
   .root
-    color alpha($tab--dark-text-color, 80%)
+    color alpha($tab--dark-text-color, 80%)

browser/main/modals/PreferencesModal/index.js

@@ -44,7 +44,12 @@ class Preferences extends React.Component {
 
     switch (this.state.currentTab) {
       case 'INFO':
-        return <InfoTab />
+        return (
+          <InfoTab
+            dispatch={dispatch}
+            config={config}
+          />
+        )
       case 'HOTKEY':
         return (
           <HotkeyTab