Refactor follower/friends out of statuses/timeline into user_profile where it
belongs. Changed display of profile to single panel with tabs.
This commit is contained in:
Henry Jameson
parent
eaf065c751
commit
8f255fbad4
6 changed files with 110 additions and 83 deletions
|
|
@ -10,7 +10,8 @@ const Timeline = {
|
|||
'timelineName',
|
||||
'title',
|
||||
'userId',
|
||||
'tag'
|
||||
'tag',
|
||||
'embedded'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -20,15 +21,6 @@ const Timeline = {
|
|||
},
|
||||
computed: {
|
||||
timelineError () { return this.$store.state.statuses.error },
|
||||
followers () {
|
||||
return this.timeline.followers
|
||||
},
|
||||
friends () {
|
||||
return this.timeline.friends
|
||||
},
|
||||
viewing () {
|
||||
return this.timeline.viewing
|
||||
},
|
||||
newStatusCount () {
|
||||
return this.timeline.newStatusCount
|
||||
},
|
||||
|
|
@ -38,6 +30,14 @@ const Timeline = {
|
|||
} else {
|
||||
return ` (${this.newStatusCount})`
|
||||
}
|
||||
},
|
||||
classes () {
|
||||
return {
|
||||
root: ['timeline'].concat(!this.embedded ? ['panel', 'panel-default'] : []),
|
||||
header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
|
||||
body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
|
||||
footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -60,12 +60,6 @@ const Timeline = {
|
|||
userId: this.userId,
|
||||
tag: this.tag
|
||||
})
|
||||
|
||||
// don't fetch followers for public, friend, twkn
|
||||
if (this.timelineName === 'user') {
|
||||
this.fetchFriends()
|
||||
this.fetchFollowers()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (typeof document.hidden !== 'undefined') {
|
||||
|
|
@ -103,16 +97,6 @@ const Timeline = {
|
|||
tag: this.tag
|
||||
}).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
|
||||
}, 1000, this),
|
||||
fetchFollowers () {
|
||||
const id = this.userId
|
||||
this.$store.state.api.backendInteractor.fetchFollowers({ id })
|
||||
.then((followers) => this.$store.dispatch('addFollowers', { followers }))
|
||||
},
|
||||
fetchFriends () {
|
||||
const id = this.userId
|
||||
this.$store.state.api.backendInteractor.fetchFriends({ id })
|
||||
.then((friends) => this.$store.dispatch('addFriends', { friends }))
|
||||
},
|
||||
scrollLoad (e) {
|
||||
const bodyBRect = document.body.getBoundingClientRect()
|
||||
const height = Math.max(bodyBRect.height, -(bodyBRect.y))
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="timeline panel panel-default" v-if="viewing == 'statuses'">
|
||||
<div class="panel-heading timeline-heading">
|
||||
<div :class="classes.root">
|
||||
<div :class="classes.header">
|
||||
<div class="title">
|
||||
{{title}}
|
||||
</div>
|
||||
|
|
@ -14,43 +14,20 @@
|
|||
{{$t('timeline.up_to_date')}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div :class="classes.body">
|
||||
<div class="timeline">
|
||||
<status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<div :class="classes.footer">
|
||||
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
|
||||
<div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
|
||||
</a>
|
||||
<div class="new-status-notification text-center panel-footer" v-else>...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline panel panel-default" v-else-if="viewing == 'followers'">
|
||||
<div class="panel-heading timeline-heading">
|
||||
<div class="title">
|
||||
{{$t('user_card.followers')}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="timeline">
|
||||
<user-card v-for="follower in followers" :key="follower.id" :user="follower" :showFollows="false"></user-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline panel panel-default" v-else-if="viewing == 'friends'">
|
||||
<div class="panel-heading timeline-heading">
|
||||
<div class="title">
|
||||
{{$t('user_card.followees')}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="timeline">
|
||||
<user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./timeline.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import UserCardContent from '../user_card_content/user_card_content.vue'
|
||||
import UserCard from '../user_card/user_card.vue'
|
||||
import Timeline from '../timeline/timeline.vue'
|
||||
|
||||
const UserProfile = {
|
||||
|
|
@ -14,6 +15,12 @@ const UserProfile = {
|
|||
},
|
||||
computed: {
|
||||
timeline () { return this.$store.state.statuses.timelines.user },
|
||||
friends () {
|
||||
return this.user.friends
|
||||
},
|
||||
followers () {
|
||||
return this.user.followers
|
||||
},
|
||||
userId () {
|
||||
return this.$route.params.id
|
||||
},
|
||||
|
|
@ -25,15 +32,32 @@ const UserProfile = {
|
|||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchFollowers () {
|
||||
const id = this.userId
|
||||
this.$store.dispatch('addFollowers', { id })
|
||||
},
|
||||
fetchFriends () {
|
||||
const id = this.userId
|
||||
this.$store.dispatch('addFriends', { id })
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
userId () {
|
||||
this.$store.dispatch('stopFetching', 'user')
|
||||
this.$store.commit('clearTimeline', { timeline: 'user' })
|
||||
this.$store.dispatch('startFetching', ['user', this.userId])
|
||||
},
|
||||
user () {
|
||||
if (!this.user.followers) {
|
||||
this.fetchFollowers()
|
||||
this.fetchFriends()
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
UserCardContent,
|
||||
UserCard,
|
||||
Timeline
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,38 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="user" class="user-profile panel panel-default">
|
||||
<user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content>
|
||||
</div>
|
||||
<div v-else class="panel user-profile-placeholder">
|
||||
<div class="panel-heading">
|
||||
<div class="title">
|
||||
{{ $t('settings.profile_tab') }}
|
||||
<div>
|
||||
<div v-if="user" class="user-profile panel panel-default">
|
||||
<user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content>
|
||||
<tab-switcher>
|
||||
<Timeline label="Posts" :embedded="true" :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="userId"/>
|
||||
<div :label="$t('user_card.followers')">
|
||||
<div v-if="followers">
|
||||
<user-card v-for="follower in followers" :key="follower.id" :user="follower" :showFollows="false"></user-card>
|
||||
</div>
|
||||
<div class="userlist-placeholder" v-else>
|
||||
<i class="icon-spin3 animate-spin"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<i class="icon-spin3 animate-spin"></i>
|
||||
<div :label="$t('user_card.followees')">
|
||||
<div v-if="friends">
|
||||
<user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card>
|
||||
</div>
|
||||
<div class="userlist-placeholder" v-else>
|
||||
<i class="icon-spin3 animate-spin"></i>
|
||||
</div>
|
||||
</div>
|
||||
</tab-switcher>
|
||||
</div>
|
||||
<div v-else class="panel user-profile-placeholder">
|
||||
<div class="panel-heading">
|
||||
<div class="title">
|
||||
{{ $t('settings.profile_tab') }}
|
||||
</div>
|
||||
</div>
|
||||
<Timeline :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="userId"/>
|
||||
<div class="panel-body">
|
||||
<i class="icon-spin3 animate-spin"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./user_profile.js"></script>
|
||||
|
|
@ -24,12 +42,36 @@
|
|||
.user-profile {
|
||||
flex: 2;
|
||||
flex-basis: 500px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.panel-heading {
|
||||
background: transparent;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.userlist-placeholder {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: middle;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.timeline-heading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.loadmore-button, .alert {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.loadmore-button {
|
||||
height: 28px;
|
||||
margin: 10px .6em;
|
||||
}
|
||||
|
||||
.title, .loadmore-text {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-profile-placeholder {
|
||||
.panel-body {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ const emptyTl = () => ({
|
|||
loading: false,
|
||||
followers: [],
|
||||
friends: [],
|
||||
viewing: 'statuses',
|
||||
userId: 0,
|
||||
flushMarker: 0
|
||||
})
|
||||
|
|
@ -399,16 +398,6 @@ export const mutations = {
|
|||
setNotificationsSilence (state, { value }) {
|
||||
state.notifications.desktopNotificationSilence = value
|
||||
},
|
||||
setProfileView (state, { v }) {
|
||||
// load followers / friends only when needed
|
||||
state.timelines['user'].viewing = v
|
||||
},
|
||||
addFriends (state, { friends }) {
|
||||
state.timelines['user'].friends = friends
|
||||
},
|
||||
addFollowers (state, { followers }) {
|
||||
state.timelines['user'].followers = followers
|
||||
},
|
||||
markNotificationsAsSeen (state) {
|
||||
each(state.notifications.data, (notification) => {
|
||||
notification.seen = true
|
||||
|
|
@ -437,12 +426,6 @@ const statuses = {
|
|||
setNotificationsSilence ({ rootState, commit }, { value }) {
|
||||
commit('setNotificationsSilence', { value })
|
||||
},
|
||||
addFriends ({ rootState, commit }, { friends }) {
|
||||
commit('addFriends', { friends })
|
||||
},
|
||||
addFollowers ({ rootState, commit }, { followers }) {
|
||||
commit('addFollowers', { followers })
|
||||
},
|
||||
deleteStatus ({ rootState, commit }, status) {
|
||||
commit('setDeleted', { status })
|
||||
apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
|
||||
|
|
|
|||
|
|
@ -51,6 +51,15 @@ export const mutations = {
|
|||
endLogin (state) {
|
||||
state.loggingIn = false
|
||||
},
|
||||
// TODO Clean after ourselves?
|
||||
addFriends (state, { id, friends }) {
|
||||
const user = state.usersObject[id]
|
||||
user.friends = friends
|
||||
},
|
||||
addFollowers (state, { id, followers }) {
|
||||
const user = state.usersObject[id]
|
||||
user.followers = followers
|
||||
},
|
||||
addNewUsers (state, users) {
|
||||
each(users, (user) => mergeOrAdd(state.users, state.usersObject, user))
|
||||
},
|
||||
|
|
@ -92,6 +101,14 @@ const users = {
|
|||
store.rootState.api.backendInteractor.fetchUser({ id })
|
||||
.then((user) => store.commit('addNewUsers', [user]))
|
||||
},
|
||||
addFriends ({ rootState, commit }, { id }) {
|
||||
rootState.api.backendInteractor.fetchFriends({ id })
|
||||
.then((friends) => commit('addFriends', { id, friends }))
|
||||
},
|
||||
addFollowers ({ rootState, commit }, { id }) {
|
||||
rootState.api.backendInteractor.fetchFollowers({ id })
|
||||
.then((followers) => commit('addFollowers', { id, followers }))
|
||||
},
|
||||
registerPushNotifications (store) {
|
||||
const token = store.state.currentUser.credentials
|
||||
const vapidPublicKey = store.rootState.instance.vapidPublicKey
|
||||
|
|
|
|||
Loading…
Reference in a new issue