Mithril 2 Update (#27)

Update for Mithril 2

extensions/suspend/js/src/forum/components/SuspendUserModal.js

@@ -1,11 +1,13 @@
 import Modal from 'flarum/components/Modal';
 import Button from 'flarum/components/Button';
 
-export default class SuspendUserModal extends Modal {
+import withAttr from 'flarum/utils/withAttr';
-  init() {
-    super.init();
 
-    let until = this.props.user.suspendedUntil();
+export default class SuspendUserModal extends Modal {
+  oninit(vnode) {
+    super.oninit(vnode);
+
+    let until = this.attrs.user.suspendedUntil();
     let status = null;
 
     if (new Date() > until) until = null;
@@ -15,8 +17,8 @@ export default class SuspendUserModal extends Modal {
       else status = 'limited';
     }
 
-    this.status = m.prop(status);
+    this.status = m.stream(status);
-    this.daysRemaining = m.prop(status === 'limited' && -dayjs().diff(until, 'days') + 1);
+    this.daysRemaining = m.stream(status === 'limited' && -dayjs().diff(until, 'days') + 1);
   }
 
   className() {
@@ -24,7 +26,7 @@ export default class SuspendUserModal extends Modal {
   }
 
   title() {
-    return app.translator.trans('flarum-suspend.forum.suspend_user.title', {user: this.props.user});
+    return app.translator.trans('flarum-suspend.forum.suspend_user.title', {user: this.attrs.user});
   }
 
   content() {
@@ -35,21 +37,21 @@ export default class SuspendUserModal extends Modal {
             <label>{app.translator.trans('flarum-suspend.forum.suspend_user.status_heading')}</label>
             <div>
               <label className="checkbox">
-                <input type="radio" name="status" checked={!this.status()} value="" onclick={m.withAttr('value', this.status)}/>
+                <input type="radio" name="status" checked={!this.status()} value="" onclick={withAttr('value', this.status)}/>
                 {app.translator.trans('flarum-suspend.forum.suspend_user.not_suspended_label')}
               </label>
 
               <label className="checkbox">
-                <input type="radio" name="status" checked={this.status() === 'indefinitely'} value='indefinitely' onclick={m.withAttr('value', this.status)}/>
+                <input type="radio" name="status" checked={this.status() === 'indefinitely'} value='indefinitely' onclick={withAttr('value', this.status)}/>
                 {app.translator.trans('flarum-suspend.forum.suspend_user.indefinitely_label')}
               </label>
 
               <label className="checkbox SuspendUserModal-days">
                 <input type="radio" name="status" checked={this.status() === 'limited'} value='limited' onclick={e => {
                   this.status(e.target.value);
-                  m.redraw(true);
+                  m.redraw.sync();
                   this.$('.SuspendUserModal-days-input input').select();
-                  m.redraw.strategy('none');
+                  e.redraw = false;
                 }}/>
                 {app.translator.trans('flarum-suspend.forum.suspend_user.limited_time_label')}
                 {this.status() === 'limited' ? (
@@ -57,7 +59,7 @@ export default class SuspendUserModal extends Modal {
                     <input type="number"
                       min="0"
                       value={this.daysRemaining()}
-                      oninput={m.withAttr('value', this.daysRemaining)}
+                      oninput={withAttr('value', this.daysRemaining)}
                       className="FormControl"/>
                     {app.translator.trans('flarum-suspend.forum.suspend_user.limited_time_days_text')}
                   </div>
@@ -95,7 +97,7 @@ export default class SuspendUserModal extends Modal {
         // no default
     }
 
-    this.props.user.save({suspendedUntil}).then(
+    this.attrs.user.save({suspendedUntil}).then(
       () => this.hide(),
       this.loaded.bind(this)
     );

extensions/suspend/js/src/forum/components/UserSuspendedNotification.js

@@ -6,11 +6,11 @@ export default class UserSuspendedNotification extends Notification {
   }
 
   href() {
-    return app.route.user(this.props.notification.subject());
+    return app.route.user(this.attrs.notification.subject());
   }
 
   content() {
-    const notification = this.props.notification;
+    const notification = this.attrs.notification;
     const suspendedUntil = notification.content();
     const timeReadable = dayjs(suspendedUntil.date).from(notification.createdAt(), true);
 

extensions/suspend/js/src/forum/components/UserUnsuspendedNotification.js

@@ -6,11 +6,11 @@ export default class UserUnsuspendedNotification extends Notification {
   }
 
   href() {
-    return app.route.user(this.props.notification.subject());
+    return app.route.user(this.attrs.notification.subject());
   }
 
   content() {
-    const notification = this.props.notification;
+    const notification = this.attrs.notification;
 
     return app.translator.trans('flarum-suspend.forum.notifications.user_unsuspended_text', {
       user: notification.fromUser(),

extensions/suspend/js/src/forum/index.js

@@ -20,10 +20,9 @@ app.initializers.add('flarum-suspend', () => {
   extend(UserControls, 'moderationControls', (items, user) => {
     if (user.canSuspend()) {
       items.add('suspend', Button.component({
-        children: app.translator.trans('flarum-suspend.forum.user_controls.suspend_button'),
         icon: 'fas fa-ban',
         onclick: () => app.modal.show(SuspendUserModal, {user})
-      }));
+      }, app.translator.trans('flarum-suspend.forum.user_controls.suspend_button')));
     }
   });