web: give up CoffeeScript

18 files changed, 450 insertions, 341 deletions

diff --git a/app/assets/javascripts/application.coffee.erb b/app/assets/javascripts/application.coffee.erb
deleted file mode 100644
index 33570c6..0000000
--- a/app/assets/javascripts/application.coffee.erb
+++ /dev/null
@@ -1,55 +0,0 @@
-#= require jquery
-#= require jquery_ujs
-#= require bootstrap/dropdown
-#= require twitter-text-1.11.0
-#= require superagent-1.1.0
-#= require vue-0.12.8-master
-
-#= require init
-#= require_tree ./shared
-#= require_tree ./controllers
-
-$ ->
-  ac = Views[Helpers.controller()]
-  if ac
-    spe = ac[Helpers.action()]
-    if spe
-      spe()
-    else
-      ac._()
-
-  Helpers.parts().forEach (par) ->
-    (Shared[par])?()
-
-$ ->
-  vm = new Vue
-    el: "#user-jump-dropdown"
-    data:
-      users: []
-      enteredUserName: ""
-      loading: false
-    methods:
-      failProfileImage: (e) ->
-        e.target.src = '<%= image_path("profile_image_missing.png") %>'
-      focus: ->
-        vm = this
-        setTimeout (-> vm.$$.input.focus()), 0
-      submit: (e) ->
-        e.preventDefault()
-        window.location = "/" + this.enteredUserName
-
-  currentReq = null
-  vm.$watch "enteredUserName", (newVal, oldVal) ->
-    if newVal.length > 0 && newVal != oldVal
-      if vm.loading
-        currentReq.abort()
-      vm.users = []
-      vm.loading = true
-      currentReq =
-        superagent
-          .get "/i/api/users/suggest_screen_name.json"
-          .query { head: newVal }
-          .accept "json"
-          .end (err, res) ->
-            vm.users = res.body
-            vm.loading = false
diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
new file mode 100644
index 0000000..545fe73
--- /dev/null
+++ b/app/assets/javascripts/application.js.erb
@@ -0,0 +1,65 @@
+//= require jquery
+//= require jquery_ujs
+//= require bootstrap/dropdown
+//= require twitter-text-1.11.0
+//= require superagent-1.1.0
+//= require vue-0.12.8-master
+
+//= require init
+//= require_tree ./shared
+//= require_tree ./controllers
+
+$(function() {
+  var ac = Views[Helpers.controller()];
+  if (ac) {
+    var spe = ac[Helpers.action()];
+    if (spe) {
+      spe();
+    } else {
+      ac._();
+    }
+  }
+  Helpers.parts().forEach(function(par) {
+    var base = Shared[par];
+    if (base) { base(); }
+  });
+});
+
+$(function() {
+  var vm = new Vue({
+    el: "#user-jump-dropdown",
+    data: {
+      users: [],
+      enteredUserName: "",
+      loading: false
+    },
+    methods: {
+      failProfileImage: function(e) {
+        e.target.src = '<%= image_path("profile_image_missing.png") %>';
+      },
+      focus: function() {
+        setTimeout(function() { vm.$$.input.focus(); }, 0);
+      },
+      submit: function(e) {
+        e.preventDefault();
+        window.location = "/" + this.enteredUserName;
+      },
+    },
+  });
+
+  var currentReq = null;
+  vm.$watch("enteredUserName", function(newVal, oldVal) {
+    if (newVal.length == 0 || newVal === oldVal) { return; }
+    if (vm.loading) { currentReq.abort(); }
+    vm.users = [];
+    vm.loading = true;
+    currentReq = superagent
+      .get("/i/api/users/suggest_screen_name.json")
+      .query({ head: newVal })
+      .accept("json")
+      .end(function (err, res) {
+        vm.users = res.body;
+        vm.loading = false;
+      });
+  });
+});
diff --git a/app/assets/javascripts/controllers/about.coffee.erb b/app/assets/javascripts/controllers/about.coffee.erb
deleted file mode 100644
index ac419e5..0000000
--- a/app/assets/javascripts/controllers/about.coffee.erb
+++ /dev/null
@@ -1,44 +0,0 @@
-Views.about =
-  index: ->
-    Array.prototype.forEach.call document.querySelectorAll(".tweet-button a"), (node) ->
-      node.onclick = (e) ->
-        e.preventDefault()
-        Helpers.openTwitterIntent(node.getAttribute("href"))
-  status: ->
-    vm = new Vue
-      el: "#status"
-      data:
-        nodes: {}
-        active_nodes: []
-        inactive_nodes: []
-        loading: false
-        error: null
-      methods:
-        uptime: (i) ->
-          diff = Math.floor(Date.now() / 1000) - this.nodes[i].activated_at
-          if diff < 5 * 60
-            diff.toString() + " seconds"
-          else if diff < 5 * 60 * 60
-            Math.floor(diff / 60).toString() + " minutes"
-          else if diff < 48 * 60 * 60
-            Math.floor(diff / 60 / 60).toString() + " hours"
-          else
-            Math.floor(diff / 60 / 60 / 24).toString() + " days"
-        reload: (e = null) ->
-          e.preventDefault() if e
-          return if vm.loading
-          vm.loading = true
-          superagent
-            .get "/i/status.json"
-            .accept "json"
-            .end (err, res) ->
-              json = res.body
-              vm.loading = false
-              if json.error
-                vm.error = json.error
-              else
-                vm.error = null
-                vm.nodes = json.nodes
-                vm.active_nodes = json.active_nodes
-                vm.inactive_nodes = json.inactive_nodes
-    vm.reload()
diff --git a/app/assets/javascripts/controllers/about.js b/app/assets/javascripts/controllers/about.js
new file mode 100644
index 0000000..f7c40f3
--- /dev/null
+++ b/app/assets/javascripts/controllers/about.js
@@ -0,0 +1,57 @@
+Views.about = {
+  index: function() {
+    Array.prototype.forEach.call(document.querySelectorAll(".tweet-button a"), function(node) {
+      node.onclick = function(e) {
+        e.preventDefault();
+        Helpers.openTwitterIntent(node.getAttribute("href"));
+      };
+    });
+  },
+  status: function() {
+    var vm = new Vue({
+      el: "#status",
+      data: {
+        nodes: {},
+        active_nodes: [],
+        inactive_nodes: [],
+        loading: false,
+        error: null,
+      },
+      methods: {
+        uptime: function (i) {
+          var diff = Math.floor(Date.now() / 1000) - this.nodes[i].activated_at;
+          if (diff < 5 * 60) {
+            return diff.toString() + " seconds";
+          } else if (diff < 5 * 60 * 60) {
+            return Math.floor(diff / 60).toString() + " minutes";
+          } else if (diff < 48 * 60 * 60) {
+            return Math.floor(diff / 60 / 60).toString() + " hours";
+          } else {
+            return Math.floor(diff / 60 / 60 / 24).toString() + " days";
+          }
+        },
+        reload: function (e) {
+          if (e) { e.preventDefault(); }
+          if (vm.loading) { return; }
+          vm.loading = true;
+          superagent
+            .get("/i/status.json")
+            .accept("json")
+            .end(function (err, res) {
+              var json = res.body;
+              vm.loading = false;
+              if (json.error) {
+                vm.error = json.error;
+              } else {
+                vm.error = null;
+                vm.nodes = json.nodes;
+                vm.active_nodes = json.active_nodes;
+                vm.inactive_nodes = json.inactive_nodes;
+              }
+            });
+        },
+      },
+    });
+    vm.reload();
+  },
+};
diff --git a/app/assets/javascripts/controllers/apidocs.coffee b/app/assets/javascripts/controllers/apidocs.coffee
deleted file mode 100644
index 42af1f8..0000000
--- a/app/assets/javascripts/controllers/apidocs.coffee
+++ /dev/null
@@ -1,13 +0,0 @@
-Views.apidocs =
-  endpoint: ->
-    loading = $("#example_request_loading")
-    if loading isnt null
-      code = loading.parent()
-      superagent
-        .get $("#example_request_uri").text()
-        .accept "json"
-        .end (err, res) ->
-          if res.ok
-            code.text(JSON.stringify(res.body, null, 2))
-          else
-            code.text("failed to load example....")
diff --git a/app/assets/javascripts/controllers/apidocs.js b/app/assets/javascripts/controllers/apidocs.js
new file mode 100644
index 0000000..12bf8ef
--- /dev/null
+++ b/app/assets/javascripts/controllers/apidocs.js
@@ -0,0 +1,18 @@
+Views.apidocs = {
+  endpoint: function() {
+    var loading = $("#example_request_loading");
+    if (loading) {
+      var code = loading.parent();
+      superagent
+        .get($("#example_request_uri").text())
+        .accept("json")
+        .end(function(err, res) {
+          if (res.ok) {
+            return code.text(JSON.stringify(res.body, null, 2));
+          } else {
+            return code.text("failed to load example....");
+          }
+        });
+    }
+  }
+};
diff --git a/app/assets/javascripts/controllers/tweets.coffee.erb b/app/assets/javascripts/controllers/tweets.coffee.erb
deleted file mode 100644
index aacb3a7..0000000
--- a/app/assets/javascripts/controllers/tweets.coffee.erb
+++ /dev/null
@@ -1,75 +0,0 @@
-Views.tweets =
-  _: ->
-    vm = new Vue
-      el: ".statuses"
-      data:
-        statuses: []
-        loading: false
-        next: null
-        prev: null
-      methods:
-        clear: ->
-          this.statuses = []
-        loadNext: (nextUrl = null, queryString = null) ->
-          vm = this
-          if vm.loading || (!nextUrl && !vm.next)
-            return
-          vm.loading = true
-          superagent
-            .get(nextUrl || vm.next)
-            .query(queryString || {})
-            .accept "json"
-            .end (err, res) ->
-              json = res.body
-              vm.statuses = vm.statuses.concat(json.statuses)
-              vm.next = json.next
-              vm.loading = false
-
-    content = $(".statuses")
-    $(window).scroll ->
-      if (content.offset().top + content.height()) - ($(document).scrollTop() + $(window).height()) < 100
-        vm.loadNext()
-
-    if !Views.tweets[Helpers.action()]
-      query = Helpers.given_parameters()
-      if Helpers.user_screen_name()
-        query.screen_name = Helpers.user_screen_name()
-      url = "/i/api/" + Helpers.controller() + "/" + Helpers.action() + ".json"
-      vm.loadNext(url, query)
-  show: ->
-    _query = Helpers.given_parameters()
-    _query.id = Helpers.tweet_id()
-
-    vm = new Vue
-      el: ".statuses"
-      data:
-        statuses: []
-        loading: false
-      methods:
-        reload: (e = null) ->
-          e.preventDefault() if e
-          return if this.loading
-          vm = this
-          vm.loading = true
-          superagent
-            .post "/i/api/tweets/update.json"
-            .query _query
-            .send { authenticity_token: Helpers.authenticity_token() }
-            .accept "json"
-            .end (err, res) ->
-              json = res.body
-              vm.statuses = json.statuses
-              vm.loading = false
-        load: ->
-          return if this.loading
-          vm = this
-          vm.loading = true
-          superagent
-            .get "/i/api/tweets/show.json"
-            .query _query
-            .accept "json"
-            .end (err, res) ->
-              json = res.body
-              vm.statuses = json.statuses
-              vm.loading = false
-    vm.load()
diff --git a/app/assets/javascripts/controllers/tweets.js b/app/assets/javascripts/controllers/tweets.js
new file mode 100644
index 0000000..8c5bead
--- /dev/null
+++ b/app/assets/javascripts/controllers/tweets.js
@@ -0,0 +1,93 @@
+Views.tweets = {
+  _: function() {
+    var vm = new Vue({
+      el: ".statuses",
+      data: {
+        statuses: [],
+        loading: false,
+        next: null,
+        prev: null,
+      },
+      methods: {
+        clear: function() {
+          this.statuses = [];
+        },
+        loadNext: function(nextUrl, queryString) {
+          vm = this;
+          if (vm.loading || (!nextUrl && !vm.next)) { return; }
+          vm.loading = true;
+          superagent
+            .get(nextUrl || vm.next)
+            .query(queryString || {})
+            .accept("json")
+            .end(function(err, res) {
+              var json = res.body;
+              vm.statuses = vm.statuses.concat(json.statuses);
+              vm.next = json.next;
+              vm.loading = false;
+            });
+        },
+      },
+    });
+
+    var content = $(".statuses");
+    $(window).scroll(function() {
+      if ((content.offset().top + content.height()) - ($(document).scrollTop() + $(window).height()) < 100) {
+        vm.loadNext();
+      }
+    });
+
+    if (!Views.tweets[Helpers.action()]) {
+      var query = Helpers.given_parameters();
+      if (Helpers.user_screen_name()) {
+        query.screen_name = Helpers.user_screen_name();
+      }
+      var url = "/i/api/" + Helpers.controller() + "/" + Helpers.action() + ".json";
+      vm.loadNext(url, query);
+    }
+  },
+  show: function() {
+    var _query = Helpers.given_parameters();
+    _query.id = Helpers.tweet_id();
+    var vm = new Vue({
+      el: ".statuses",
+      data: {
+        statuses: [],
+        loading: false
+      },
+      methods: {
+        reload: function(e) {
+          if (e) { e.preventDefault(); }
+          if (this.loading) { return; }
+          vm = this;
+          vm.loading = true;
+          superagent
+            .post("/i/api/tweets/update.json")
+            .query(_query)
+            .send({ authenticity_token: Helpers.authenticity_token() })
+            .accept("json")
+            .end(function(err, res) {
+              var json = res.body;
+              vm.statuses = json.statuses;
+              vm.loading = false;
+            });
+        },
+        load: function() {
+          if (this.loading) { return; }
+          vm = this;
+          vm.loading = true;
+          superagent
+            .get("/i/api/tweets/show.json")
+            .query(_query)
+            .accept("json")
+            .end(function(err, res) {
+              var json = res.body;
+              vm.statuses = json.statuses;
+              vm.loading = false;
+            });
+        },
+      },
+    });
+    vm.load();
+  },
+};
diff --git a/app/assets/javascripts/controllers/users.coffee.erb b/app/assets/javascripts/controllers/users.coffee.erb
deleted file mode 100644
index 7b1035f..0000000
--- a/app/assets/javascripts/controllers/users.coffee.erb
+++ /dev/null
@@ -1,51 +0,0 @@
-Views.users =
-  stats: ->
-    drawgraph = (target, data_raw, det) ->
-      vm = new Vue
-        el: target
-        data:
-          users: data_raw.users
-          users_count: data_raw.users_count
-          reactions_count: data_raw.reactions_count
-          colors: ["#393b79", "#5254a3", "#6b6ecf", "#9c9ede", "#637939", "#8ca252", "#b5cf6b", "#cedb9c", "#8c6d31", "#bd9e39", "#e7ba52", "#e7cb94", "#843c39", "#ad494a", "#d6616b", "#e7969c", "#7b4173", "#a55194", "#ce6dbd", "#de9ed6"]
-          loading: false
-          showTweets: false
-          statuses: []
-          lastUser: null
-        computed:
-          tweetsUrl: ->
-            d = det(this.lastUser)
-            "/" + d[0] + "/favorited_by/" + d[1]
-          tweetsApi: ->
-            d = det(this.lastUser)
-            "/i/api/tweets/user_favorited_by.json?screen_name=" + d[0] + "&source_screen_name=" + d[1]
-        methods:
-          openTweets: (user, e) ->
-            if !this.showTweets || user == this.lastUser
-              this.showTweets = !this.showTweets
-            if this.showTweets
-              this.lastUser = user
-              vm = this
-              superagent
-                .get vm.tweetsApi
-                .query { count: 3 }
-                .accept "json"
-                .end (err, res) ->
-                  json = res.body
-                  vm.statuses = json.statuses
-    superagent
-      .get "/i/api/users/favorited_by.json"
-      .query { screen_name: Helpers.user_screen_name() }
-      .accept "json"
-      .end (err, res) ->
-        json = res.body
-        drawgraph "#favorited_by", res.body, (user) ->
-          [Helpers.user_screen_name(), user.screen_name]
-    superagent
-      .get "/i/api/users/favorited_users.json"
-      .query { screen_name: Helpers.user_screen_name() }
-      .accept "json"
-      .end (err, res) ->
-        json = res.body
-        drawgraph "#favorited_users", res.body, (user) ->
-          [user.screen_name, Helpers.user_screen_name()]
diff --git a/app/assets/javascripts/controllers/users.js b/app/assets/javascripts/controllers/users.js
new file mode 100644
index 0000000..332285a
--- /dev/null
+++ b/app/assets/javascripts/controllers/users.js
@@ -0,0 +1,65 @@
+Views.users = {
+  stats: function() {
+    var drawgraph = function(target, data_raw, det) {
+      var vm = new Vue({
+        el: target,
+        data: {
+          users: data_raw.users,
+          users_count: data_raw.users_count,
+          reactions_count: data_raw.reactions_count,
+          colors: ["#393b79", "#5254a3", "#6b6ecf", "#9c9ede", "#637939", "#8ca252", "#b5cf6b", "#cedb9c", "#8c6d31", "#bd9e39", "#e7ba52", "#e7cb94", "#843c39", "#ad494a", "#d6616b", "#e7969c", "#7b4173", "#a55194", "#ce6dbd", "#de9ed6"],
+          loading: false,
+          showTweets: false,
+          statuses: [],
+          lastUser: null
+        },
+        computed: {
+          tweetsUrl: function() {
+            var d = det(this.lastUser);
+            return "/" + d[0] + "/favorited_by/" + d[1];
+          },
+          tweetsApi: function() {
+            var d = det(this.lastUser);
+            return "/i/api/tweets/user_favorited_by.json?screen_name=" + d[0] + "&source_screen_name=" + d[1];
+          }
+        },
+        methods: {
+          openTweets: function(user, e) {
+            if (!this.showTweets || user === this.lastUser) {
+              this.showTweets = !this.showTweets;
+            }
+            if (this.showTweets) {
+              this.lastUser = user;
+              vm = this;
+              superagent
+                .get(vm.tweetsApi)
+                .query({ count: 3 })
+                .accept("json")
+                .end(function(err, res) {
+                  var json = res.body;
+                  vm.statuses = json.statuses;
+                });
+            }
+          },
+        },
+      });
+    };
+
+    superagent
+      .get("/i/api/users/favorited_by.json")
+      .query({ screen_name: Helpers.user_screen_name() })
+      .accept("json")
+      .end(function(err, res) {
+        var json = res.body;
+        drawgraph("#favorited_by", res.body, function(user) { return [Helpers.user_screen_name(), user.screen_name]; });
+      });
+    superagent
+      .get("/i/api/users/favorited_users.json")
+      .query({ screen_name: Helpers.user_screen_name() })
+      .accept("json")
+      .end(function(err, res) {
+        var json = res.body;
+        drawgraph("#favorited_users", res.body, function(user) { return [user.screen_name, Helpers.user_screen_name()]; });
+      });
+  },
+};
diff --git a/app/assets/javascripts/init.coffee.erb b/app/assets/javascripts/init.coffee.erb
deleted file mode 100644
index 9aa946b..0000000
--- a/app/assets/javascripts/init.coffee.erb
+++ /dev/null
@@ -1,17 +0,0 @@
-Vue.config.prefix = "data-v-"
-Vue.config.strict = true
-Vue.filter "toLocaleString", (string) ->
-  new Date(string).toLocaleString()
-Vue.filter "removeInvalidCharacters", (str) ->
-  # JavaScript is kuso: http://www.w3.org/TR/xml/#charsets
-  str.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/gm, "")
-
-<% if Rails.env.development? %>
-Vue.config.debug = true
-<% end %>
-
-if window.Views is undefined
-  window.Views = {}
-  window.Helpers = {}
-  window.Shared = {}
-  window.Common = {}
diff --git a/app/assets/javascripts/init.js.erb b/app/assets/javascripts/init.js.erb
new file mode 100644
index 0000000..c8d54a4
--- /dev/null
+++ b/app/assets/javascripts/init.js.erb
@@ -0,0 +1,22 @@
+Vue.config.prefix = "data-v-";
+Vue.config.strict = true;
+
+<% if Rails.env.development? %>
+Vue.config.debug = true;
+<% end %>
+
+Vue.filter("toLocaleString", function (string) {
+  return new Date(string).toLocaleString();
+});
+
+Vue.filter("removeInvalidCharacters", function (str) {
+  // JavaScript is kuso: http://www.w3.org/TR/xml/#charsets
+  return str.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/gm, "");
+});
+
+if (window.Views === void 0) {
+  window.Views = {};
+  window.Helpers = {};
+  window.Shared = {};
+  window.Common = {};
+}
diff --git a/app/assets/javascripts/shared/component_tweet.coffee.erb b/app/assets/javascripts/shared/component_tweet.coffee.erb
deleted file mode 100644
index 66f6013..0000000
--- a/app/assets/javascripts/shared/component_tweet.coffee.erb
+++ /dev/null
@@ -1,43 +0,0 @@
-Vue.component "tweet",
-  template: "#tweet-template"
-  data: ->
-    loading: false
-    expandFavorites: false
-    expandRetweets: false
-  filters:
-    formatSource: (str) ->
-      if /^<a href="([^"]+?)" rel="nofollow">([^<>]+?)<\/a>$/.test(str)
-        str.replace(/&/g, "&amp;")
-      else
-        str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
-    formatText: (str) ->
-      autolinked = twttr.txt.autoLink(str, { suppressLists: true, usernameIncludeSymbol: true, usernameUrlBase: "/" })
-      autolinked.replace(/\r?\n/g, "<br />\n")
-  methods:
-    failProfileImage: (e) ->
-      e.preventDefault()
-      e.target.src = '<%= image_path("profile_image_missing.png") %>'
-    toggleExpandFavorites: (e) ->
-      e.preventDefault()
-      this.expandFavorites = !this.expandFavorites
-    toggleExpandRetweets: (e) ->
-      e.preventDefault()
-      this.expandRetweets = !this.expandRetweets
-    openIntent: (e) ->
-      e.preventDefault()
-      Helpers.openTwitterIntent(e.target.getAttribute("href"))
-    updateReactions: ->
-      if this.allowed && this.reactions_count > 0
-        vm = this
-        vm.loading = true
-        superagent
-          .get "/i/api/tweets/responses.json"
-          .query { id: this.id_str }
-          .accept "json"
-          .end (rerr, rres) ->
-            rjson = rres.body
-            vm.favorites = rjson.favorites
-            vm.retweets = rjson.retweets
-            vm.loading = false
-  ready: ->
-    this.updateReactions()
diff --git a/app/assets/javascripts/shared/component_tweet.js.erb b/app/assets/javascripts/shared/component_tweet.js.erb
new file mode 100644
index 0000000..23b7e94
--- /dev/null
+++ b/app/assets/javascripts/shared/component_tweet.js.erb
@@ -0,0 +1,63 @@
+Vue.component("tweet", {
+  template: "#tweet-template",
+  data: function() {
+    return {
+      loading: false,
+      expandFavorites: false,
+      expandRetweets: false,
+    };
+  },
+  filters: {
+    formatSource: function(str) {
+      if (/^<a href="([^"]+?)" rel="nofollow">([^<>]+?)<\/a>$/.test(str)) {
+        return str.replace(/&/g, "&amp;");
+      } else {
+        return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      }
+    },
+    formatText: function(str) {
+      var autolinked = twttr.txt.autoLink(str, {
+        suppressLists: true,
+        usernameIncludeSymbol: true,
+        usernameUrlBase: "/"
+      });
+      return autolinked.replace(/\r?\n/g, "<br />\n");
+    }
+  },
+  methods: {
+    failProfileImage: function(e) {
+      e.preventDefault();
+      e.target.src = '<%= image_path("profile_image_missing.png") %>';
+    },
+    toggleExpandFavorites: function(e) {
+      e.preventDefault();
+      this.expandFavorites = !this.expandFavorites;
+    },
+    toggleExpandRetweets: function(e) {
+      e.preventDefault();
+      this.expandRetweets = !this.expandRetweets;
+    },
+    openIntent: function(e) {
+      e.preventDefault();
+      Helpers.openTwitterIntent(e.target.getAttribute("href"));
+    },
+    updateReactions: function() {
+      if (!this.allowed || this.reactions_count == 0) { return; }
+      var vm = this;
+      vm.loading = true;
+      superagent
+        .get("/i/api/tweets/responses.json")
+        .query({ id: this.id_str })
+        .accept("json")
+        .end(function(rerr, rres) {
+          var rjson = rres.body;
+          vm.favorites = rjson.favorites;
+          vm.retweets = rjson.retweets;
+          vm.loading = false;
+        });
+    },
+  },
+  ready: function() {
+    this.updateReactions();
+  },
+});
diff --git a/app/assets/javascripts/shared/helpers.coffee.erb b/app/assets/javascripts/shared/helpers.coffee.erb
deleted file mode 100644
index 0e25609..0000000
--- a/app/assets/javascripts/shared/helpers.coffee.erb
+++ /dev/null
@@ -1,25 +0,0 @@
-window.Helpers =
-  controller: -> document.body.getAttribute("data-controller")
-  action: -> document.body.getAttribute("data-action")
-  parts: -> (document.body.getAttribute("data-parts") || "").split(" ")
-  user_id: -> document.body.getAttribute("data-user-id")
-  user_screen_name: -> document.body.getAttribute("data-user-screen-name")
-  tweet_id: -> document.body.getAttribute("data-tweet-id")
-  authenticity_token: -> document.querySelector("meta[name=csrf-token]").getAttribute("content")
-  openTwitterIntent: (url) ->
-    w = 550
-    h = 420
-    sh = window.screen.height
-    sw = window.screen.width
-    left = Math.round(sw / 2 - w / 2)
-    top = sh > h && Math.round(sh / 2 - h / 2) || 0
-    options = "scrollbars=yes, resizable=yes, toolbar=no, location=yes, width=" + w + ", height=" + h + ", left=" + left + ", top=" + top
-    window.open url, null, options
-  given_parameters: ->
-    query = {}
-    parameters = window.location.search.substring(1).split("&")
-    parameters.forEach (item) ->
-      if item.length > 0
-        ite = item.split("=")
-        query[decodeURIComponent(ite[0])] = decodeURIComponent(ite[1])
-    query
diff --git a/app/assets/javascripts/shared/helpers.js.erb b/app/assets/javascripts/shared/helpers.js.erb
new file mode 100644
index 0000000..fe3b46c
--- /dev/null
+++ b/app/assets/javascripts/shared/helpers.js.erb
@@ -0,0 +1,44 @@
+window.Helpers = {
+  controller: function() {
+    return document.body.getAttribute("data-controller");
+  },
+  action: function() {
+    return document.body.getAttribute("data-action");
+  },
+  parts: function() {
+    return (document.body.getAttribute("data-parts") || "").split(" ");
+  },
+  user_id: function() {
+    return document.body.getAttribute("data-user-id");
+  },
+  user_screen_name: function() {
+    return document.body.getAttribute("data-user-screen-name");
+  },
+  tweet_id: function() {
+    return document.body.getAttribute("data-tweet-id");
+  },
+  authenticity_token: function() {
+    return document.querySelector("meta[name=csrf-token]").getAttribute("content");
+  },
+  openTwitterIntent: function(url) {
+    var w = 550;
+    var h = 420;
+    var sh = window.screen.height;
+    var sw = window.screen.width;
+    var left = Math.round(sw / 2 - w / 2);
+    var top = sh > h && Math.round(sh / 2 - h / 2) || 0;
+    var options = "scrollbars=yes, resizable=yes, toolbar=no, location=yes, width=" + w + ", height=" + h + ", left=" + left + ", top=" + top;
+    window.open(url, null, options);
+  },
+  given_parameters: function() {
+    var query = {};
+    var parameters = window.location.search.substring(1).split("&");
+    parameters.forEach(function(item) {
+      if (item.length > 0) {
+        var ite = item.split("=");
+        query[decodeURIComponent(ite[0])] = decodeURIComponent(ite[1]);
+      }
+    });
+    return query;
+  }
+};
diff --git a/app/assets/javascripts/shared/sidebar_user_stats.coffee b/app/assets/javascripts/shared/sidebar_user_stats.coffee
deleted file mode 100644
index 9d35977..0000000
--- a/app/assets/javascripts/shared/sidebar_user_stats.coffee
+++ /dev/null
@@ -1,18 +0,0 @@
-Shared.sidebar_user_stats = ->
-  vm = new Vue
-    el: ".user-stats"
-    data:
-      stats: null
-      screen_name: Helpers.user_screen_name()
-      loading: true
-    computed:
-      average: ->
-        Math.round(this.stats.reactions_count / this.stats.tweets_count * 100) / 100
-
-  superagent
-    .get "/i/api/users/stats_compact.json"
-    .query { screen_name: Helpers.user_screen_name() }
-    .accept "json"
-    .end (err, res) ->
-      vm.stats = res.body
-      vm.loading = false
diff --git a/app/assets/javascripts/shared/sidebar_user_stats.js b/app/assets/javascripts/shared/sidebar_user_stats.js
new file mode 100644
index 0000000..233eb94
--- /dev/null
+++ b/app/assets/javascripts/shared/sidebar_user_stats.js
@@ -0,0 +1,23 @@
+window.Shared.sidebar_user_stats = function() {
+  var vm = new Vue({
+    el: ".user-stats",
+    data: {
+      stats: null,
+      screen_name: Helpers.user_screen_name(),
+      loading: true
+    },
+    computed: {
+      average: function() {
+        return Math.round(this.stats.reactions_count / this.stats.tweets_count * 100) / 100;
+      }
+    }
+  });
+  superagent
+    .get("/i/api/users/stats_compact.json")
+    .query({ screen_name: Helpers.user_screen_name() })
+    .accept("json")
+    .end(function(err, res) {
+      vm.stats = res.body;
+      vm.loading = false;
+    });
+};