Mithril 2 Update (#29)

Update for Mithril 2

extensions/flags/js/src/forum/addFlagsToPosts.js

@@ -7,14 +7,14 @@ import PostControls from 'flarum/utils/PostControls';
 import humanTime from 'flarum/utils/humanTime';
 
 export default function() {
-  extend(Post.prototype, 'attrs', function(attrs) {
-    if (this.props.post.flags().length) {
+  extend(Post.prototype, 'elementAttrs', function(attrs) {
+    if (this.attrs.post.flags().length) {
       attrs.className += ' Post--flagged';
     }
   });
 
-  Post.prototype.dismissFlag = function(data) {
-    const post = this.props.post;
+  Post.prototype.dismissFlag = function(body) {
+    const post = this.attrs.post;
 
     delete post.data.relationships.flags;
 
@@ -33,7 +33,7 @@ export default function() {
             if (next) {
               const nextPost = next.post();
               app.flags.index = nextPost;
-              m.route(app.route.post(nextPost));
+              m.route.set(app.route.post(nextPost));
             }
           }
 
@@ -45,21 +45,21 @@ export default function() {
     return app.request({
       url: app.forum.attribute('apiUrl') + post.apiEndpoint() + '/flags',
       method: 'DELETE',
-      data
+      body
     });
   };
 
   Post.prototype.flagActionItems = function() {
     const items = new ItemList();
 
-    const controls = PostControls.destructiveControls(this.props.post);
+    const controls = PostControls.destructiveControls(this.attrs.post);
 
     Object.keys(controls.items).forEach(k => {
-      const props = controls.get(k).props;
+      const attrs = controls.get(k).attrs;
 
-      props.className = 'Button';
+      attrs.className = 'Button';
 
-      extend(props, 'onclick', () => this.dismissFlag());
+      extend(attrs, 'onclick', () => this.dismissFlag());
     });
 
     items.add('controls', (
@@ -78,7 +78,7 @@ export default function() {
   };
 
   extend(Post.prototype, 'content', function(vdom) {
-    const post = this.props.post;
+    const post = this.attrs.post;
     const flags = post.flags();
 
     if (!flags.length) return;

extensions/flags/js/src/forum/components/FlagList.js

@@ -6,8 +6,9 @@ import icon from 'flarum/helpers/icon';
 import humanTime from 'flarum/helpers/humanTime';
 
 export default class FlagList extends Component {
-  init() {
-    this.state = this.props.state;
+  oninit(vnode) {
+    super.oninit(vnode);
+    this.state = this.attrs.state;
   }
 
   view() {
@@ -26,10 +27,9 @@ export default class FlagList extends Component {
 
                 return (
                   <li>
-                    <a href={app.route.post(post)} className="Notification Flag" config={function(element, isInitialized) {
-                      m.route.apply(this, arguments);
-
-                      if (!isInitialized) $(element).on('click', () => app.flags.index = post);
+                    <a route={app.route.post(post)} className="Notification Flag" onclick={e => {
+                      app.flags.index = post;
+                      e.redraw = false;
                     }}>
                       {avatar(post.user())}
                       {icon('fas fa-flag', {className: 'Notification-icon'})}

extensions/flags/js/src/forum/components/FlagPostModal.js

@@ -1,14 +1,16 @@
 import Modal from 'flarum/components/Modal';
 import Button from 'flarum/components/Button';
 
+import withAttr from 'flarum/utils/withAttr';
+
 export default class FlagPostModal extends Modal {
-  init() {
-    super.init();
+  oninit(vnode) {
+    super.oninit(vnode);
 
     this.success = false;
 
-    this.reason = m.prop('');
-    this.reasonDetail = m.prop('');
+    this.reason = m.stream('');
+    this.reasonDetail = m.stream('');
   }
 
   className() {
@@ -43,39 +45,39 @@ export default class FlagPostModal extends Modal {
           <div className="Form-group">
             <div>
               <label className="checkbox">
-                <input type="radio" name="reason" checked={this.reason() === 'off_topic'} value="off_topic" onclick={m.withAttr('value', this.reason)}/>
+                <input type="radio" name="reason" checked={this.reason() === 'off_topic'} value="off_topic" onclick={withAttr('value', this.reason)}/>
                 <strong>{app.translator.trans('flarum-flags.forum.flag_post.reason_off_topic_label')}</strong>
                 {app.translator.trans('flarum-flags.forum.flag_post.reason_off_topic_text')}
                 {this.reason() === 'off_topic' ? (
-                  <textarea className="FormControl" placeholder={app.translator.trans('flarum-flags.forum.flag_post.reason_details_placeholder')} value={this.reasonDetail()} oninput={m.withAttr('value', this.reasonDetail)}></textarea>
+                  <textarea className="FormControl" placeholder={app.translator.trans('flarum-flags.forum.flag_post.reason_details_placeholder')} value={this.reasonDetail()} oninput={withAttr('value', this.reasonDetail)}></textarea>
                 ) : ''}
               </label>
 
               <label className="checkbox">
-                <input type="radio" name="reason" checked={this.reason() === 'inappropriate'} value="inappropriate" onclick={m.withAttr('value', this.reason)}/>
+                <input type="radio" name="reason" checked={this.reason() === 'inappropriate'} value="inappropriate" onclick={withAttr('value', this.reason)}/>
                 <strong>{app.translator.trans('flarum-flags.forum.flag_post.reason_inappropriate_label')}</strong>
                 {app.translator.trans('flarum-flags.forum.flag_post.reason_inappropriate_text', {
                   a: guidelinesUrl ? <a href={guidelinesUrl} target="_blank"/> : undefined
                 })}
                 {this.reason() === 'inappropriate' ? (
-                  <textarea className="FormControl" placeholder={app.translator.trans('flarum-flags.forum.flag_post.reason_details_placeholder')} value={this.reasonDetail()} oninput={m.withAttr('value', this.reasonDetail)}></textarea>
+                  <textarea className="FormControl" placeholder={app.translator.trans('flarum-flags.forum.flag_post.reason_details_placeholder')} value={this.reasonDetail()} oninput={withAttr('value', this.reasonDetail)}></textarea>
                 ) : ''}
               </label>
 
               <label className="checkbox">
-                <input type="radio" name="reason" checked={this.reason() === 'spam'} value="spam" onclick={m.withAttr('value', this.reason)}/>
+                <input type="radio" name="reason" checked={this.reason() === 'spam'} value="spam" onclick={withAttr('value', this.reason)}/>
                 <strong>{app.translator.trans('flarum-flags.forum.flag_post.reason_spam_label')}</strong>
                 {app.translator.trans('flarum-flags.forum.flag_post.reason_spam_text')}
                 {this.reason() === 'spam' ? (
-                  <textarea className="FormControl" placeholder={app.translator.trans('flarum-flags.forum.flag_post.reason_details_placeholder')} value={this.reasonDetail()} oninput={m.withAttr('value', this.reasonDetail)}></textarea>
+                  <textarea className="FormControl" placeholder={app.translator.trans('flarum-flags.forum.flag_post.reason_details_placeholder')} value={this.reasonDetail()} oninput={withAttr('value', this.reasonDetail)}></textarea>
                 ) : ''}
               </label>
 
               <label className="checkbox">
-                <input type="radio" name="reason" checked={this.reason() === 'other'} value="other" onclick={m.withAttr('value', this.reason)}/>
+                <input type="radio" name="reason" checked={this.reason() === 'other'} value="other" onclick={withAttr('value', this.reason)}/>
                 <strong>{app.translator.trans('flarum-flags.forum.flag_post.reason_other_label')}</strong>
                 {this.reason() === 'other' ? (
-                  <textarea className="FormControl" value={this.reasonDetail()} oninput={m.withAttr('value', this.reasonDetail)}></textarea>
+                  <textarea className="FormControl" value={this.reasonDetail()} oninput={withAttr('value', this.reasonDetail)}></textarea>
                 ) : ''}
               </label>
             </div>
@@ -105,7 +107,7 @@ export default class FlagPostModal extends Modal {
       reasonDetail: this.reasonDetail(),
       relationships: {
         user: app.session.user,
-        post: this.props.post
+        post: this.attrs.post
       }
     }, {errorHandler: this.onerror.bind(this)})
       .then(() => this.success = true)

extensions/flags/js/src/forum/components/FlagsDropdown.js

@@ -3,23 +3,23 @@ import NotificationsDropdown from 'flarum/components/NotificationsDropdown';
 import FlagList from './FlagList';
 
 export default class FlagsDropdown extends NotificationsDropdown {
-  static initProps(props) {
-    props.label = props.label || app.translator.trans('flarum-flags.forum.flagged_posts.tooltip');
-    props.icon = props.icon || 'fas fa-flag';
+  static initAttrs(attrs) {
+    attrs.label = attrs.label || app.translator.trans('flarum-flags.forum.flagged_posts.tooltip');
+    attrs.icon = attrs.icon || 'fas fa-flag';
 
-    super.initProps(props);
+    super.initAttrs(attrs);
   }
 
   getMenu() {
     return (
-      <div className={'Dropdown-menu ' + this.props.menuClassName} onclick={this.menuClick.bind(this)}>
-        {this.showing ? FlagList.component({ state: this.props.state }) : ''}
+      <div className={'Dropdown-menu ' + this.attrs.menuClassName} onclick={this.menuClick.bind(this)}>
+        {this.showing ? FlagList.component({ state: this.attrs.state }) : ''}
       </div>
     );
   }
 
   goToRoute() {
-    m.route(app.route('flags'));
+    m.route.set(app.route('flags'));
   }
 
   getUnreadCount() {

extensions/flags/js/src/forum/components/FlagsPage.js

@@ -7,8 +7,8 @@ import FlagList from './FlagList';
  * used on mobile devices where the flags dropdown is within the drawer.
  */
 export default class FlagsPage extends Page {
-  init() {
-    super.init();
+  oninit(vnode) {
+    super.oninit(vnode);
 
     app.history.push('flags');
 

extensions/flags/js/src/forum/index.js

@@ -14,7 +14,7 @@ app.initializers.add('flarum-flags', () => {
 
   app.store.models.flags = Flag;
 
-  app.routes.flags = { path: '/flags', component: <FlagsPage /> };
+  app.routes.flags = { path: '/flags', component: FlagsPage };
 
   app.flags = new FlagListState(app);