From 8ce513ed09124fa0183943c359950f49ebcf2f89 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Thu, 31 Jan 2019 21:11:28 +0200
Subject: [PATCH] initial draft for follows/following pagination

---
 .../user_card_content/user_card_content.vue         |  2 +-
 src/components/user_profile/user_profile.js         | 11 +++++++++++
 src/components/user_profile/user_profile.vue        |  1 +
 src/modules/users.js                                | 13 +++++++------
 src/services/api/api.service.js                     | 10 ++++++++--
 .../backend_interactor_service.js                   |  8 ++++----
 .../entity_normalizer/entity_normalizer.service.js  |  2 ++
 7 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 0e820182..a93caa5e 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -107,7 +107,7 @@
     </div>
   </div>
   <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')">
         <h5>{{ $t('user_card.statuses') }}</h5>
         <span v-if="!hideUserStatsLocal">{{user.statuses_count}} <br></span>
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 27e138b0..4f09c9e7 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -19,6 +19,12 @@ const UserProfile = {
     this.$store.dispatch('stopFetching', 'favorites')
     this.$store.dispatch('stopFetching', 'media')
   },
+  data () {
+    return {
+      followsPage: 0,
+      followersPage: 0
+    }
+  },
   computed: {
     timeline () {
       return this.$store.state.statuses.timelines.user
@@ -80,6 +86,11 @@ const UserProfile = {
       if (this.isUs) {
         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: {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index f9b964ce..baf6aef6 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -7,6 +7,7 @@
       <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 @click="nextFollowsPage" class="panel-footer">MORE</div>
         </div>
         <div class="userlist-placeholder" v-else>
           <i class="icon-spin3 animate-spin"></i>
diff --git a/src/modules/users.js b/src/modules/users.js
index d6ab47ea..ca8e5606 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -1,5 +1,5 @@
 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 { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
 import oauthApi from '../services/new_api/oauth'
@@ -54,7 +54,8 @@ export const mutations = {
   // TODO Clean after ourselves?
   addFriends (state, { id, friends }) {
     const user = state.usersObject[id]
-    user.friends = friends
+    console.log(user.friends)
+    user.friends = concat(user.friends, friends)
   },
   addFollowers (state, { id, followers }) {
     const user = state.usersObject[id]
@@ -115,12 +116,12 @@ const users = {
       store.rootState.api.backendInteractor.fetchUser({ id })
         .then((user) => store.commit('addNewUsers', [user]))
     },
-    addFriends ({ rootState, commit }, { id }) {
-      rootState.api.backendInteractor.fetchFriends({ id })
+    addFriends ({ rootState, commit }, { id, page }) {
+      rootState.api.backendInteractor.fetchFriends({ id, page })
         .then((friends) => commit('addFriends', { id, friends }))
     },
-    addFollowers ({ rootState, commit }, { id }) {
-      rootState.api.backendInteractor.fetchFollowers({ id })
+    addFollowers ({ rootState, commit }, { id, page }) {
+      rootState.api.backendInteractor.fetchFollowers({ id, page })
         .then((followers) => commit('addFollowers', { id, followers }))
     },
     registerPushNotifications (store) {
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 31b48cb6..1d4790a0 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -247,15 +247,21 @@ const fetchUser = ({id, credentials}) => {
     .then((data) => parseUser(data))
 }
 
-const fetchFriends = ({id, credentials}) => {
+const fetchFriends = ({id, page, credentials}) => {
   let url = `${FRIENDS_URL}?user_id=${id}`
+  if (page) {
+    url = url + `&page=${page}`
+  }
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => data.json())
     .then((data) => data.map(parseUser))
 }
 
-const fetchFollowers = ({id, credentials}) => {
+const fetchFollowers = ({id, page, credentials}) => {
   let url = `${FOLLOWERS_URL}?user_id=${id}`
+  if (page) {
+    url = url + `&page=${page}`
+  }
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => data.json())
     .then((data) => data.map(parseUser))
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index f44f52b6..ed7d4b49 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -10,12 +10,12 @@ const backendInteractorService = (credentials) => {
     return apiService.fetchConversation({id, credentials})
   }
 
-  const fetchFriends = ({id}) => {
-    return apiService.fetchFriends({id, credentials})
+  const fetchFriends = ({id, page}) => {
+    return apiService.fetchFriends({id, page, credentials})
   }
 
-  const fetchFollowers = ({id}) => {
-    return apiService.fetchFollowers({id, credentials})
+  const fetchFollowers = ({id, page}) => {
+    return apiService.fetchFollowers({id, page, credentials})
   }
 
   const fetchAllFollowing = ({username}) => {
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index fa955ad6..97b0d16f 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -113,6 +113,8 @@ export const parseUser = (data) => {
   output.locked = data.locked
   output.followers_count = data.followers_count
   output.statuses_count = data.statuses_count
+  output.friends = []
+  output.followers = []
 
   return output
 }