Move old routes to /p, use /nickname for user profiles

package.json

@@ -35,6 +35,7 @@
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.26",
     "autoprefixer": "^6.4.0",
     "babel-core": "^6.0.0",
     "babel-eslint": "^7.0.0",

src/boot/routes.js

@@ -1,17 +1,17 @@
-import PublicTimeline from '../components/public_timeline/public_timeline.vue'
+import PublicTimeline from 'components/public_timeline/public_timeline.vue'
-import PublicAndExternalTimeline from '../components/public_and_external_timeline/public_and_external_timeline.vue'
+import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
-import FriendsTimeline from '../components/friends_timeline/friends_timeline.vue'
+import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
-import TagTimeline from '../components/tag_timeline/tag_timeline.vue'
+import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
-import ConversationPage from '../components/conversation-page/conversation-page.vue'
+import ConversationPage from 'components/conversation-page/conversation-page.vue'
-import Mentions from '../components/mentions/mentions.vue'
+import Mentions from 'components/mentions/mentions.vue'
-import DMs from '../components/dm_timeline/dm_timeline.vue'
+import DMs from 'components/dm_timeline/dm_timeline.vue'
-import UserProfile from '../components/user_profile/user_profile.vue'
+import UserProfile from 'components/user_profile/user_profile.vue'
-import Settings from '../components/settings/settings.vue'
+import Settings from 'components/settings/settings.vue'
-import Registration from '../components/registration/registration.vue'
+import Registration from 'components/registration/registration.vue'
-import UserSettings from '../components/user_settings/user_settings.vue'
+import UserSettings from 'components/user_settings/user_settings.vue'
-import FollowRequests from '../components/follow_requests/follow_requests.vue'
+import FollowRequests from 'components/follow_requests/follow_requests.vue'
-import OAuthCallback from '../components/oauth_callback/oauth_callback.vue'
+import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
-import UserSearch from '../components/user_search/user_search.vue'
+import UserSearch from 'components/user_search/user_search.vue'
 
 export default (store) => {
   return [
@@ -20,23 +20,23 @@ export default (store) => {
       redirect: _to => {
         return (store.state.users.currentUser
                 ? store.state.instance.redirectRootLogin
-                : store.state.instance.redirectRootNoLogin) || '/main/all'
+                : store.state.instance.redirectRootNoLogin) || '/p/main/all'
       }
     },
-    { path: '/main/all', component: PublicAndExternalTimeline },
+    { name: 'public-external-timeline', path: '/p/main/all', component: PublicAndExternalTimeline },
-    { path: '/main/public', component: PublicTimeline },
+    { name: 'public-timeline', path: '/p/main/public', component: PublicTimeline },
-    { path: '/main/friends', component: FriendsTimeline },
+    { name: 'friends', path: '/p/main/friends', component: FriendsTimeline },
-    { path: '/tag/:tag', component: TagTimeline },
+    { name: 'tag-timeline', path: '/p/tag/:tag', component: TagTimeline },
-    { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
+    { name: 'conversation', path: '/p/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
-    { name: 'user-profile', path: '/users/:id', component: UserProfile },
+    { name: 'user-profile', path: '/:name', component: UserProfile },
     { name: 'mentions', path: '/:username/mentions', component: Mentions },
     { name: 'dms', path: '/:username/dms', component: DMs },
-    { name: 'settings', path: '/settings', component: Settings },
+    { name: 'settings', path: '/p/settings', component: Settings },
-    { name: 'registration', path: '/registration', component: Registration },
+    { name: 'registration', path: '/p/registration', component: Registration },
-    { name: 'registration', path: '/registration/:token', component: Registration },
+    { name: 'registration', path: '/p/registration/:token', component: Registration },
-    { name: 'friend-requests', path: '/friend-requests', component: FollowRequests },
+    { name: 'friend-requests', path: '/p/friend-requests', component: FollowRequests },
-    { name: 'user-settings', path: '/user-settings', component: UserSettings },
+    { name: 'user-settings', path: '/p/user-settings', component: UserSettings },
-    { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
+    { name: 'oauth-callback', path: '/p/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
-    { name: 'user-search', path: '/user-search', component: UserSearch, props: (route) => ({ query: route.query.query }) }
+    { name: 'user-search', path: '/p/user-search', component: UserSearch, props: (route) => ({ query: route.query.query }) }
   ]
 }

src/components/chat_panel/chat_panel.vue

@@ -13,7 +13,7 @@
             <img :src="message.author.avatar" />
           </span>
           <div class="chat-content">
-            <router-link class="chat-name" :to="{ name: 'user-profile', params: { id: message.author.id } }">
+            <router-link class="chat-name" :to="{ name: 'user-profile', params: { name: message.author.username } }">
               {{message.author.username}}
             </router-link>
             <br>

src/components/nav_panel/nav_panel.vue

@@ -3,7 +3,7 @@
     <div class="panel panel-default">
       <ul>
         <li v-if='currentUser'>
-          <router-link @click.native="activatePanel('timeline')" to='/main/friends'>
+          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'friends' }">
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
@@ -18,17 +18,17 @@
           </router-link>
         </li>
         <li v-if='currentUser && currentUser.locked'>
-          <router-link @click.native="activatePanel('timeline')" to='/friend-requests'>
+          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'friend-requests' }">
             {{ $t("nav.friend_requests") }}
           </router-link>
         </li>
         <li>
-          <router-link @click.native="activatePanel('timeline')" to='/main/public'>
+          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'public-timeline' }">
             {{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li>
-          <router-link @click.native="activatePanel('timeline')" to='/main/all'>
+          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'public-external-timeline' }">
             {{ $t("nav.twkn") }}
           </router-link>
         </li>

src/components/notification/notification.vue

@@ -28,7 +28,7 @@
         <small class="timeago"><router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
       </span>
       <div class="follow-text" v-if="notification.type === 'follow'">
-        <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
+        <router-link :to="{ name: 'user-profile', params: { name: notification.action.user.screen_name } }">@{{notification.action.user.screen_name}}</router-link>
       </div>
       <template v-else>
         <status v-if="notification.status"  class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>

src/components/post_status_form/post_status_form.vue

@@ -7,7 +7,7 @@
         path="post_status.account_not_locked_warning"
         tag="p"
         class="visibility-notice">
-        <router-link to="/user-settings">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
+        <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
       </i18n>
       <p v-if="this.newStatus.visibility == 'direct'" class="visibility-notice">{{ $t('post_status.direct_warning') }}</p>
       <input

src/components/status/status.vue

@@ -2,7 +2,7 @@
   <div class="status-el" v-if="!hideReply && !deleted" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
     <template v-if="muted && !noReplyLinks">
       <div class="media status container muted">
-        <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
+        <small><router-link :to="{ name: 'user-profile', params: { name: status.user.screen_name } }">{{status.user.screen_name}}</router-link></small>
         <small class="muteWords">{{muteWordHits.join(', ')}}</small>
         <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
       </div>
@@ -34,10 +34,10 @@
                 <h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4>
                 <h4 class="user-name" v-else>{{status.user.name}}</h4>
                 <span class="links">
-                  <router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link>
+                  <router-link :to="{ name: 'user-profile', params: { name: status.user.screen_name } }">{{status.user.screen_name}}</router-link>
                   <span v-if="status.in_reply_to_screen_name" class="faint reply-info">
                     <i class="icon-right-open"></i>
-                    <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
+                    <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_screen_name } }">
                       {{status.in_reply_to_screen_name}}
                     </router-link>
                   </span>

