Hearbeats now work. Moved checkAuth from Wakatime react class to main wakatime class.

assets/js/WakaTime.js

@@ -3,6 +3,7 @@ var UrlHelper = require('./UrlHelper');
 var $ = require('jquery');
 
 var currentTimestamp = require('./helpers/currentTimestamp');
+var changeExtensionIcon = require('./helpers/changeExtensionIcon');
 
 class WakaTime {
 
@@ -12,8 +13,41 @@ class WakaTime {
 
     heartbeatApiUrl = 'https://wakatime.com/api/v1/users/current/heartbeats';
 
+    currentUserApiUrl = 'https://wakatime.com/api/v1/users/current';
+
+    checkAuth()
+    {
+        var deferredObject = $.Deferred();
+
+        $.ajax({
+            url: this.currentUserApiUrl,
+            dataType: 'json',
+            success: (data) =>  {
+
+                deferredObject.resolve(data.data);
+
+            },
+            error: (xhr, status, err) => {
+
+                console.error(this.currentUserApiUrl, status, err.toString());
+
+                deferredObject.resolve(false);
+            }
+        });
+
+        return deferredObject.promise();
+    }
+
     recordHeartbeat()
     {
+        this.checkAuth().done(data => {
+
+            if(data !== false){
+
+                console.log('user is logged id.');
+                // User is logged in.
+                changeExtensionIcon();
+
                 console.log('recording heartbeat.');
 
                 chrome.idle.queryState(this.detectionIntervalInSeconds, (newState) => {
@@ -22,6 +56,7 @@ class WakaTime {
 
                     if(newState === 'active')
                     {
+
                         // Get current tab URL.
                         chrome.tabs.query({active: true}, (tabs) => {
                             console.log(tabs[0].url);
@@ -29,17 +64,30 @@ class WakaTime {
                             this.sendHeartbeat(tabs[0].url);
                         });
                     }
-        })
+                });
+
+            }
+            else {
+
+                // User is not logged in.
+                changeExtensionIcon('red');
+
+                console.log('user is not logged id.');
+
+                //TODO: Redirect user to wakatime login page.
+                //
+            }
+        });
     }
 
     _preparePayload(entity, type, debug = false)
     {
-        return {
+        return JSON.stringify({
             entity: entity,
             type: type,
             time: currentTimestamp(),
             is_debugging: debug
-        };
+        });
     }
 
     _getLoggingType()
@@ -97,6 +145,7 @@ class WakaTime {
         $.ajax({
             url: this.heartbeatApiUrl,
             dataType: 'json',
+            contentType: 'application/json',
             method: method,
             data: payload,
             success: (response) =>  {

assets/js/components/WakaTime.react.js

@@ -6,10 +6,10 @@ var MainList = require('./MainList.react');
 
 var changeExtensionIcon = require('../helpers/changeExtensionIcon');
 
+var WakaTimeOriginal = require('../WakaTime');
+
 class WakaTime extends React.Component
 {
-    currentUserApiUrl = 'https://wakatime.com/api/v1/users/current';
-
     logoutUserUrl = 'https://wakatime.com/logout';
 
     state = {
@@ -34,7 +34,9 @@ class WakaTime extends React.Component
         }
       });
 
-      this.checkAuth().done(data => {
+      var wakatime = new WakaTimeOriginal;
+
+      wakatime.checkAuth().done(data => {
 
           if(data !== false){
 
@@ -61,29 +63,6 @@ class WakaTime extends React.Component
 
     }
 
-    checkAuth()
-    {
-        var deferredObject = $.Deferred();
-
-        $.ajax({
-            url: this.currentUserApiUrl,
-            dataType: 'json',
-            success: (data) =>  {
-
-                deferredObject.resolve(data.data);
-
-            },
-            error: (xhr, status, err) => {
-
-                console.error(this.currentUserApiUrl, status, err.toString());
-
-                deferredObject.resolve(false);
-            }
-        });
-
-        return deferredObject.promise();
-    }
-
     logoutUser()
     {
         var deferredObject = $.Deferred();

assets/js/helpers/changeExtensionIcon.js

@@ -7,28 +7,13 @@
  */
 export default function changeExtensionIcon(color = '') {
 
-    var canvas = document.getElementById('icon');
-    var context = canvas.getContext('2d');
-
-    var x = 0;
-    var y = 0;
-    var width = 19;
-    var height = 19;
-    var imageObj = new Image();
-
-    imageObj.onload = function() {
-      context.drawImage(imageObj, x, y, width, height);
-
-      var imageData = context.getImageData(x, y, width, height);
-
-      chrome.browserAction.setIcon({
-          imageData: imageData
-      });
-    };
-
     if(color !== ''){
         color = '-' + color;
     }
 
-    imageObj.src = 'graphics/wakatime-logo-48' + color + '.png';
+    var path = './graphics/wakatime-logo-48' + color + '.png';
+
+    chrome.browserAction.setIcon({
+        path: path
+    });
 }

gulpfile.js

@@ -19,7 +19,7 @@ elixir(function (mix) {
     mix.copy('vendor/bower_components/font-awesome/less', 'assets/less/font-awesome');
     mix.copy('vendor/bower_components/font-awesome/fonts', 'public/fonts');
     mix.less('app.less');
-    //mix.browserify('app.js', null, 'assets/js');
+    mix.browserify('app.js', null, 'assets/js');
-    mix.browserify('events.js', 'public/js/events.js', 'assets/js');
+    //mix.browserify('events.js', 'public/js/events.js', 'assets/js');
     //mix.browserify('options.js', 'public/js/options.js', 'assets/js');
 });

popup.html

@@ -10,8 +10,6 @@
     </head>
     <body>
 
-        <canvas id="icon"></canvas>
-
         <div id="wakatime"></div>
 
         <script src="public/js/bundle.js"></script>

public/css/app.css

@@ -1500,58 +1500,6 @@ address {
   font-style: normal;
   line-height: 1.846;
 }
-code,
-kbd,
-pre,
-samp {
-  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-}
-code {
-  padding: 2px 4px;
-  font-size: 90%;
-  color: #c7254e;
-  background-color: #f9f2f4;
-  border-radius: 3px;
-}
-kbd {
-  padding: 2px 4px;
-  font-size: 90%;
-  color: #ffffff;
-  background-color: #333333;
-  border-radius: 3px;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
-}
-kbd kbd {
-  padding: 0;
-  font-size: 100%;
-  font-weight: bold;
-  box-shadow: none;
-}
-pre {
-  display: block;
-  padding: 11px;
-  margin: 0 0 11.5px;
-  font-size: 12px;
-  line-height: 1.846;
-  word-break: break-all;
-  word-wrap: break-word;
-  color: #212121;
-  background-color: #f5f5f5;
-  border: 1px solid #cccccc;
-  border-radius: 3px;
-}
-pre code {
-  padding: 0;
-  font-size: inherit;
-  color: inherit;
-  white-space: pre-wrap;
-  background-color: transparent;
-  border-radius: 0;
-}
-.pre-scrollable {
-  max-height: 340px;
-  overflow-y: scroll;
-}
 .container {
   margin-right: auto;
   margin-left: auto;

public/js/events.js

@@ -86,6 +86,7 @@ var UrlHelper = require('./UrlHelper');
 var $ = require('jquery');
 
 var currentTimestamp = require('./helpers/currentTimestamp');
+var changeExtensionIcon = require('./helpers/changeExtensionIcon');
 
 var WakaTime = (function () {
     function WakaTime() {
@@ -94,40 +95,85 @@ var WakaTime = (function () {
         this.detectionIntervalInSeconds = 60;
         this.loggingType = 'domain';
         this.heartbeatApiUrl = 'https://wakatime.com/api/v1/users/current/heartbeats';
+        this.currentUserApiUrl = 'https://wakatime.com/api/v1/users/current';
     }
 
     _createClass(WakaTime, [{
+        key: 'checkAuth',
+        value: function checkAuth() {
+            var _this = this;
+
+            var deferredObject = $.Deferred();
+
+            $.ajax({
+                url: this.currentUserApiUrl,
+                dataType: 'json',
+                success: function success(data) {
+
+                    deferredObject.resolve(data.data);
+                },
+                error: function error(xhr, status, err) {
+
+                    console.error(_this.currentUserApiUrl, status, err.toString());
+
+                    deferredObject.resolve(false);
+                }
+            });
+
+            return deferredObject.promise();
+        }
+    }, {
         key: 'recordHeartbeat',
         value: function recordHeartbeat() {
-            var _this = this;
+            var _this2 = this;
+
+            this.checkAuth().done(function (data) {
+
+                if (data !== false) {
+
+                    console.log('user is logged id.');
+                    // User is logged in.
+                    changeExtensionIcon();
 
                     console.log('recording heartbeat.');
 
-            chrome.idle.queryState(this.detectionIntervalInSeconds, function (newState) {
+                    chrome.idle.queryState(_this2.detectionIntervalInSeconds, function (newState) {
 
                         console.log(newState);
 
                         if (newState === 'active') {
+
                             // Get current tab URL.
                             chrome.tabs.query({ active: true }, function (tabs) {
                                 console.log(tabs[0].url);
 
-                        _this.sendHeartbeat(tabs[0].url);
+                                _this2.sendHeartbeat(tabs[0].url);
                             });
                         }
                     });
+                } else {
+
+                    // User is not logged in.
+                    changeExtensionIcon('red');
+
+                    console.log('user is not logged id.');
+
+                    //TODO: Redirect user to wakatime login page.
+                    //
+                }
+            });
         }
     }, {
         key: '_preparePayload',
         value: function _preparePayload(entity, type) {
             var debug = arguments[2] === undefined ? false : arguments[2];
 
-            return {
+            return JSON.stringify({
                 entity: entity,
                 type: type,
                 time: currentTimestamp(),
                 is_debugging: debug
-            };
+            });
         }
     }, {
         key: '_getLoggingType',
@@ -145,7 +191,7 @@ var WakaTime = (function () {
     }, {
         key: 'sendHeartbeat',
         value: function sendHeartbeat(entity) {
-            var _this2 = this;
+            var _this3 = this;
 
             this._getLoggingType().done(function (loggingType) {
 
@@ -158,28 +204,28 @@ var WakaTime = (function () {
 
                     var domain = UrlHelper.getDomainFromUrl(entity);
 
-                    var payload = _this2._preparePayload(domain, 'domain');
+                    var payload = _this3._preparePayload(domain, 'domain');
 
                     console.log(payload);
 
-                    _this2.sendAjaxRequestToApi(payload);
+                    _this3.sendAjaxRequestToApi(payload);
                 } else if (loggingType == 'url') {
                     console.log('sending entity with type url');
 
                     // Send entity in heartbeat
 
-                    var payload = _this2._preparePayload(entity, 'url');
+                    var payload = _this3._preparePayload(entity, 'url');
 
                     console.log(payload);
 
-                    _this2.sendAjaxRequestToApi(payload);
+                    _this3.sendAjaxRequestToApi(payload);
                 }
             });
         }
     }, {
         key: 'sendAjaxRequestToApi',
         value: function sendAjaxRequestToApi(payload) {
-            var _this3 = this;
+            var _this4 = this;
 
             var method = arguments[1] === undefined ? 'POST' : arguments[1];
 
@@ -188,17 +234,18 @@ var WakaTime = (function () {
             $.ajax({
                 url: this.heartbeatApiUrl,
                 dataType: 'json',
+                contentType: 'application/json',
                 method: method,
                 data: payload,
                 success: function success(response) {
 
-                    deferredObject.resolve(_this3);
+                    deferredObject.resolve(_this4);
                 },
                 error: function error(xhr, status, err) {
 
-                    console.error(_this3.heartbeatApiUrl, status, err.toString());
+                    console.error(_this4.heartbeatApiUrl, status, err.toString());
 
-                    deferredObject.resolve(_this3);
+                    deferredObject.resolve(_this4);
                 }
             });
 
@@ -215,7 +262,38 @@ module.exports = exports['default'];
 
 //default
 
-},{"./UrlHelper":2,"./helpers/currentTimestamp":4,"jquery":5}],4:[function(require,module,exports){
+},{"./UrlHelper":2,"./helpers/changeExtensionIcon":4,"./helpers/currentTimestamp":5,"jquery":6}],4:[function(require,module,exports){
+/**
+ * It changes the extension icon color.
+ * Supported values are: 'red', 'white' and ''.
+ *
+ * @param  string color = ''
+ * @return null
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});
+exports['default'] = changeExtensionIcon;
+
+function changeExtensionIcon() {
+    var color = arguments[0] === undefined ? '' : arguments[0];
+
+    if (color !== '') {
+        color = '-' + color;
+    }
+
+    var path = './graphics/wakatime-logo-48' + color + '.png';
+
+    chrome.browserAction.setIcon({
+        path: path
+    });
+}
+
+module.exports = exports['default'];
+
+},{}],5:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -228,7 +306,7 @@ exports["default"] = function () {
 
 module.exports = exports["default"];
 
-},{}],5:[function(require,module,exports){
+},{}],6:[function(require,module,exports){
 /*!
  * jQuery JavaScript Library v2.1.4
  * http://jquery.com/