Use 'userProfileLink' to generate user-profile link

src/components/chat_panel/chat_panel.js

@@ -13,7 +13,7 @@ const chatPanel = {
       return this.$store.state.chat.messages
     },
     userProfileLink (user) {
-      return generateProfileLink(user, user.name)
+      return generateProfileLink(user.id, user.screen_name)
     }
   },
   methods: {

src/components/chat_panel/chat_panel.vue

@@ -13,8 +13,10 @@
             <img :src="message.author.avatar" />
           </span>
           <div class="chat-content">
-            <router-link class="chat-name" :to="userProfileLink(message.author)">
+            <router-link
-              {{message.author.username}}
+              class="chat-name"
+              :to="userProfileLink(message.author)">
+                {{message.author.username}}
             </router-link>
             <br>
             <span class="chat-text">
@@ -67,9 +69,6 @@
   overflow-x: hidden;
 }
 
-.chat-name {
-}
-
 .chat-message {
   display: flex;
   padding: 0.2em 0.5em

src/components/notification/notification.js

@@ -2,6 +2,7 @@ import Status from '../status/status.vue'
 import StillImage from '../still-image/still-image.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const Notification = {
   data () {
@@ -28,6 +29,9 @@ const Notification = {
       const highlight = this.$store.state.config.highlight
       const user = this.notification.action.user
       return highlightStyle(highlight[user.screen_name])
+    },
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name)
     }
   }
 }

src/components/notification/notification.vue

@@ -28,7 +28,9 @@
         <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: { name: notification.action.user.screen_name } }">@{{notification.action.user.screen_name}}</router-link>
+        <router-link :to="userProfileLink(notification.action.user)">
+          @{{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/status/status.js

@@ -7,6 +7,7 @@ import UserCardContent from '../user_card_content/user_card_content.vue'
 import StillImage from '../still-image/still-image.vue'
 import { filter, find } from 'lodash'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const Status = {
   name: 'Status',
@@ -203,6 +204,9 @@ const Status = {
         return 'small'
       }
       return 'normal'
+    },
+    userProfileLink (id, name) {
+      return generateProfileLink(id, name)
     }
   },
   components: {

src/components/status/status.vue

@@ -2,7 +2,11 @@
   <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: { name: status.user.screen_name } }">{{status.user.screen_name}}</router-link></small>
+        <small>
+          <router-link :to="userProfileLink(status.user.id, 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 +38,12 @@
                 <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: { name: status.user.screen_name } }">{{status.user.screen_name}}</router-link>
+                  <router-link :to="userProfileLink(status.user.id, 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_screen_name } }">
+                    <router-link :to="userProfileLink(status.in_reply_to_user_id, status.in_reply_to_screen_name)">
                       {{status.in_reply_to_screen_name}}
                     </router-link>
                   </span>

src/components/user_card/user_card.js

@@ -1,4 +1,5 @@
 import UserCardContent from '../user_card_content/user_card_content.vue'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const UserCard = {
   props: [
@@ -26,6 +27,11 @@ const UserCard = {
       this.$store.state.api.backendInteractor.denyUser(this.user.id)
       this.$store.dispatch('removeFollowRequest', this.user)
     }
+  },
+  computed: {
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name)
+    }
   }
 }
 

src/components/user_card/user_card.vue

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

src/components/user_card_content/user_card_content.js

@@ -1,5 +1,6 @@
 import StillImage from '../still-image/still-image.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 export default {
   props: [ 'user', 'switcher', 'selected', 'hideBio', 'activatePanel' ],
@@ -40,6 +41,9 @@ export default {
       const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
       return Math.round(this.user.statuses_count / days)
     },
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name)
+    },
     userHighlightType: {
       get () {
         const data = this.$store.state.config.highlight[this.user.screen_name]

src/components/user_card_content/user_card_content.vue

@@ -9,13 +9,13 @@
         <i class="icon-link-ext usersettings"></i>
       </a>
       <div class='container'>
-        <router-link :to="{ name: 'user-profile', params: { name: user.screen_name } }">
+        <router-link :to="userProfileLink(user)">
           <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: { name: user.screen_name } }">
+          <router-link class='user-screen-name' :to="userProfileLink(user)">
             <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/who_to_follow_panel/who_to_follow_panel.js

@@ -1,4 +1,5 @@
 import apiService from '../../services/api/api.service.js'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 function showWhoToFollow (panel, reply) {
   var users = reply
@@ -91,6 +92,9 @@ const WhoToFollowPanel = {
     },
     suggestionsEnabled () {
       return this.$store.state.instance.suggestionsEnabled
+    },
+    userProfileLink (id, name) {
+      return generateProfileLink(id, name)
     }
   },
   watch: {

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: { name: name1 } }">{{ name1 }}</router-link><br>
+          <img v-bind:src="img1"/> <router-link :to="userProfileLink(id1, name1)">{{ name1 }}</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="img2"/> <router-link :to="userProfileLink(id2, name2)">{{ name2 }}</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="img3"/> <router-link :to="userProfileLink(id3, 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>

src/services/user_profile_link_generator/user_profile_link_generator.js

@@ -1,10 +1,10 @@
-const generateProfileLink = (user, name = '') => {
+const generateProfileLink = (id, screenName) => {
-  const baseLinkParams = { name: 'user-profile' }
+  return {
-  const { id } = user
+    name: 'user-profile',
-
+    params: (isExternal(screenName) ? { id } : { name: screenName })
-  return { ...baseLinkParams, params: (isExternal(user) ? { id } : { name }) }
+  }
 }
 
-const isExternal = ({screen_name}) => (screen_name.indexOf('@') > -1)
+const isExternal = screenName => (screenName.indexOf('@') > -1)
 
 export default generateProfileLink

test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js

@@ -2,14 +2,14 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
 
 describe('generateProfileLink', () => {
   it('returns obj for local user', () => {
-    const user = { screen_name: 'john' }
+    expect(generateProfileLink(1, 'jack')).to.eql({
-
+      name: 'user-profile', params: { name: 'jack' }
-    expect(generateProfileLink(user, 'jack')).to.eql({ name: 'user-profile', params: { name: 'jack' } })
+    })
   })
 
   it('returns obj for external user', () => {
-    const user = { screen_name: 'john@domain', id: 1 }
+    expect(generateProfileLink(1, 'john@domain')).to.eql({
-
+      name: 'user-profile', params: { id: 1 }
-    expect(generateProfileLink(user)).to.eql({ name: 'user-profile', params: { id: 1 } })
+    })
   })
 })