src/components/user_card/user_card.vue

@@ -19,7 +19,7 @@
           {{ $t('user_card.follows_you') }}
         </span>
       </div>
-      <router-link class='user-screen-name' :to="{ name: 'user-profile', params: { id: user.id } }">
+      <router-link class='user-screen-name' :to="{ name: 'user-profile', params: { name: user.screen_name } }">
         @{{user.screen_name}}
       </router-link>
     </div>

src/components/user_card_content/user_card_content.vue

@@ -2,20 +2,20 @@
 <div id="heading" class="profile-panel-background" :style="headingStyle">
   <div class="panel-heading text-center">
     <div class='user-info'>
-      <router-link @click.native="activatePanel('timeline')" to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
+      <router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-settings' }" style="float: right; margin-top:16px;" v-if="!isOtherUser">
         <i class="icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
       </router-link>
       <a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
         <i class="icon-link-ext usersettings"></i>
       </a>
       <div class='container'>
-        <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
+        <router-link :to="{ name: 'user-profile', params: { name: user.screen_name } }">
           <StillImage class="avatar" :src="user.profile_image_url_original"/>
         </router-link>
         <div class="name-and-screen-name">
           <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
           <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
-          <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
+          <router-link class='user-screen-name' :to="{ name: 'user-profile', params: { name: user.screen_name } }">
             <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
             <span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
           </router-link>

