update: forum/components/AvatarEditor

js/src/forum/components/AvatarEditor.js

@@ -3,6 +3,7 @@ import avatar from '../../common/helpers/avatar';
 import icon from '../../common/helpers/icon';
 import listItems from '../../common/helpers/listItems';
 import ItemList from '../../common/utils/ItemList';
+import classList from '../../common/utils/classList';
 import Button from '../../common/components/Button';
 import LoadingIndicator from '../../common/components/LoadingIndicator';
 
@@ -16,7 +17,9 @@ import LoadingIndicator from '../../common/components/LoadingIndicator';
  * - `user`
  */
 export default class AvatarEditor extends Component {
-  init() {
+  oninit(vnode) {
+    super.oninit(vnode);
+
     /**
      * Whether or not an avatar upload is in progress.
      *
@@ -32,17 +35,11 @@ export default class AvatarEditor extends Component {
     this.isDraggedOver = false;
   }
 
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className = props.className || '';
-  }
-
   view() {
-    const user = this.props.user;
+    const user = this.attrs.user;
 
     return (
-      <div className={'AvatarEditor Dropdown ' + this.props.className + (this.loading ? ' loading' : '') + (this.isDraggedOver ? ' dragover' : '')}>
+      <div className={classList(['AvatarEditor', 'Dropdown', this.attrs.className, this.loading && 'loading', this.isDraggedOver && 'dragover'])}>
         {avatar(user)}
         <a
           className={user.avatarUrl() ? 'Dropdown-toggle' : 'Dropdown-toggle AvatarEditor--noAvatar'}
@@ -55,7 +52,7 @@ export default class AvatarEditor extends Component {
           ondragend={this.disableDragover.bind(this)}
           ondrop={this.dropUpload.bind(this)}
         >
-          {this.loading ? LoadingIndicator.component() : user.avatarUrl() ? icon('fas fa-pencil-alt') : icon('fas fa-plus-circle')}
+          {this.loading ? <LoadingIndicator /> : user.avatarUrl() ? icon('fas fa-pencil-alt') : icon('fas fa-plus-circle')}
         </a>
         <ul className="Dropdown-menu Menu">{listItems(this.controlItems().toArray())}</ul>
       </div>
@@ -72,20 +69,16 @@ export default class AvatarEditor extends Component {
 
     items.add(
       'upload',
-      Button.component({
+      <Button icon="fas fa-upload" onclick={this.openPicker.bind(this)}>
-        icon: 'fas fa-upload',
+        {app.translator.trans('core.forum.user.avatar_upload_button')}
-        children: app.translator.trans('core.forum.user.avatar_upload_button'),
+      </Button>
-        onclick: this.openPicker.bind(this),
-      })
     );
 
     items.add(
       'remove',
-      Button.component({
+      <Button icon="fas fa-times" onclick={this.remove.bind(this)}>
-        icon: 'fas fa-times',
+        {app.translator.trans('core.forum.user.avatar_remove_button')}
-        children: app.translator.trans('core.forum.user.avatar_remove_button'),
+      </Button>
-        onclick: this.remove.bind(this),
-      })
     );
 
     return items;
@@ -134,7 +127,7 @@ export default class AvatarEditor extends Component {
    * @param {Event} e
    */
   quickUpload(e) {
-    if (!this.props.user.avatarUrl()) {
+    if (!this.attrs.user.avatarUrl()) {
       e.preventDefault();
       e.stopPropagation();
       this.openPicker();
@@ -149,7 +142,6 @@ export default class AvatarEditor extends Component {
 
     // Create a hidden HTML input element and click on it so the user can select
     // an avatar file. Once they have, we will upload it via the API.
-    const user = this.props.user;
     const $input = $('<input type="file">');
 
     $input
@@ -169,7 +161,7 @@ export default class AvatarEditor extends Component {
   upload(file) {
     if (this.loading) return;
 
-    const user = this.props.user;
+    const user = this.attrs.user;
     const data = new FormData();
     data.append('avatar', file);
 
@@ -179,9 +171,9 @@ export default class AvatarEditor extends Component {
     app
       .request({
         method: 'POST',
-        url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/avatar',
+        url: `${app.forum.attribute('apiUrl')}/users/${user.id()}/avatar`,
         serialize: (raw) => raw,
-        data,
+        body: data,
       })
       .then(this.success.bind(this), this.failure.bind(this));
   }
@@ -190,7 +182,7 @@ export default class AvatarEditor extends Component {
    * Remove the user's avatar.
    */
   remove() {
-    const user = this.props.user;
+    const user = this.attrs.user;
 
     this.loading = true;
     m.redraw();
@@ -198,7 +190,7 @@ export default class AvatarEditor extends Component {
     app
       .request({
         method: 'DELETE',
-        url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/avatar',
+        url: `${app.forum.attribute('apiUrl')}/users/${user.id()}/avatar`,
       })
       .then(this.success.bind(this), this.failure.bind(this));
   }
@@ -212,7 +204,7 @@ export default class AvatarEditor extends Component {
    */
   success(response) {
     app.store.pushPayload(response);
-    delete this.props.user.avatarColor;
+    delete this.attrs.user.avatarColor;
 
     this.loading = false;
     m.redraw();