Fix m.withAttr for input value, show search results, fix some old m.route code

TODO: Fix "SyntaxError: '> li:not(.Dropdown-header)' is not a valid selector" when hovering search results in navbar

js/src/common/utils/patchMithril.ts

@@ -2,7 +2,7 @@ import prop from 'mithril/stream';
 
 export default () => {
   m.withAttr = (key: string, cb: Function) => function () {
-    cb(this.getAttribute(key));
+    cb(this.getAttribute(key) || this[key]);
   };
 
   m.prop = prop;

js/src/forum/Forum.ts

@@ -16,6 +16,8 @@ export default class Forum extends Application {
         'user.posts': { path: '/u/:username', component: PostsUserPage },
         'user.discussions': { path: '/u/:username', component: PostsUserPage },
         'settings': { path: '/u/:username', component: PostsUserPage },
+
+        'discussion': { path: '/d/:id', IndexPage },
     };
 
     /**

js/src/forum/components/DiscussionsSearchSource.tsx

@@ -43,10 +43,10 @@ export default class DiscussionsSearchSource extends SearchSource {
 
         return (
           <li className="DiscussionSearchResult" data-index={'discussions' + discussion.id()}>
-            <a href={app.route.discussion(discussion, mostRelevantPost && mostRelevantPost.number())} config={m.route}>
+            <m.route.Link href={app.route.discussion(discussion, mostRelevantPost && mostRelevantPost.number())}>
               <div className="DiscussionSearchResult-title">{highlight(discussion.title(), query)}</div>
               {mostRelevantPost ? <div className="DiscussionSearchResult-excerpt">{highlight(mostRelevantPost.contentPlain(), query, 100)}</div> : ''}
-            </a>
+            </m.route.Link>
           </li>
         );
       })

js/src/forum/components/NotificationList.tsx

@@ -76,12 +76,11 @@ export default class NotificationList extends Component {
                 <div className="NotificationGroup">
                   {group.discussion
                     ? (
-                      <a className="NotificationGroup-header"
-                         href={app.route.discussion(group.discussion)}
-                         config={m.route}>
+                      <m.route.Link className="NotificationGroup-header"
+                         href={app.route.discussion(group.discussion)}>
                         {badges && badges.length ? <ul className="NotificationGroup-badges badges">{listItems(badges)}</ul> : ''}
                         {group.discussion.title()}
-                      </a>
+                      </m.route.Link>
                     ) : (
                       <div className="NotificationGroup-header">
                         {app.forum.attribute('title')}

js/src/forum/components/NotificationsDropdown.tsx

@@ -54,7 +54,7 @@ export default class NotificationsDropdown extends Dropdown {
   }
 
   goToRoute() {
-    m.route(app.route('notifications'));
+    m.route.set(app.route('notifications'));
   }
 
   getUnreadCount() {

js/src/forum/components/PostsUserPage.tsx

@@ -33,7 +33,13 @@ export default class PostsUserPage extends UserPage {
   oninit(vnode) {
     super.oninit(vnode);
 
-    this.loadUser(m.route.param('username'));
+    this.loadUser(vnode.attrs.username);
+  }
+
+  onupdate(vnode) {
+    super.onupdate(vnode);
+
+    this.loadUser(vnode.attrs.username);
   }
 
   content() {
@@ -69,7 +75,7 @@ export default class PostsUserPage extends UserPage {
           {this.posts.map(post => (
             <li>
               <div className="PostsUserPage-discussion">
-                {app.translator.trans('core.forum.user.in_discussion_text', {discussion: <a href={app.route.post(post)} oncreate={m.route}>{post.discussion().title()}</a>})}
+                {app.translator.trans('core.forum.user.in_discussion_text', {discussion: <m.route.Link href={app.route.post(post)}>{post.discussion().title()}</m.route.Link>})}
               </div>
               {CommentPost.component({post})}
             </li>

js/src/forum/components/Search.tsx

@@ -185,7 +185,7 @@ export default class Search extends Component {
     this.loadingSources = 0;
 
     if (this.value()) {
-      m.route(this.getItem(this.index).find('a').attr('href'));
+      m.route.set(this.getItem(this.index).find('a').attr('href'));
     } else {
       this.clear();
     }

js/src/forum/components/UserCard.tsx

@@ -48,10 +48,10 @@ export default class UserCard extends Component<UserCardProps> {
                 {this.props.editable
                   ? [AvatarEditor.component({user, className: 'UserCard-avatar'}), username(user)]
                   : (
-                    <a href={app.route.user(user)} oncreate={m.route}>
+                    <m.route.Link href={app.route.user(user)}>
                       <div className="UserCard-avatar">{avatar(user)}</div>
                       {username(user)}
-                    </a>
+                    </m.route.Link>
                   )}
               </h2>
 

js/src/forum/components/UserPage.tsx

@@ -22,6 +22,11 @@ export default abstract class UserPage extends Page {
   user: User;
   bodyClass: string = 'App--user';
 
+  /**
+   * The username of the currently loaded user
+   */
+  username: string;
+
   view() {
     return (
       <div className="UserPage">
@@ -54,7 +59,6 @@ export default abstract class UserPage extends Page {
    */
   abstract content();
 
-
   /**
    * Initialize the component with a user, and trigger the loading of their
    * activity feed.
@@ -74,6 +78,10 @@ export default abstract class UserPage extends Page {
   loadUser(username: string) {
     const lowercaseUsername = username.toLowerCase();
 
+    if (lowercaseUsername == this.username) return;
+
+    this.username = lowercaseUsername;
+
     app.store.all('users').some(user => {
       if (user.username().toLowerCase() === lowercaseUsername && user.joinTime()) {
         this.show(user);

js/src/forum/components/UsersSearchSource.tsx

@@ -37,14 +37,20 @@ export default class UsersSearchSource extends SearchSource {
       <li className="Dropdown-header">{app.translator.trans('core.forum.search.users_heading')}</li>,
       results.map(user => {
         const name = username(user);
+
+        if (!name.children) {
+          name.children = [name.text];
+          delete name.text;
+        }
+
         name.children[0] = highlight(name.children[0], query);
 
         return (
           <li className="UserSearchResult" data-index={'users' + user.id()}>
-            <a href={app.route.user(user)} oncreate={m.route}>
+            <m.route.Link href={app.route.user(user)}>
               {avatar(user)}
               {name}
-            </a>
+            </m.route.Link>
           </li>
         );
       })