Mithril 2 Update (#32)

Update for Mithril 2

extensions/subscriptions/js/src/forum/addSubscriptionControls.js

@@ -17,10 +17,9 @@ export default function addSubscriptionControls() {
       const subscription = discussion.subscription() || 'none';
 
       items.add('subscription', Button.component({
-        children: states[subscription].label,
         icon: states[subscription].icon,
         onclick: discussion.save.bind(discussion, {subscription: states[subscription].save})
-      }));
+      }, states[subscription].label));
     }
   });
 

extensions/subscriptions/js/src/forum/addSubscriptionFilter.js

@@ -8,24 +8,21 @@ export default function addSubscriptionFilter() {
     if (app.session.user) {
       const params = app.search.stickyParams();
 
-      params.filter = 'following';
-
       items.add('following', LinkButton.component({
-        href: app.route('index.filter', params),
+        href: app.route('following', params),
-        children: app.translator.trans('flarum-subscriptions.forum.index.following_link'),
         icon: 'fas fa-star'
-      }), 50);
+      }, app.translator.trans('flarum-subscriptions.forum.index.following_link')), 50);
     }
   });
 
-  extend(IndexPage.prototype, 'config', function () {
+  extend(IndexPage.prototype, 'setTitle', function () {
-    if (m.route() == "/following") {
+    if (app.current.get('routeName') === 'following') {
       app.setTitle(app.translator.trans('flarum-subscriptions.forum.following.meta_title_text'));
     }
   });
 
   extend(DiscussionListState.prototype, 'requestParams', function(params) {
-    if (this.params.filter === 'following') {
+    if (app.current.get('routeName') === 'following') {
       params.filter.q = (params.filter.q || '') + ' is:following';
     }
   });

extensions/subscriptions/js/src/forum/addSubscriptionSettings.js

@@ -2,14 +2,21 @@ import { extend } from 'flarum/extend';
 import SettingsPage from 'flarum/components/SettingsPage';
 import Switch from 'flarum/components/Switch';
 
-export default function() {
+export default function () {
-  extend(SettingsPage.prototype, 'notificationsItems', function(items) {
+  extend(SettingsPage.prototype, 'notificationsItems', function (items) {
     items.add('followAfterReply',
       Switch.component({
-        children: app.translator.trans('flarum-subscriptions.forum.settings.follow_after_reply_label'),
         state: this.user.preferences().followAfterReply,
-        onchange: this.preferenceSaver('followAfterReply')
+        onchange: (value) => {
-      })
+          this.followAfterReplyLoading = true;
+
+          this.user.savePreferences({ followAfterReply: value }).then(() => {
+            this.followAfterReplyLoading = false;
+            m.redraw();
+          });
+        },
+        loading: this.followAfterReplyLoading
+      }, app.translator.trans('flarum-subscriptions.forum.settings.follow_after_reply_label'))
     );
   });
 }

extensions/subscriptions/js/src/forum/components/NewPostNotification.js

@@ -7,7 +7,7 @@ export default class NewPostNotification extends Notification {
   }
 
   href() {
-    const notification = this.props.notification;
+    const notification = this.attrs.notification;
     const discussion = notification.subject();
     const content = notification.content() || {};
 
@@ -15,6 +15,6 @@ export default class NewPostNotification extends Notification {
   }
 
   content() {
-    return app.translator.trans('flarum-subscriptions.forum.notifications.new_post_text', {user: this.props.notification.fromUser()});
+    return app.translator.trans('flarum-subscriptions.forum.notifications.new_post_text', {user: this.attrs.notification.fromUser()});
   }
 }

extensions/subscriptions/js/src/forum/components/SubscriptionMenu.js

@@ -6,7 +6,9 @@ import extractText from 'flarum/utils/extractText';
 import SubscriptionMenuItem from './SubscriptionMenuItem';
 
 export default class SubscriptionMenu extends Dropdown {
-  init() {
+  oninit(vnode) {
+    super.oninit(vnode);
+
     this.options = [
       {
         subscription: false,
@@ -30,7 +32,7 @@ export default class SubscriptionMenu extends Dropdown {
   }
 
   view() {
-    const discussion = this.props.discussion;
+    const discussion = this.attrs.discussion;
     const subscription = discussion.subscription();
 
     let buttonLabel = app.translator.trans('flarum-subscriptions.forum.sub_controls.follow_button');
@@ -59,17 +61,16 @@ export default class SubscriptionMenu extends Dropdown {
       ? 'flarum-subscriptions.forum.sub_controls.notify_email_tooltip'
       : 'flarum-subscriptions.forum.sub_controls.notify_alert_tooltip'));
 
-    const buttonProps = {
+    const buttonAttrs = {
       className: 'Button SubscriptionMenu-button ' + buttonClass,
       icon: buttonIcon,
-      children: buttonLabel,
       onclick: this.saveSubscription.bind(this, discussion, ['follow', 'ignore'].indexOf(subscription) !== -1 ? false : 'follow'),
       title: title
     };
 
     if ((notifyEmail || notifyAlert) && subscription === false) {
-      buttonProps.config = element => {
+      buttonAttrs.oncreate = buttonAttrs.onupdate = vnode => {
-        $(element).tooltip({
+        $(vnode.dom).tooltip({
           container: '.SubscriptionMenu',
           placement: 'bottom',
           delay: 250,
@@ -77,24 +78,24 @@ export default class SubscriptionMenu extends Dropdown {
         });
       }
     } else {
-      buttonProps.config = element => $(element).tooltip('destroy');
+      buttonAttrs.onupdate = vnode => $(vnode.dom).tooltip('destroy');
     }
 
     return (
       <div className="Dropdown ButtonGroup SubscriptionMenu">
-        {Button.component(buttonProps)}
+        {Button.component(buttonAttrs, buttonLabel)}
 
         <button className={'Dropdown-toggle Button Button--icon ' + buttonClass} data-toggle="dropdown">
           {icon('fas fa-caret-down', {className: 'Button-icon'})}
         </button>
 
         <ul className="Dropdown-menu dropdown-menu Dropdown-menu--right">
-          {this.options.map(props => {
+          {this.options.map(attrs => <li>{SubscriptionMenuItem.component({
-            props.onclick = this.saveSubscription.bind(this, discussion, props.subscription);
+              ...attrs,
-            props.active = subscription === props.subscription;
+              onclick: this.saveSubscription.bind(this, discussion, attrs.subscription),
-
+              active: subscription === attrs.subscription
-            return <li>{SubscriptionMenuItem.component(props)}</li>;
+            })}</li>
-          })}
+          )}
         </ul>
       </div>
     );

extensions/subscriptions/js/src/forum/components/SubscriptionMenuItem.js

@@ -4,12 +4,12 @@ import icon from 'flarum/helpers/icon';
 export default class SubscriptionMenuItem extends Component {
   view() {
     return (
-      <button className="SubscriptionMenuItem hasIcon" onclick={this.props.onclick}>
+      <button className="SubscriptionMenuItem hasIcon" onclick={this.attrs.onclick}>
-        {this.props.active ? icon('fas fa-check', {className: 'Button-icon'}) : ''}
+        {this.attrs.active ? icon('fas fa-check', {className: 'Button-icon'}) : ''}
         <span className="SubscriptionMenuItem-label">
-          {icon(this.props.icon, {className: 'Button-icon'})}
+          {icon(this.attrs.icon, {className: 'Button-icon'})}
-          <strong>{this.props.label}</strong>
+          <strong>{this.attrs.label}</strong>
-          <span className="SubscriptionMenuItem-description">{this.props.description}</span>
+          <span className="SubscriptionMenuItem-description">{this.attrs.description}</span>
         </span>
       </button>
     );

extensions/subscriptions/js/src/forum/index.js

@@ -2,6 +2,7 @@ import { extend } from 'flarum/extend';
 import app from 'flarum/app';
 import Model from 'flarum/Model';
 import Discussion from 'flarum/models/Discussion';
+import IndexPage from 'flarum/components/IndexPage';
 import NotificationGrid from 'flarum/components/NotificationGrid';
 
 import addSubscriptionBadge from './addSubscriptionBadge';
@@ -11,7 +12,8 @@ import addSubscriptionSettings from './addSubscriptionSettings';
 
 import NewPostNotification from './components/NewPostNotification';
 
-app.initializers.add('subscriptions', function() {
+app.initializers.add('subscriptions', function () {
+  app.routes.following = { path: '/following', component: IndexPage };
   app.notificationComponents.newPost = NewPostNotification;
 
   Discussion.prototype.subscription = Model.attribute('subscription');