From 6e3d34b900f81ccb6edd0f95a905bd23f966de9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?=
 <syuilotan@yahoo.co.jp>
Date: Wed, 7 Feb 2018 18:41:48 +0900
Subject: [PATCH] wip

---
 src/web/app/common/tags/reactions-viewer.vue | 80 +++++++++-----------
 1 file changed, 37 insertions(+), 43 deletions(-)

diff --git a/src/web/app/common/tags/reactions-viewer.vue b/src/web/app/common/tags/reactions-viewer.vue
index ad126ff1d..18002c972 100644
--- a/src/web/app/common/tags/reactions-viewer.vue
+++ b/src/web/app/common/tags/reactions-viewer.vue
@@ -1,55 +1,49 @@
 <template>
 <div>
 	<template v-if="reactions">
-		<span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{ reactions.like }</span></span>
-		<span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{ reactions.love }</span></span>
-		<span v-if="reactions.laugh"><mk-reaction-icon reaction='laugh'/><span>{ reactions.laugh }</span></span>
-		<span v-if="reactions.hmm"><mk-reaction-icon reaction='hmm'/><span>{ reactions.hmm }</span></span>
-		<span v-if="reactions.surprise"><mk-reaction-icon reaction='surprise'/><span>{ reactions.surprise }</span></span>
-		<span v-if="reactions.congrats"><mk-reaction-icon reaction='congrats'/><span>{ reactions.congrats }</span></span>
-		<span v-if="reactions.angry"><mk-reaction-icon reaction='angry'/><span>{ reactions.angry }</span></span>
-		<span v-if="reactions.confused"><mk-reaction-icon reaction='confused'/><span>{ reactions.confused }</span></span>
-		<span v-if="reactions.pudding"><mk-reaction-icon reaction='pudding'/><span>{ reactions.pudding }</span></span>
+		<span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{{ reactions.like }}</span></span>
+		<span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{{ reactions.love }}</span></span>
+		<span v-if="reactions.laugh"><mk-reaction-icon reaction='laugh'/><span>{{ reactions.laugh }}</span></span>
+		<span v-if="reactions.hmm"><mk-reaction-icon reaction='hmm'/><span>{{ reactions.hmm }}</span></span>
+		<span v-if="reactions.surprise"><mk-reaction-icon reaction='surprise'/><span>{{ reactions.surprise }}</span></span>
+		<span v-if="reactions.congrats"><mk-reaction-icon reaction='congrats'/><span>{{ reactions.congrats }}</span></span>
+		<span v-if="reactions.angry"><mk-reaction-icon reaction='angry'/><span>{{ reactions.angry }}</span></span>
+		<span v-if="reactions.confused"><mk-reaction-icon reaction='confused'/><span>{{ reactions.confused }}</span></span>
+		<span v-if="reactions.pudding"><mk-reaction-icon reaction='pudding'/><span>{{ reactions.pudding }}</span></span>
 	</template>
 </div>
 </template>
 
+<script>
+	export default {
+		props: ['post'],
+		computed: {
+			reactions: function() {
+				return this.post.reaction_counts;
+			}
+		}
+	};
+</script>
 
-<mk-reactions-viewer>
-	<virtual v-if="reactions">
-		
-	</virtual>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			border-top dashed 1px #eee
-			border-bottom dashed 1px #eee
-			margin 4px 0
+<style lang="stylus" scoped>
+	:scope
+		display block
+		border-top dashed 1px #eee
+		border-bottom dashed 1px #eee
+		margin 4px 0
 
-			&:empty
-				display none
+		&:empty
+			display none
+
+		> span
+			margin-right 8px
+
+			> mk-reaction-icon
+				font-size 1.4em
 
 			> span
-				margin-right 8px
+				margin-left 4px
+				font-size 1.2em
+				color #444
 
-				> mk-reaction-icon
-					font-size 1.4em
-
-				> span
-					margin-left 4px
-					font-size 1.2em
-					color #444
-
-	</style>
-	<script>
-		this.post = this.opts.post;
-
-		this.on('mount', () => {
-			this.update();
-		});
-
-		this.on('update', () => {
-			this.reactions = this.post.reaction_counts;
-		});
-	</script>
-</mk-reactions-viewer>
+</style>