diff options
Diffstat (limited to 'src/components/user_profile')
| -rw-r--r-- | src/components/user_profile/user_profile.js | 74 | ||||
| -rw-r--r-- | src/components/user_profile/user_profile.vue | 150 |
2 files changed, 134 insertions, 90 deletions
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index eab330e7..00055707 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -3,7 +3,6 @@ import UserCard from '../user_card/user_card.vue' import FollowCard from '../follow_card/follow_card.vue' import Timeline from '../timeline/timeline.vue' import Conversation from '../conversation/conversation.vue' -import ModerationTools from '../moderation_tools/moderation_tools.vue' import List from '../list/list.vue' import withLoadMore from '../../hocs/with_load_more/with_load_more' @@ -23,19 +22,23 @@ const FriendList = withLoadMore({ additionalPropNames: ['userId'] })(List) +const defaultTabKey = 'statuses' + const UserProfile = { data () { return { error: false, - userId: null + userId: null, + tab: defaultTabKey } }, created () { const routeParams = this.$route.params this.load(routeParams.name || routeParams.id) + this.tab = get(this.$route, 'query.tab', defaultTabKey) }, destroyed () { - this.cleanUp() + this.stopFetching() }, computed: { timeline () { @@ -66,17 +69,36 @@ const UserProfile = { }, methods: { load (userNameOrId) { + const startFetchingTimeline = (timeline, userId) => { + // Clear timeline only if load another user's profile + if (userId !== this.$store.state.statuses.timelines[timeline].userId) { + this.$store.commit('clearTimeline', { timeline }) + } + this.$store.dispatch('startFetchingTimeline', { timeline, userId }) + } + + const loadById = (userId) => { + this.userId = userId + startFetchingTimeline('user', userId) + startFetchingTimeline('media', userId) + if (this.isUs) { + startFetchingTimeline('favorites', userId) + } + // Fetch all pinned statuses immediately + this.$store.dispatch('fetchPinnedStatuses', userId) + } + + // Reset view + this.userId = null + this.error = false + // Check if user data is already loaded in store const user = this.$store.getters.findUser(userNameOrId) if (user) { - this.userId = user.id - this.fetchTimelines() + loadById(user.id) } else { this.$store.dispatch('fetchUser', userNameOrId) - .then(({ id }) => { - this.userId = id - this.fetchTimelines() - }) + .then(({ id }) => loadById(id)) .catch((reason) => { const errorMessage = get(reason, 'error.error') if (errorMessage === 'No user with such user_id') { // Known error @@ -89,40 +111,33 @@ const UserProfile = { }) } }, - fetchTimelines () { - const userId = this.userId - this.$store.dispatch('startFetchingTimeline', { timeline: 'user', userId }) - this.$store.dispatch('startFetchingTimeline', { timeline: 'media', userId }) - if (this.isUs) { - this.$store.dispatch('startFetchingTimeline', { timeline: 'favorites', userId }) - } - // Fetch all pinned statuses immediately - this.$store.dispatch('fetchPinnedStatuses', userId) - }, - cleanUp () { + stopFetching () { this.$store.dispatch('stopFetching', 'user') this.$store.dispatch('stopFetching', 'favorites') this.$store.dispatch('stopFetching', 'media') - this.$store.commit('clearTimeline', { timeline: 'user' }) - this.$store.commit('clearTimeline', { timeline: 'favorites' }) - this.$store.commit('clearTimeline', { timeline: 'media' }) + }, + switchUser (userNameOrId) { + this.stopFetching() + this.load(userNameOrId) + }, + onTabSwitch (tab) { + this.tab = tab + this.$router.replace({ query: { tab } }) } }, watch: { '$route.params.id': function (newVal) { if (newVal) { - this.cleanUp() - this.load(newVal) + this.switchUser(newVal) } }, '$route.params.name': function (newVal) { if (newVal) { - this.cleanUp() - this.load(newVal) + this.switchUser(newVal) } }, - $route () { - this.$refs.tabSwitcher.activateTab(0)() + '$route.query': function (newVal) { + this.tab = newVal.tab || defaultTabKey } }, components: { @@ -130,7 +145,6 @@ const UserProfile = { Timeline, FollowerList, FriendList, - ModerationTools, FollowCard, Conversation } diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 48b774ea..42516916 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -1,75 +1,105 @@ <template> -<div> - <div v-if="user" class="user-profile panel panel-default"> - <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/> - <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher"> - <div :label="$t('user_card.statuses')" :disabled="!user.statuses_count"> - <div class="timeline"> - <template v-for="statusId in user.pinnedStatuseIds"> - <Conversation - v-if="timeline.statusesObject[statusId]" - class="status-fadein" - :key="statusId" - :statusoid="timeline.statusesObject[statusId]" - :collapsable="true" - :showPinned="true" - /> - </template> - </div> + <div> + <div + v-if="user" + class="user-profile panel panel-default" + > + <UserCard + :user="user" + :switcher="true" + :selected="timeline.viewing" + :allow-zooming-avatar="true" + rounded="top" + /> + <tab-switcher + :active-tab="tab" + :render-only-focused="true" + :on-switch="onTabSwitch" + > <Timeline + key="statuses" + :label="$t('user_card.statuses')" :count="user.statuses_count" :embedded="true" :title="$t('user_profile.timeline_title')" :timeline="timeline" - :timeline-name="'user'" + timeline-name="user" :user-id="userId" + :pinned-status-ids="user.pinnedStatusIds" /> + <div + v-if="followsTabVisible" + key="followees" + :label="$t('user_card.followees')" + :disabled="!user.friends_count" + > + <FriendList :user-id="userId"> + <template + slot="item" + slot-scope="{item}" + > + <FollowCard :user="item" /> + </template> + </FriendList> + </div> + <div + v-if="followersTabVisible" + key="followers" + :label="$t('user_card.followers')" + :disabled="!user.followers_count" + > + <FollowerList :user-id="userId"> + <template + slot="item" + slot-scope="{item}" + > + <FollowCard + :user="item" + :no-follows-you="isUs" + /> + </template> + </FollowerList> + </div> + <Timeline + key="media" + :label="$t('user_card.media')" + :disabled="!media.visibleStatuses.length" + :embedded="true" + :title="$t('user_card.media')" + timeline-name="media" + :timeline="media" + :user-id="userId" + /> + <Timeline + v-if="isUs" + key="favorites" + :label="$t('user_card.favorites')" + :disabled="!favorites.visibleStatuses.length" + :embedded="true" + :title="$t('user_card.favorites')" + timeline-name="favorites" + :timeline="favorites" + /> + </tab-switcher> + </div> + <div + v-else + class="panel user-profile-placeholder" + > + <div class="panel-heading"> + <div class="title"> + {{ $t('settings.profile_tab') }} + </div> </div> - <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count"> - <FriendList :userId="userId"> - <template slot="item" slot-scope="{item}"> - <FollowCard :user="item" /> - </template> - </FriendList> - </div> - <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count"> - <FollowerList :userId="userId"> - <template slot="item" slot-scope="{item}"> - <FollowCard :user="item" :noFollowsYou="isUs" /> - </template> - </FollowerList> - </div> - <Timeline - :label="$t('user_card.media')" - :disabled="!media.visibleStatuses.length" - :embedded="true" :title="$t('user_card.media')" - timeline-name="media" - :timeline="media" - :user-id="userId" - /> - <Timeline - v-if="isUs" - :label="$t('user_card.favorites')" - :disabled="!favorites.visibleStatuses.length" - :embedded="true" - :title="$t('user_card.favorites')" - timeline-name="favorites" - :timeline="favorites" - /> - </tab-switcher> - </div> - <div v-else class="panel user-profile-placeholder"> - <div class="panel-heading"> - <div class="title"> - {{ $t('settings.profile_tab') }} + <div class="panel-body"> + <span v-if="error">{{ error }}</span> + <i + v-else + class="icon-spin3 animate-spin" + /> </div> </div> - <div class="panel-body"> - <span v-if="error">{{ error }}</span> - <i class="icon-spin3 animate-spin" v-else></i> - </div> </div> -</div> </template> <script src="./user_profile.js"></script> |