Refactore

src/client/app/common/views/deck/deck.notifications.vue

@@ -10,16 +10,17 @@
 	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications" tag="div">
 		<template v-for="(notification, i) in _notifications">
 			<x-notification class="notification" :notification="notification" :key="notification.id"/>
-			<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>
-	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
+	<button class="more" :class="{ fetching: moreFetching }" v-if="more" @click="fetchMoreNotifications" :disabled="moreFetching">
-		<template v-if="fetchingMoreNotifications"><fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreNotifications ? this.$t('@.loading') : this.$t('@.load-more') }}
+		<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>{{ moreFetching ? this.$t('@.loading') : this.$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>
 
@@ -27,31 +28,37 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import XNotification from './deck.notification.vue';
-
+import paging from '../../../common/scripts/paging';
-const displayLimit = 20;
 
 export default Vue.extend({
 	i18n: i18n(),
+
 	components: {
 		XNotification
 	},
 
 	inject: ['column', 'isScrollTop', 'count'],
 
+	mixins: [
+		paging({}),
+	],
+
 	data() {
 		return {
-			fetching: true,
+			connection: null,
-			fetchingMoreNotifications: false,
+			pagination: {
-			notifications: [],
+				endpoint: 'i/notifications',
-			queue: [],
+				limit: 20,
-			moreNotifications: false,
+				onQueueChanged: (self, q) => {
-			connection: null
+					self.count(q.length);
+				},
+			}
 		};
 	},
 
 	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;
@@ -61,33 +68,12 @@ export default Vue.extend({
 		}
 	},
 
-	watch: {
-		queue(q) {
-			this.count(q.length);
-		}
-	},
-
 	mounted() {
 		this.connection = this.$root.stream.useSharedConnection('main');
-
 		this.connection.on('notification', this.onNotification);
 
 		this.column.$on('top', this.onTop);
 		this.column.$on('bottom', this.onBottom);
-
-		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() {
@@ -98,26 +84,6 @@ export default Vue.extend({
 	},
 
 	methods: {
-		fetchMoreNotifications() {
-			this.fetchingMoreNotifications = true;
-
-			const max = 20;
-
-			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', {
@@ -126,35 +92,6 @@ export default Vue.extend({
 
 			this.prepend(notification);
 		},
-
-		prepend(notification) {
-			if (this.isScrollTop()) {
-				// Prepend the notification
-				this.notifications.unshift(notification);
-
-				// オーバーフローしたら古い通知は捨てる
-				if (this.notifications.length >= displayLimit) {
-					this.notifications = this.notifications.slice(0, displayLimit);
-				}
-			} else {
-				this.queue.push(notification);
-			}
-		},
-
-		releaseQueue() {
-			for (const n of this.queue) {
-				this.prepend(n);
-			}
-			this.queue = [];
-		},
-
-		onTop() {
-			this.releaseQueue();
-		},
-
-		onBottom() {
-			this.fetchMoreNotifications();
-		}
 	}
 });
 </script>