wip

src/web/app/mobile/views/components/index.ts

@@ -16,6 +16,8 @@ import friendsMaker from './friends-maker.vue';
 import notification from './notification.vue';
 import notifications from './notifications.vue';
 import notificationPreview from './notification-preview.vue';
+import usersList from './users-list.vue';
+import userPreview from './user-preview.vue';
 
 Vue.component('mk-ui', ui);
 Vue.component('mk-home', home);
@@ -33,3 +35,5 @@ Vue.component('mk-friends-maker', friendsMaker);
 Vue.component('mk-notification', notification);
 Vue.component('mk-notifications', notifications);
 Vue.component('mk-notification-preview', notificationPreview);
+Vue.component('mk-users-list', usersList);
+Vue.component('mk-user-preview', userPreview);

src/web/app/mobile/views/components/user-followers.vue

@@ -1,26 +0,0 @@
-<template>
-<mk-users-list
-	:fetch="fetch"
-	:count="user.followers_count"
-	:you-know-count="user.followers_you_know_count"
->
-	%i18n:mobile.tags.mk-user-followers.no-users%
-</mk-users-list>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['user'],
-	methods: {
-		fetch(iknow, limit, cursor, cb) {
-			(this as any).api('users/followers', {
-				user_id: this.user.id,
-				iknow: iknow,
-				limit: limit,
-				cursor: cursor ? cursor : undefined
-			}).then(cb);
-		}
-	}
-});
-</script>

src/web/app/mobile/views/components/user-following.vue

@@ -1,26 +0,0 @@
-<template>
-<mk-users-list
-	:fetch="fetch"
-	:count="user.following_count"
-	:you-know-count="user.following_you_know_count"
->
-	%i18n:mobile.tags.mk-user-following.no-users%
-</mk-users-list>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['user'],
-	methods: {
-		fetch(iknow, limit, cursor, cb) {
-			(this as any).api('users/following', {
-				user_id: this.user.id,
-				iknow: iknow,
-				limit: limit,
-				cursor: cursor ? cursor : undefined
-			}).then(cb);
-		}
-	}
-});
-</script>

src/web/app/mobile/views/components/user-preview.vue

@@ -1,11 +1,11 @@
 <template>
 <div class="mk-user-preview">
-	<a class="avatar-anchor" :href="`/${user.username}`">
+	<router-link class="avatar-anchor" :to="`/${user.username}`">
 		<img class="avatar" :src="`${user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
-	</a>
+	</router-link>
 	<div class="main">
 		<header>
-			<a class="name" :href="`/${user.username}`">{{ user.name }}</a>
+			<router-link class="name" :to="`/${user.username}`">{{ user.name }}</router-link>
 			<span class="username">@{{ user.username }}</span>
 		</header>
 		<div class="body">

src/web/app/mobile/views/components/users-list.vue

@@ -32,13 +32,18 @@ export default Vue.extend({
 			next: null
 		};
 	},
+	watch: {
+		mode() {
+			this._fetch();
+		}
+	},
 	mounted() {
 		this._fetch(() => {
 			this.$emit('loaded');
 		});
 	},
 	methods: {
-		_fetch(cb) {
+		_fetch(cb?) {
 			this.fetching = true;
 			this.fetch(this.mode == 'iknow', this.limit, null, obj => {
 				this.users = obj.users;