Massive JavaScript cleanup

- Use JSX for templates
- Docblock/comment everything
- Mostly passes ESLint (still some work to do)
- Lots of renaming, refactoring, etc.

CSS hasn't been updated yet.

js/lib/models/user.js

@@ -1,69 +1,98 @@
-import Model from 'flarum/model'
-import stringToColor from 'flarum/utils/string-to-color';
-import ItemList from 'flarum/utils/item-list';
+/*global ColorThief*/
+
+import Model from 'flarum/Model';
+import mixin from 'flarum/utils/mixin';
+import stringToColor from 'flarum/utils/stringToColor';
+import ItemList from 'flarum/utils/ItemList';
 import computed from 'flarum/utils/computed';
-import Badge from 'flarum/components/badge';
+import Badge from 'flarum/components/Badge';
 
-class User extends Model {}
+export default class User extends mixin(Model, {
+  username: Model.attribute('username'),
+  email: Model.attribute('email'),
+  isConfirmed: Model.attribute('isConfirmed'),
+  password: Model.attribute('password'),
 
-User.prototype.username = Model.attribute('username');
-User.prototype.email = Model.attribute('email');
-User.prototype.isConfirmed = Model.attribute('isConfirmed');
-User.prototype.password = Model.attribute('password');
-User.prototype.avatarUrl = Model.attribute('avatarUrl');
-User.prototype.bio = Model.attribute('bio');
-User.prototype.bioHtml = Model.attribute('bioHtml');
-User.prototype.preferences = Model.attribute('preferences');
+  avatarUrl: Model.attribute('avatarUrl'),
+  bio: Model.attribute('bio'),
+  bioHtml: Model.attribute('bioHtml'),
+  preferences: Model.attribute('preferences'),
+  groups: Model.hasMany('groups'),
 
-User.prototype.groups = Model.hasMany('groups');
+  joinTime: Model.attribute('joinTime', Model.transformDate),
+  lastSeenTime: Model.attribute('lastSeenTime', Model.transformDate),
+  readTime: Model.attribute('readTime', Model.transformDate),
+  unreadNotificationsCount: Model.attribute('unreadNotificationsCount'),
 
-User.prototype.joinTime = Model.attribute('joinTime', Model.transformDate);
-User.prototype.lastSeenTime = Model.attribute('lastSeenTime', Model.transformDate);
-User.prototype.online = function() { return this.lastSeenTime() > moment().subtract(5, 'minutes').toDate(); };
-User.prototype.readTime = Model.attribute('readTime', Model.transformDate);
-User.prototype.unreadNotificationsCount = Model.attribute('unreadNotificationsCount');
+  discussionsCount: Model.attribute('discussionsCount'),
+  commentsCount: Model.attribute('commentsCount'),
 
-User.prototype.discussionsCount = Model.attribute('discussionsCount');
-User.prototype.commentsCount = Model.attribute('commentsCount');
-;
-User.prototype.canEdit = Model.attribute('canEdit');
-User.prototype.canDelete = Model.attribute('canDelete');
+  canEdit: Model.attribute('canEdit'),
+  canDelete: Model.attribute('canDelete'),
 
-User.prototype.color = computed('username', 'avatarUrl', 'avatarColor', function(username, avatarUrl, avatarColor) {
-  if (avatarColor) {
-    return 'rgb('+avatarColor[0]+', '+avatarColor[1]+', '+avatarColor[2]+')';
-  } else if (avatarUrl) {
-    var image = new Image();
-    var user = this;
-    image.onload = function() {
-      var colorThief = new ColorThief();
-      user.avatarColor = colorThief.getColor(this);
-      user.freshness = new Date();
-      m.redraw();
-    };
-    image.src = avatarUrl;
-    return '';
-  } else {
-    return '#'+stringToColor(username);
+  avatarColor: null,
+  color: computed('username', 'avatarUrl', 'avatarColor', function(username, avatarUrl, avatarColor) {
+    // If we've already calculated and cached the dominant color of the user's
+    // avatar, then we can return that in RGB format. If we haven't, we'll want
+    // to calculate it. Unless the user doesn't have an avatar, in which case
+    // we generate a color from their username.
+    if (avatarColor) {
+      return 'rgb(' + avatarColor.join(', ') + ')';
+    } else if (avatarUrl) {
+      this.calculateAvatarColor();
+      return '';
+    }
+
+    return '#' + stringToColor(username);
+  })
+}) {
+  /**
+   * Check whether or not the user has been seen in the last 5 minutes.
+   *
+   * @return {Boolean}
+   * @public
+   */
+  isOnline() {
+    return this.lastSeenTime() > moment().subtract(5, 'minutes').toDate();
   }
-});
 
-User.prototype.badges = function() {
-  var items = new ItemList();
+  /**
+   * Get the Badge components that apply to this user.
+   *
+   * @return {ItemList}
+   */
+  badges() {
+    const items = new ItemList();
 
-  this.groups().forEach(group => {
-    if (group.id() != 3) {
-      items.add('group'+group.id(),
+    this.groups().forEach(group => {
+      items.add('group' + group.id(),
         Badge.component({
           label: group.nameSingular(),
           icon: group.icon(),
           style: {backgroundColor: group.color()}
         })
       );
-    }
-  });
+    });
 
-  return items;
+    return items;
+  }
+
+  /**
+   * Calculate the dominant color of the user's avatar. The dominant color will
+   * be set to the `avatarColor` property once it has been calculated.
+   *
+   * @protected
+   */
+  calculateAvatarColor() {
+    const image = new Image();
+    const user = this;
+
+    image.onload = function() {
+      const colorThief = new ColorThief();
+      user.avatarColor = colorThief.getColor(this);
+      user.freshness = new Date();
+      m.redraw();
+    };
+    image.src = this.avatarUrl();
+  }
 }
-
-export default User;