Refactoring

src/client/app/common/scripts/paging.ts

@@ -117,7 +117,7 @@ export default (opts) => ({
 				if (cancel) return;
 			}
 
-			if (this.isScrollTop()) {
+			if (this.isScrollTop == null || this.isScrollTop()) {
 				// Prepend the item
 				this.items.unshift(item);
 

src/client/app/desktop/views/components/notifications.vue

@@ -6,7 +6,7 @@
 		</template>
 	</div>
 
-	<div class="notifications" v-if="notifications.length != 0">
+	<div class="notifications" v-if="!empty">
 		<!-- トランジションを有効にするとなぜかメモリリークする -->
 		<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition" tag="div">
 			<template v-for="(notification, i) in _notifications">
@@ -125,17 +125,18 @@
 					</template>
 				</div>
 
-				<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
+				<p class="date" v-if="i != items.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
 					<span><fa icon="angle-up"/>{{ notification._datetext }}</span>
 					<span><fa icon="angle-down"/>{{ _notifications[i + 1]._datetext }}</span>
 				</p>
 			</template>
 		</component>
 	</div>
-	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
-		<template v-if="fetchingMoreNotifications"><fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreNotifications ? $t('@.loading') : $t('@.load-more') }}
+	<button class="more" :class="{ fetching: moreFetching }" v-if="more" @click="fetchMore" :disabled="moreFetching">
+		<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>{{ moreFetching ? $t('@.loading') : $t('@.load-more') }}
 	</button>
-	<p class="empty" v-if="notifications.length == 0 && !fetching">{{ $t('empty') }}</p>
+	<p class="empty" v-if="empty">{{ $t('empty') }}</p>
+	<mk-error v-if="error" @retry="init()"/>
 </div>
 </template>
 
@@ -143,23 +144,29 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import getNoteSummary from '../../../../../misc/get-note-summary';
+import paging from '../../../common/scripts/paging';
 
 export default Vue.extend({
 	i18n: i18n(),
+
+	mixins: [
+		paging({}),
+	],
+
 	data() {
 		return {
-			fetching: true,
-			fetchingMoreNotifications: false,
-			notifications: [],
-			moreNotifications: false,
 			connection: null,
-			getNoteSummary
+			getNoteSummary,
+			pagination: {
+				endpoint: 'i/notifications',
+				limit: 10,
+			}
 		};
 	},
 
 	computed: {
 		_notifications(): any[] {
-			return (this.notifications as any).map(notification => {
+			return (this.items as any).map(notification => {
 				const date = new Date(notification.createdAt).getDate();
 				const month = new Date(notification.createdAt).getMonth() + 1;
 				notification._date = date;
@@ -171,22 +178,7 @@ export default Vue.extend({
 
 	mounted() {
 		this.connection = this.$root.stream.useSharedConnection('main');
-
 		this.connection.on('notification', this.onNotification);
-
-		const max = 10;
-
-		this.$root.api('i/notifications', {
-			limit: max + 1
-		}).then(notifications => {
-			if (notifications.length == max + 1) {
-				this.moreNotifications = true;
-				notifications.pop();
-			}
-
-			this.notifications = notifications;
-			this.fetching = false;
-		});
 	},
 
 	beforeDestroy() {
@@ -194,33 +186,13 @@ export default Vue.extend({
 	},
 
 	methods: {
-		fetchMoreNotifications() {
-			this.fetchingMoreNotifications = true;
-
-			const max = 30;
-
-			this.$root.api('i/notifications', {
-				limit: max + 1,
-				untilId: this.notifications[this.notifications.length - 1].id
-			}).then(notifications => {
-				if (notifications.length == max + 1) {
-					this.moreNotifications = true;
-					notifications.pop();
-				} else {
-					this.moreNotifications = false;
-				}
-				this.notifications = this.notifications.concat(notifications);
-				this.fetchingMoreNotifications = false;
-			});
-		},
-
 		onNotification(notification) {
 			// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
 			this.$root.stream.send('readNotification', {
 				id: notification.id
 			});
 
-			this.notifications.unshift(notification);
+			this.prepend(notification);
 		}
 	}
 });