src/components/user_profile/user_profile.js

@@ -15,18 +15,23 @@ const UserProfile = {
   computed: {
     timeline () { return this.$store.state.statuses.timelines.user },
     userId () {
-      return this.$route.params.id
+      return this.user.id
+    },
+    userName () {
+      return this.$route.params.name
     },
     user () {
       if (this.timeline.statuses[0]) {
         return this.timeline.statuses[0].user
       } else {
-        return this.$store.state.users.usersObject[this.userId] || false
+        return Object.values(this.$store.state.users.usersObject).filter(user => {
+          return user.name === this.userName
+        })[0] || false
       }
     }
   },
   watch: {
-    userId () {
+    userName () {
       this.$store.dispatch('stopFetching', 'user')
       this.$store.commit('clearTimeline', { timeline: 'user' })
       this.$store.dispatch('startFetching', ['user', this.userId])

src/components/who_to_follow_panel/who_to_follow_panel.vue

@@ -8,9 +8,9 @@
       </div>
       <div class="panel-body who-to-follow">
         <p>
-          <img v-bind:src="img1"/> <router-link :to="{ name: 'user-profile', params: { id: id1 } }">{{ name1 }}</router-link><br>
+          <img v-bind:src="img1"/> <router-link :to="{ name: 'user-profile', params: { name: name1 } }">{{ name1 }}</router-link><br>
-          <img v-bind:src="img2"/> <router-link :to="{ name: 'user-profile', params: { id: id2 } }">{{ name2 }}</router-link><br>
+          <img v-bind:src="img2"/> <router-link :to="{ name: 'user-profile', params: { name: name2 } }">{{ name2 }}</router-link><br>
-          <img v-bind:src="img3"/> <router-link :to="{ name: 'user-profile', params: { id: id3 } }">{{ name3 }}</router-link><br>
+          <img v-bind:src="img3"/> <router-link :to="{ name: 'user-profile', params: { name: name3 } }">{{ name3 }}</router-link><br>
           <img v-bind:src="$store.state.instance.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a>
         </p>
       </div>

test/unit/specs/boot/routes.spec.js

@@ -0,0 +1,29 @@
+import routes from 'src/boot/routes'
+import { createLocalVue } from '@vue/test-utils'
+import VueRouter from 'vue-router'
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+
+describe('routes', () => {
+  const router = new VueRouter({
+    mode: 'abstract',
+    routes: routes({})
+  })
+
+  it('root path', () => {
+    router.push('/p/main/all')
+
+    const mathcedComponents = router.getMatchedComponents()
+
+    expect(mathcedComponents[0].components.hasOwnProperty('Timeline'))
+  })
+
+  it('user\'s profile', () => {
+    router.push('/fake-user-name')
+
+    const mathcedComponents = router.getMatchedComponents()
+
+    expect(mathcedComponents[0].components.hasOwnProperty('UserProfile'))
+  })
+})

yarn.lock

@@ -2,6 +2,14 @@
 # yarn lockfile v1
 
 
+"@vue/test-utils@^1.0.0-beta.26":
+  version "1.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.26.tgz#1ae7e1dc2bef4f49f9dbfdfecad342d17d6c5c88"
+  integrity sha512-2bvTgdh4Rh9NqeIrH+rah6AjXUHYxFqLO+NoOMqWXYqSvk1PGgvI5o5sT6Pty4HklIReOZxWxsMpgnJFK9rW+A==
+  dependencies:
+    dom-event-types "^1.0.0"
+    lodash "^4.17.4"
+
 abbrev@1, abbrev@1.0.x:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
@@ -1770,6 +1778,11 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-event-types@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dom-event-types/-/dom-event-types-1.0.0.tgz#5830a0a29e1bf837fe50a70cd80a597232813cae"
+  integrity sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==
+
 dom-serialize@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"