akkoma-fe/src/components/user_profile/user_profile.js

213 lines
6.3 KiB
JavaScript
Raw Normal View History

2019-02-26 17:26:04 +00:00
import get from 'lodash/get'
2019-03-05 19:01:49 +00:00
import UserCard from '../user_card/user_card.vue'
2019-02-26 03:51:04 +00:00
import FollowCard from '../follow_card/follow_card.vue'
2017-06-12 14:20:02 +00:00
import Timeline from '../timeline/timeline.vue'
import Conversation from '../conversation/conversation.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import RichContent from 'src/components/rich_content/rich_content.jsx'
2019-04-04 02:28:08 +00:00
import List from '../list/list.vue'
2019-02-25 09:51:23 +00:00
import withLoadMore from '../../hocs/with_load_more/with_load_more'
2022-06-22 16:42:27 +00:00
import { debounce } from 'lodash'
2020-10-20 21:01:28 +00:00
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faCircleNotch
} from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch
)
2019-02-25 09:51:23 +00:00
2019-04-04 02:28:08 +00:00
const FollowerList = withLoadMore({
fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
select: (props, $store) => get($store.getters.findUser(props.userId), 'followerIds', []).map(id => $store.getters.findUser(id)),
2019-04-09 18:46:47 +00:00
destroy: (props, $store) => $store.dispatch('clearFollowers', props.userId),
2019-04-04 02:28:08 +00:00
childPropName: 'items',
additionalPropNames: ['userId']
})(List)
2019-02-25 09:51:23 +00:00
2019-04-04 02:28:08 +00:00
const FriendList = withLoadMore({
fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId),
select: (props, $store) => get($store.getters.findUser(props.userId), 'friendIds', []).map(id => $store.getters.findUser(id)),
2019-04-09 18:46:47 +00:00
destroy: (props, $store) => $store.dispatch('clearFriends', props.userId),
2019-04-04 02:28:08 +00:00
childPropName: 'items',
additionalPropNames: ['userId']
})(List)
2016-11-30 22:32:22 +00:00
const UserProfile = {
data () {
return {
error: false,
userId: null,
tab: 'statuses',
2022-06-22 15:46:47 +00:00
footerRef: null,
2022-06-23 12:04:19 +00:00
note: null,
noteLoading: false
}
},
2017-06-12 14:00:46 +00:00
created () {
const defaultTabKey = this.defaultTabKey
2019-04-15 15:08:28 +00:00
const routeParams = this.$route.params
const hash = (get(this.$route, 'hash') || defaultTabKey).replace(/^#/, '')
if (hash !== '') this.tab = hash
2019-04-15 15:08:28 +00:00
this.load(routeParams.name || routeParams.id)
2017-06-12 14:00:46 +00:00
},
2021-04-25 10:44:50 +00:00
unmounted () {
this.stopFetching()
},
2016-11-30 22:32:22 +00:00
computed: {
2018-12-15 03:16:44 +00:00
timeline () {
return this.$store.state.statuses.timelines.user
},
replies () {
return this.$store.state.statuses.timelines.replies
},
favorites () {
return this.$store.state.statuses.timelines.favorites
},
2019-01-24 10:48:40 +00:00
media () {
return this.$store.state.statuses.timelines.media
},
2019-01-17 19:11:51 +00:00
isUs () {
return this.userId && this.$store.state.users.currentUser.id &&
this.userId === this.$store.state.users.currentUser.id
2019-01-17 19:11:51 +00:00
},
2016-11-30 22:32:22 +00:00
user () {
2019-04-15 15:08:28 +00:00
return this.$store.getters.findUser(this.userId)
2018-12-15 03:16:44 +00:00
},
isExternal () {
return this.$route.name === 'external-user-profile'
2019-02-03 17:52:04 +00:00
},
2019-02-07 15:53:36 +00:00
followsTabVisible () {
return this.isUs || !this.user.hide_follows
2019-02-03 17:52:04 +00:00
},
followersTabVisible () {
return this.isUs || !this.user.hide_followers
2022-07-19 05:56:14 +00:00
},
currentUser () {
return this.$store.state.users.currentUser
},
defaultTabKey () {
return this.$store.getters.mergedConfig.userProfileDefaultTab || 'statuses'
2016-11-30 22:32:22 +00:00
}
},
methods: {
setFooterRef (el) {
this.footerRef = el
},
onRouteChange (previousTab, nextTab) {
const timelineTabMap = {
statuses: 'user',
replies: 'replies',
media: 'media'
}
// only we can see our own favourites
if (this.isUs) timelineTabMap['favorites'] = 'favorites'
const timeline = timelineTabMap[nextTab]
2022-08-31 22:32:02 +00:00
if (timeline) {
this.stopFetching()
this.$store.dispatch('startFetchingTimeline', { timeline: timeline, userId: this.userId })
}
},
load (userNameOrId) {
const loadById = (userId) => {
this.userId = userId
const timelines = ['user', 'favorites', 'replies', 'media']
timelines.forEach((timeline) => {
this.$store.commit('clearTimeline', { timeline: timeline })
})
this.onRouteChange(null, this.tab)
// Fetch all pinned statuses immediately
this.$store.dispatch('fetchPinnedStatuses', userId)
}
// Reset view
this.userId = null
this.error = false
2019-04-15 15:08:28 +00:00
// Check if user data is already loaded in store
const user = this.$store.getters.findUser(userNameOrId)
if (user) {
loadById(user.id)
2022-06-22 15:46:47 +00:00
this.note = user.relationship.note
} else {
2019-04-15 15:08:28 +00:00
this.$store.dispatch('fetchUser', userNameOrId)
2022-06-22 15:46:47 +00:00
.then(({ id, relationship }) => {
this.note = relationship.note
return loadById(id)
})
2019-04-15 15:08:28 +00:00
.catch((reason) => {
const errorMessage = get(reason, 'error.error')
if (errorMessage === 'No user with such user_id') { // Known error
this.error = this.$t('user_profile.profile_does_not_exist')
} else if (errorMessage) {
this.error = errorMessage
} else {
this.error = this.$t('user_profile.profile_loading_error')
}
})
}
},
stopFetching () {
this.$store.dispatch('stopFetchingTimeline', 'user')
this.$store.dispatch('stopFetchingTimeline', 'replies')
this.$store.dispatch('stopFetchingTimeline', 'favorites')
this.$store.dispatch('stopFetchingTimeline', 'media')
},
switchUser (userNameOrId) {
this.stopFetching()
this.load(userNameOrId)
},
onTabSwitch (tab) {
this.tab = tab
this.$router.replace({ hash: `#${tab}` })
2019-11-15 18:12:16 +00:00
},
linkClicked ({ target }) {
if (target.tagName === 'SPAN') {
target = target.parentNode
}
if (target.tagName === 'A') {
window.open(target.href, '_blank')
}
2022-06-22 15:46:47 +00:00
},
2022-06-23 12:04:19 +00:00
setNote () {
this.noteLoading = true
this.debounceSetNote()
},
debounceSetNote: debounce(function () {
2022-06-22 15:46:47 +00:00
this.$store.dispatch('setNote', { id: this.userId, note: this.note })
2022-06-23 12:04:19 +00:00
this.noteLoading = false
2022-06-22 16:42:27 +00:00
}, 1500)
},
watch: {
2019-04-15 15:08:28 +00:00
'$route.params.id': function (newVal) {
if (newVal) {
this.switchUser(newVal)
}
2019-03-03 18:38:48 +00:00
},
2019-04-15 15:08:28 +00:00
'$route.params.name': function (newVal) {
if (newVal) {
this.switchUser(newVal)
}
},
'$route.hash': function (newVal) {
const oldTab = this.tab
this.tab = newVal.replace(/^#/, '') || this.defaultTabKey
this.onRouteChange(oldTab, this.tab)
}
},
2016-11-30 22:32:22 +00:00
components: {
2019-03-05 19:01:49 +00:00
UserCard,
Timeline,
2019-02-25 09:51:23 +00:00
FollowerList,
2019-02-18 14:49:32 +00:00
FriendList,
FollowCard,
TabSwitcher,
Conversation,
RichContent
2016-11-30 22:32:22 +00:00
}
}
export default UserProfile