通知が破損していても表示できるように

mei23 · Aug 9, 2019 · 60294c9 · 60294c9
1 parent cb7701b
commit 60294c9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/src/client/app/common/views/deck/deck.notifications.vue b/src/client/app/common/views/deck/deck.notifications.vue
@@ -9,8 +9,8 @@
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
 	<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'">
+			<x-notification v-if="notification" class="notification" :notification="notification" :key="notification.id"/>
+			<p class="date" v-if="i != notifications.length - 1 && notification && _notifications[i + 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>
@@ -53,6 +53,7 @@ export default Vue.extend({
 	computed: {
 		_notifications(): any[] {
 			return (this.notifications as any).map(notification => {
+				if (notification == null) return null;
 				const date = new Date(notification.createdAt).getDate();
 				const month = new Date(notification.createdAt).getMonth() + 1;
 				notification._date = date;
@@ -104,9 +105,11 @@ export default Vue.extend({
 
 			const max = 20;
 
+			const last = this.notifications.filter(x => x).pop();
+
 			this.$root.api('i/notifications', {
 				limit: max + 1,
-				untilId: this.notifications[this.notifications.length - 1].id
+				untilId: last.id
 			}).then(notifications => {
 				if (notifications.length == max + 1) {
 					this.moreNotifications = true;

diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
@@ -10,7 +10,7 @@
 		<!-- トランジションを有効にするとなぜかメモリリークする -->
 		<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition" tag="div">
 			<template v-for="(notification, i) in _notifications">
-				<div class="notification" :class="notification.type" :key="notification.id">
+				<div v-if="notification" class="notification" :class="notification.type" :key="notification.id">
 					<mk-time :time="notification.createdAt"/>
 
 					<template v-if="notification.type == 'reaction'">
@@ -139,7 +139,7 @@
 					</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 != notifications.length - 1 && notification && _notifications[i + 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>
@@ -178,6 +178,7 @@ export default Vue.extend({
 	computed: {
 		_notifications(): any[] {
 			return (this.notifications as any).map(notification => {
+				if (notification == null) return null;
 				const date = new Date(notification.createdAt).getDate();
 				const month = new Date(notification.createdAt).getMonth() + 1;
 				notification._date = date;
@@ -217,9 +218,11 @@ export default Vue.extend({
 
 			const max = 30;
 
+			const last = this.notifications.filter(x => x).pop();
+
 			this.$root.api('i/notifications', {
 				limit: max + 1,
-				untilId: this.notifications[this.notifications.length - 1].id
+				untilId: last.id
 			}).then(notifications => {
 				if (notifications.length == max + 1) {
 					this.moreNotifications = true;

diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
@@ -9,8 +9,8 @@
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
 	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications" tag="div">
 		<template v-for="(notification, i) in _notifications">
-			<mk-notification :notification="notification" :key="notification.id"/>
-			<p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
+			<mk-notification v-if="notification" :notification="notification" :key="notification.id"/>
+			<p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification && _notifications[i + 1] && notification._date != _notifications[i + 1]._date">
 				<span><fa icon="angle-up"/>{{ notification._datetext }}</span>
 				<span><fa icon="angle-down"/>{{ _notifications[i + 1]._datetext }}</span>
 			</p>
@@ -45,6 +45,7 @@ export default Vue.extend({
 	computed: {
 		_notifications(): any[] {
 			return (this.notifications as any).map(notification => {
+				if (notification == null) return null;
 				const date = new Date(notification.createdAt).getDate();
 				const month = new Date(notification.createdAt).getMonth() + 1;
 				notification._date = date;
@@ -90,9 +91,11 @@ export default Vue.extend({
 
 			const max = 30;
 
+			const last = this.notifications.filter(x => x).pop();
+
 			this.$root.api('i/notifications', {
 				limit: max + 1,
-				untilId: this.notifications[this.notifications.length - 1].id
+				untilId: last.id
 			}).then(notifications => {
 				if (notifications.length == max + 1) {
 					this.moreNotifications = true;