initial draft for follows/following pagination

This commit is contained in:
shpuld 2019-01-31 21:11:28 +02:00
parent fbe7af3d56
commit 8ce513ed09
7 changed files with 34 additions and 13 deletions

View File

@ -107,7 +107,7 @@
</div> </div>
</div> </div>
<div class="panel-body profile-panel-body" v-if="!hideBio"> <div class="panel-body profile-panel-body" v-if="!hideBio">
<div v-if="!hideUserStatsLocal || switcher" class="user-counts"> <div v-if="!hideUserStatsLocal && switcher" class="user-counts">
<div class="user-count" v-on:click.prevent="setProfileView('statuses')"> <div class="user-count" v-on:click.prevent="setProfileView('statuses')">
<h5>{{ $t('user_card.statuses') }}</h5> <h5>{{ $t('user_card.statuses') }}</h5>
<span v-if="!hideUserStatsLocal">{{user.statuses_count}} <br></span> <span v-if="!hideUserStatsLocal">{{user.statuses_count}} <br></span>

View File

@ -19,6 +19,12 @@ const UserProfile = {
this.$store.dispatch('stopFetching', 'favorites') this.$store.dispatch('stopFetching', 'favorites')
this.$store.dispatch('stopFetching', 'media') this.$store.dispatch('stopFetching', 'media')
}, },
data () {
return {
followsPage: 0,
followersPage: 0
}
},
computed: { computed: {
timeline () { timeline () {
return this.$store.state.statuses.timelines.user return this.$store.state.statuses.timelines.user
@ -80,6 +86,11 @@ const UserProfile = {
if (this.isUs) { if (this.isUs) {
this.$store.dispatch('startFetching', ['favorites', this.fetchBy]) this.$store.dispatch('startFetching', ['favorites', this.fetchBy])
} }
},
nextFollowsPage () {
this.followsPage += 1
this.$store.dispatch('addFriends', { id: this.userId, page: this.followsPage })
console.log(this.user.friends)
} }
}, },
watch: { watch: {

View File

@ -7,6 +7,7 @@
<div :label="$t('user_card.followees')"> <div :label="$t('user_card.followees')">
<div v-if="friends"> <div v-if="friends">
<user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card> <user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card>
<div @click="nextFollowsPage" class="panel-footer">MORE</div>
</div> </div>
<div class="userlist-placeholder" v-else> <div class="userlist-placeholder" v-else>
<i class="icon-spin3 animate-spin"></i> <i class="icon-spin3 animate-spin"></i>

View File

@ -1,5 +1,5 @@
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import { compact, map, each, merge } from 'lodash' import { compact, map, each, merge, concat } from 'lodash'
import { set } from 'vue' import { set } from 'vue'
import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js' import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
import oauthApi from '../services/new_api/oauth' import oauthApi from '../services/new_api/oauth'
@ -54,7 +54,8 @@ export const mutations = {
// TODO Clean after ourselves? // TODO Clean after ourselves?
addFriends (state, { id, friends }) { addFriends (state, { id, friends }) {
const user = state.usersObject[id] const user = state.usersObject[id]
user.friends = friends console.log(user.friends)
user.friends = concat(user.friends, friends)
}, },
addFollowers (state, { id, followers }) { addFollowers (state, { id, followers }) {
const user = state.usersObject[id] const user = state.usersObject[id]
@ -115,12 +116,12 @@ const users = {
store.rootState.api.backendInteractor.fetchUser({ id }) store.rootState.api.backendInteractor.fetchUser({ id })
.then((user) => store.commit('addNewUsers', [user])) .then((user) => store.commit('addNewUsers', [user]))
}, },
addFriends ({ rootState, commit }, { id }) { addFriends ({ rootState, commit }, { id, page }) {
rootState.api.backendInteractor.fetchFriends({ id }) rootState.api.backendInteractor.fetchFriends({ id, page })
.then((friends) => commit('addFriends', { id, friends })) .then((friends) => commit('addFriends', { id, friends }))
}, },
addFollowers ({ rootState, commit }, { id }) { addFollowers ({ rootState, commit }, { id, page }) {
rootState.api.backendInteractor.fetchFollowers({ id }) rootState.api.backendInteractor.fetchFollowers({ id, page })
.then((followers) => commit('addFollowers', { id, followers })) .then((followers) => commit('addFollowers', { id, followers }))
}, },
registerPushNotifications (store) { registerPushNotifications (store) {

View File

@ -247,15 +247,21 @@ const fetchUser = ({id, credentials}) => {
.then((data) => parseUser(data)) .then((data) => parseUser(data))
} }
const fetchFriends = ({id, credentials}) => { const fetchFriends = ({id, page, credentials}) => {
let url = `${FRIENDS_URL}?user_id=${id}` let url = `${FRIENDS_URL}?user_id=${id}`
if (page) {
url = url + `&page=${page}`
}
return fetch(url, { headers: authHeaders(credentials) }) return fetch(url, { headers: authHeaders(credentials) })
.then((data) => data.json()) .then((data) => data.json())
.then((data) => data.map(parseUser)) .then((data) => data.map(parseUser))
} }
const fetchFollowers = ({id, credentials}) => { const fetchFollowers = ({id, page, credentials}) => {
let url = `${FOLLOWERS_URL}?user_id=${id}` let url = `${FOLLOWERS_URL}?user_id=${id}`
if (page) {
url = url + `&page=${page}`
}
return fetch(url, { headers: authHeaders(credentials) }) return fetch(url, { headers: authHeaders(credentials) })
.then((data) => data.json()) .then((data) => data.json())
.then((data) => data.map(parseUser)) .then((data) => data.map(parseUser))

View File

@ -10,12 +10,12 @@ const backendInteractorService = (credentials) => {
return apiService.fetchConversation({id, credentials}) return apiService.fetchConversation({id, credentials})
} }
const fetchFriends = ({id}) => { const fetchFriends = ({id, page}) => {
return apiService.fetchFriends({id, credentials}) return apiService.fetchFriends({id, page, credentials})
} }
const fetchFollowers = ({id}) => { const fetchFollowers = ({id, page}) => {
return apiService.fetchFollowers({id, credentials}) return apiService.fetchFollowers({id, page, credentials})
} }
const fetchAllFollowing = ({username}) => { const fetchAllFollowing = ({username}) => {

View File

@ -113,6 +113,8 @@ export const parseUser = (data) => {
output.locked = data.locked output.locked = data.locked
output.followers_count = data.followers_count output.followers_count = data.followers_count
output.statuses_count = data.statuses_count output.statuses_count = data.statuses_count
output.friends = []
output.followers = []
return output return output
} }