#359

locales/en.yml

@@ -236,6 +236,9 @@ desktop:
       add-reaction: "Add your reaction"
       detail: "Show detail"
 
+    mk-notifications:
+      more: "More"
+
     mk-notifications-home-widget:
       title: "Notifications"
       settings: "Notification settings"
@@ -356,6 +359,7 @@ mobile:
       empty-timeline: "There is no posts"
 
     mk-notifications:
+      more: "More"
       empty: "No notifications"
 
     mk-post-detail:

locales/ja.yml

@@ -236,6 +236,9 @@ desktop:
       add-reaction: "リアクション"
       detail: "詳細"
 
+    mk-notifications:
+      more: "もっと見る"
+
     mk-notifications-home-widget:
       title: "通知"
       settings: "通知の設定"
@@ -356,6 +359,7 @@ mobile:
       empty-timeline: "表示する投稿がありません。誰かしらをフォローするなどしましょう。"
 
     mk-notifications:
+      more: "もっと見る"
       empty: "ありません！"
 
     mk-post-detail:

src/web/app/desktop/tags/notifications.tag

@@ -63,8 +63,11 @@
 			<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
 		</virtual>
 	</div>
+	<button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
+		{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
+	</button>
 	<p class="empty" if={ notifications.length == 0 && !loading }>ありません！</p>
-	<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます<mk-ellipsis/></p>
+	<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
 	<style>
 		:scope
 			display block
@@ -168,6 +171,12 @@
 					i
 						margin-right 8px
 
+			> .more
+				display block
+				width 100%
+				padding 16px
+				color #555
+
 			> .empty
 				margin 0
 				padding 16px
@@ -197,7 +206,16 @@
 		this.loading = true;
 
 		this.on('mount', () => {
-			this.api('i/notifications').then(notifications => {
+			const max = 10;
+
+			this.api('i/notifications', {
+				limit: max + 1
+			}).then(notifications => {
+				if (notifications.length == max + 1) {
+					this.moreNotifications = true;
+					notifications.pop();
+				}
+
 				this.update({
 					loading: false,
 					notifications: notifications
@@ -211,11 +229,6 @@
 			this.stream.off('notification', this.onNotification);
 		});
 
-		this.onNotification = notification => {
-			this.notifications.unshift(notification);
-			this.update();
-		};
-
 		this.on('update', () => {
 			this.notifications.forEach(notification => {
 				const date = new Date(notification.created_at).getDate();
@@ -224,5 +237,35 @@
 				notification._datetext = `${month}月 ${date}日`;
 			});
 		});
+
+		this.onNotification = notification => {
+			this.notifications.unshift(notification);
+			this.update();
+		};
+
+		this.fetchMoreNotifications = () => {
+			this.update({
+				fetchingMoreNotifications: true
+			});
+
+			const max = 30;
+
+			this.api('i/notifications', {
+				folder_id: this.folder ? this.folder.id : null,
+				limit: max + 1,
+				max_id: this.notifications[this.notifications.length - 1]._id
+			}).then(notifications => {
+				if (notifications.length == max + 1) {
+					this.moreNotifications = true;
+					notifications.pop();
+				} else {
+					this.moreNotifications = false;
+				}
+				this.update({
+					notifications: this.notifications.concat(notifications),
+					fetchingMoreNotifications: false
+				});
+			});
+		};
 	</script>
 </mk-notifications>

src/web/app/mobile/tags/notifications.tag

@@ -5,6 +5,9 @@
 			<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
 		</virtual>
 	</div>
+	<button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
+		{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }
+	</button>
 	<p class="empty" if={ notifications.length == 0 && !loading }>%i18n:mobile.tags.mk-notifications.empty%</p>
 	<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
 	<style>
@@ -38,6 +41,12 @@
 					i
 						margin-right 8px
 
+			> .more
+				display block
+				width 100%
+				padding 16px
+				color #555
+
 			> .empty
 				margin 0
 				padding 16px
@@ -65,7 +74,16 @@
 		this.loading = true;
 
 		this.on('mount', () => {
-			this.api('i/notifications').then(notifications => {
+			const max = 10;
+
+			this.api('i/notifications', {
+				limit: max + 1
+			}).then(notifications => {
+				if (notifications.length == max + 1) {
+					this.moreNotifications = true;
+					notifications.pop();
+				}
+
 				this.update({
 					loading: false,
 					notifications: notifications
@@ -81,11 +99,6 @@
 			this.stream.off('notification', this.onNotification);
 		});
 
-		this.onNotification = notification => {
-			this.notifications.unshift(notification);
-			this.update();
-		};
-
 		this.on('update', () => {
 			this.notifications.forEach(notification => {
 				const date = new Date(notification.created_at).getDate();
@@ -94,5 +107,35 @@
 				notification._datetext = `${month}月 ${date}日`;
 			});
 		});
+
+		this.onNotification = notification => {
+			this.notifications.unshift(notification);
+			this.update();
+		};
+
+		this.fetchMoreNotifications = () => {
+			this.update({
+				fetchingMoreNotifications: true
+			});
+
+			const max = 30;
+
+			this.api('i/notifications', {
+				folder_id: this.folder ? this.folder.id : null,
+				limit: max + 1,
+				max_id: this.notifications[this.notifications.length - 1]._id
+			}).then(notifications => {
+				if (notifications.length == max + 1) {
+					this.moreNotifications = true;
+					notifications.pop();
+				} else {
+					this.moreNotifications = false;
+				}
+				this.update({
+					notifications: this.notifications.concat(notifications),
+					fetchingMoreNotifications: false
+				});
+			});
+		};
 	</script>
 </mk-notifications>