Use 'userProfileLink' to generate user-profile link

This commit is contained in:
Maxim Filippov 2018-12-13 19:57:11 +03:00
parent 70c48a076d
commit e4a34cc4d4
14 changed files with 58 additions and 28 deletions

View file

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

View file

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

View file

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

View file

@ -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> <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> </span>
<div class="follow-text" v-if="notification.type === 'follow'"> <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> </div>
<template v-else> <template v-else>
<status v-if="notification.status" class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status> <status v-if="notification.status" class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>

View file

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

View file

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

View file

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

View file

@ -19,7 +19,8 @@
{{ $t('user_card.follows_you') }} {{ $t('user_card.follows_you') }}
</span> </span>
</div> </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}} @{{user.screen_name}}
</router-link> </router-link>
</div> </div>

View file

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

View file

@ -9,13 +9,13 @@
<i class="icon-link-ext usersettings"></i> <i class="icon-link-ext usersettings"></i>
</a> </a>
<div class='container'> <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"/> <StillImage class="avatar" :src="user.profile_image_url_original"/>
</router-link> </router-link>
<div class="name-and-screen-name"> <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-if="user.name_html" v-html="user.name_html"></div>
<div :title="user.name" class='user-name' v-else>{{user.name}}</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>@{{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> <span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
</router-link> </router-link>

View file

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

View file

@ -8,9 +8,9 @@
</div> </div>
<div class="panel-body who-to-follow"> <div class="panel-body who-to-follow">
<p> <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> <img v-bind:src="$store.state.instance.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a>
</p> </p>
</div> </div>

View file

@ -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 export default generateProfileLink

View file

@ -2,14 +2,14 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
describe('generateProfileLink', () => { describe('generateProfileLink', () => {
it('returns obj for local user', () => { 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', () => { 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 } }) })
}) })
}) })