Convert Angular services to CommonJS-style and use them in React components instead of injecting

client/app/components/AutocompleteToggle.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Tooltip from 'antd/lib/tooltip';
 import PropTypes from 'prop-types';
 import '@/redash-font/style.less';
-import recordEvent from '@/lib/recordEvent';
+import { Events } from '@/services/events';
 
 export default function AutocompleteToggle({ state, disabled, onToggle }) {
   let tooltipMessage = 'Live Autocomplete Enabled';
@@ -18,7 +18,7 @@ export default function AutocompleteToggle({ state, disabled, onToggle }) {
   }
 
   const toggle = (newState) => {
-    recordEvent('toggle_autocomplete', 'screen', 'query_editor', { state: newState });
+    Events.record('toggle_autocomplete', 'screen', 'query_editor', { state: newState });
     onToggle(newState);
   };
 

client/app/components/dynamic-form/DynamicForm.jsx

@@ -8,7 +8,7 @@ import Button from 'antd/lib/button';
 import Upload from 'antd/lib/upload';
 import Icon from 'antd/lib/icon';
 import { react2angular } from 'react2angular';
-import { toastr } from '@/services/toastr';
+import { toastr } from '@/services/ng';
 import { Field, Action, AntdForm } from '../proptypes';
 import helper from './dynamicFormHelper';
 

client/app/index.js

@@ -13,8 +13,7 @@ ngModule.config(($locationProvider, $compileProvider, uiSelectConfig, toastrConf
 });
 
 // Update ui-select's template to use Font-Awesome instead of glyphicon.
-// eslint-disable-next-line no-unused-vars
-ngModule.run(($templateCache, OfflineListener) => {
+ngModule.run(($templateCache) => {
   const templateName = 'bootstrap/match.tpl.html';
   let template = $templateCache.get(templateName);
   template = template.replace('glyphicon glyphicon-remove', 'fa fa-remove');

client/app/services/events.js

@@ -1,9 +1,30 @@
-import recordEvent from '@/lib/recordEvent';
+import { debounce, extend } from 'lodash';
+import { $http } from '@/services/ng';
 
 export let Events = null; // eslint-disable-line import/no-mutable-exports
 
+let events = [];
+
+const sendEvents = debounce(() => {
+  const eventsToSend = events;
+  events = [];
+
+  $http.post('api/events', eventsToSend);
+}, 1000);
+
 function EventsService() {
-  this.record = recordEvent;
+  this.record = (action, objectType, objectId, additionalProperties) => {
+    const event = {
+      action,
+      object_type: objectType,
+      object_id: objectId,
+      timestamp: Date.now() / 1000.0,
+      screen_resolution: `${window.screen.width}x${window.screen.height}`,
+    };
+    extend(event, additionalProperties);
+    events.push(event);
+    sendEvents();
+  };
 }
 
 export default function init(ngModule) {

client/app/services/ng.js

@@ -1,10 +1,12 @@
 export let $http = null; // eslint-disable-line import/no-mutable-exports
+export let $sanitize = null; // eslint-disable-line import/no-mutable-exports
 export let $uibModal = null; // eslint-disable-line import/no-mutable-exports
 export let toastr = null; // eslint-disable-line import/no-mutable-exports
 
 export default function init(ngModule) {
   ngModule.run(($injector) => {
     $http = $injector.get('$http');
+    $sanitize = $injector.get('$sanitize');
     $uibModal = $injector.get('$uibModal');
     toastr = $injector.get('toastr');
   });

client/app/services/offline-listener.js

@@ -1,25 +1,25 @@
-function OfflineListener(toastr) {
-  function addOnlineListener(toast) {
-    function onlineStateHandler() {
-      toastr.remove(toast.toastId);
-      window.removeEventListener('online', onlineStateHandler);
-    }
-    window.addEventListener('online', onlineStateHandler);
-  }
+import { toastr } from '@/services/ng';
 
-  window.addEventListener('offline', () => {
-    const toast = toastr.warning('<div>Please check your Internet connection.</div>', '', {
-      allowHtml: true,
-      autoDismiss: false,
-      timeOut: false,
-      tapToDismiss: true,
-    });
-    addOnlineListener(toast);
-  });
+function addOnlineListener(toast) {
+  function onlineStateHandler() {
+    toastr.remove(toast.toastId);
+    window.removeEventListener('online', onlineStateHandler);
+  }
+  window.addEventListener('online', onlineStateHandler);
 }
 
 export default function init(ngModule) {
-  ngModule.service('OfflineListener', OfflineListener);
+  ngModule.run(() => {
+    window.addEventListener('offline', () => {
+      const toast = toastr.warning('<div>Please check your Internet connection.</div>', '', {
+        allowHtml: true,
+        autoDismiss: false,
+        timeOut: false,
+        tapToDismiss: true,
+      });
+      addOnlineListener(toast);
+    });
+  });
 }
 
 init.init = true;

client/app/services/user.js

@@ -1,13 +1,13 @@
 import { isString } from 'lodash';
-import { $http } from '@/services/ng';
+import { $http, $sanitize, toastr } from '@/services/ng';
 
 export let User = null; // eslint-disable-line import/no-mutable-exports
 
 function disableResource(user) {
   return `api/users/${user.id}/disable`;
 }
 
-function enableUser(user, toastr, $sanitize) {
+function enableUser(user) {
   const userName = $sanitize(user.name);
 
   return $http
@@ -27,7 +27,7 @@ function enableUser(user, toastr, $sanitize) {
     });
 }
 
-function disableUser(user, toastr, $sanitize) {
+function disableUser(user) {
   const userName = $sanitize(user.name);
   return $http
     .post(disableResource(user))
@@ -47,7 +47,7 @@ function disableUser(user, toastr, $sanitize) {
     });
 }
 
-function deleteUser(user, toastr, $sanitize) {
+function deleteUser(user) {
   const userName = $sanitize(user.name);
   return $http
     .delete(`api/users/${user.id}`)
@@ -65,7 +65,7 @@ function deleteUser(user, toastr, $sanitize) {
     });
 }
 
-function UserService($resource, $sanitize, toastr) {
+function UserService($resource) {
   const actions = {
     get: { method: 'GET' },
     save: { method: 'POST' },
@@ -77,9 +77,9 @@ function UserService($resource, $sanitize, toastr) {
 
   const UserResource = $resource('api/users/:id', { id: '@id' }, actions);
 
-  UserResource.enableUser = user => enableUser(user, toastr, $sanitize);
-  UserResource.disableUser = user => disableUser(user, toastr, $sanitize);
-  UserResource.deleteUser = user => deleteUser(user, toastr, $sanitize);
+  UserResource.enableUser = enableUser;
+  UserResource.disableUser = disableUser;
+  UserResource.deleteUser = deleteUser;
 
   return UserResource;
 }