diff --git a/src/client/app/common/scripts/paging.ts b/src/client/app/common/scripts/paging.ts index 458ee7e5c..4875ce620 100644 --- a/src/client/app/common/scripts/paging.ts +++ b/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); diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue index 0bf013292..9ca06f411 100644 --- a/src/client/app/desktop/views/components/notifications.vue +++ b/src/client/app/desktop/views/components/notifications.vue @@ -6,7 +6,7 @@ -
+
-

+

{{ notification._datetext }} {{ _notifications[i + 1]._datetext }}

- -

{{ $t('empty') }}

+

{{ $t('empty') }}

+ @@ -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); } } });