Improve user-list component

2 files changed, 71 insertions, 37 deletions

diff --git a/src/client/app/common/views/components/user-list.vue b/src/client/app/common/views/components/user-list.vue
index 3147fbe371..9fcb80f8ad 100644
--- a/src/client/app/common/views/components/user-list.vue
+++ b/src/client/app/common/views/components/user-list.vue
@@ -1,8 +1,11 @@
 <template>
 <ui-container :body-togglable="true">
 	<template slot="header"><slot></slot></template>
+
+	<mk-error v-if="!fetching && !inited" @retry="init()"/>
+
 	<div class="efvhhmdq" v-size="[{ lt: 500, class: 'narrow' }]">
-		<div class="user" v-for="user in users">
+		<div class="user" v-for="user in us">
 			<mk-avatar class="avatar" :user="user"/>
 			<div class="body">
 				<div class="name">
@@ -14,6 +17,9 @@
 				</div>
 			</div>
 		</div>
+		<button class="more" :class="{ fetching: fetchingMoreUsers }" v-if="cursor != null" @click="fetchMoreUsers()" :disabled="fetchingMoreUsers">
+			<template v-if="fetchingMoreUsers"><fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreUsers ? $t('@.loading') : $t('@.load-more') }}
+		</button>
 	</div>
 </ui-container>
 </template>
@@ -23,14 +29,56 @@ import Vue from 'vue';
 
 export default Vue.extend({
 	props: {
-		users: {
-			type: Array,
+		makePromise: {
 			required: true
 		},
 		iconOnly: {
 			type: Boolean,
 			default: false
 		}
+	},
+
+	data() {
+		return {
+			fetching: true,
+			fetchingMoreUsers: false,
+			us: [],
+			inited: false,
+			cursor: null
+		};
+	},
+
+	created() {
+		this.init();
+	},
+
+	methods: {
+		init() {
+			this.fetching = true;
+			this.makePromise().then(x => {
+				if (Array.isArray(x)) {
+					this.us = x;
+				} else {
+					this.us = x.users;
+					this.cursor = x.cursor;
+				}
+				this.inited = true;
+				this.fetching = false;
+			}, e => {
+				this.fetching = false;
+			});
+		},
+
+		fetchMoreUsers() {
+			this.fetchingMoreUsers = true;
+			this.makePromise(this.cursor).then(x => {
+				this.us = x.users;
+				this.cursor = x.cursor;
+				this.fetchingMoreUsers = false;
+			}, e => {
+				this.fetchingMoreUsers = false;
+			});
+		}
 	}
 });
 </script>
diff --git a/src/client/app/common/views/pages/explore.vue b/src/client/app/common/views/pages/explore.vue
index b1e28415d8..2740e0381d 100644
--- a/src/client/app/common/views/pages/explore.vue
+++ b/src/client/app/common/views/pages/explore.vue
@@ -1,12 +1,12 @@
 <template>
 <div>
-	<mk-user-list :users="verifiedUsers">
+	<mk-user-list :make-promise="verifiedUsers">
 		<span><fa :icon="faBookmark"/> {{ $t('verified-users') }}</span>
 	</mk-user-list>
-	<mk-user-list :users="popularUsers">
+	<mk-user-list :make-promise="popularUsers">
 		<span><fa :icon="faChartLine"/> {{ $t('popular-users') }}</span>
 	</mk-user-list>
-	<mk-user-list :users="recentlyUpdatedUsers">
+	<mk-user-list :make-promise="recentlyUpdatedUsers">
 		<span><fa :icon="faCommentAlt"/> {{ $t('recently-updated-users') }}</span>
 	</mk-user-list>
 </div>
@@ -23,40 +23,26 @@ export default Vue.extend({
 
 	data() {
 		return {
-			verifiedUsers: [],
-			popularUsers: [],
-			recentlyUpdatedUsers: [],
+			verifiedUsers: () => this.$root.api('users', {
+				state: 'verified',
+				origin: 'local',
+				sort: '+follower',
+				limit: 10
+			}),
+			popularUsers: () => this.$root.api('users', {
+				state: 'alive',
+				origin: 'local',
+				sort: '+follower',
+				limit: 10
+			}),
+			recentlyUpdatedUsers: () => this.$root.api('users', {
+				origin: 'local',
+				sort: '+updatedAt',
+				limit: 10
+			}),
 			faBookmark, faChartLine, faCommentAlt
 		};
 	},
-
-	created() {
-		this.$root.api('users', {
-			state: 'verified',
-			origin: 'local',
-			sort: '+follower',
-			limit: 10
-		}).then(users => {
-			this.verifiedUsers = users;
-		});
-
-		this.$root.api('users', {
-			state: 'alive',
-			origin: 'local',
-			sort: '+follower',
-			limit: 10
-		}).then(users => {
-			this.popularUsers = users;
-		});
-
-		this.$root.api('users', {
-			origin: 'local',
-			sort: '+updatedAt',
-			limit: 10
-		}).then(users => {
-			this.recentlyUpdatedUsers = users;
-		});
-	}
 });
 </script>