From 1029bff5ff37d68eff1afeb8c5c918ece3105705 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Fri, 28 Dec 2018 01:01:58 +0900
Subject: [PATCH] Undo reaction with clicking minus (#3773)

* Undo reaction with clicking minus

* fix isMyNote
---
 locales/ja-JP.yml                                       | 2 ++
 src/client/app/common/scripts/note-mixin.ts             | 8 ++++++++
 src/client/app/desktop/views/components/note-detail.vue | 5 ++++-
 src/client/app/desktop/views/components/note.vue        | 5 ++++-
 src/client/app/mobile/views/components/note-detail.vue  | 5 ++++-
 src/client/app/mobile/views/components/note.vue         | 5 ++++-
 6 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index d8f2ed9bf..9bed18034 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -752,11 +752,13 @@ desktop/views/components/note-detail.vue:
   location: "位置情報"
   renote: "Renote"
   add-reaction: "リアクション"
+  undo-reaction: "リアクション解除"
 
 desktop/views/components/note.vue:
   reply: "返信"
   renote: "Renote"
   add-reaction: "リアクション"
+  undo-reaction: "リアクション解除"
   detail: "詳細"
   private: "この投稿は非公開です"
   deleted: "この投稿は削除されました"
diff --git a/src/client/app/common/scripts/note-mixin.ts b/src/client/app/common/scripts/note-mixin.ts
index 39e23f94e..76059fbb0 100644
--- a/src/client/app/common/scripts/note-mixin.ts
+++ b/src/client/app/common/scripts/note-mixin.ts
@@ -142,6 +142,14 @@ export default (opts: Opts = {}) => ({
 			});
 		},
 
+		undoReact(note) {
+			const oldReaction = note.myReaction;
+			if (!oldReaction) return;
+			this.$root.api('notes/reactions/delete', {
+				noteId: note.id
+			});
+		},
+
 		favorite() {
 			this.$root.api('notes/favorites/create', {
 				noteId: this.appearNote.id
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index d0a625bc1..f2d46a6ee 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -76,9 +76,12 @@
 			<button v-else class="inhibitedButton">
 				<fa icon="ban"/>
 			</button>
-			<button class="reactionButton" :class="{ reacted: appearNote.myReaction != null }" v-if="!isMyNote" @click="react()" ref="reactButton" :title="$t('add-reaction')">
+			<button v-if="!isMyNote && appearNote.myReaction == null" class="reactionButton" @click="react()" ref="reactButton" :title="$t('add-reaction')">
 				<fa icon="plus"/>
 			</button>
+			<button v-if="!isMyNote && appearNote.myReaction != null" class="reactionButton reacted" @click="undoReact(appearNote)" ref="reactButton" :title="$t('undo-reaction')">
+				<fa icon="minus"/>
+			</button>
 			<button @click="menu()" ref="menuButton">
 				<fa icon="ellipsis-h"/>
 			</button>
diff --git a/src/client/app/desktop/views/components/note.vue b/src/client/app/desktop/views/components/note.vue
index 2c8dccd49..9e3e8dfcb 100644
--- a/src/client/app/desktop/views/components/note.vue
+++ b/src/client/app/desktop/views/components/note.vue
@@ -53,9 +53,12 @@
 				<button v-else class="inhibitedButton">
 					<fa icon="ban"/>
 				</button>
-				<button class="reactionButton" :class="{ reacted: appearNote.myReaction != null }" v-if="!isMyNote" @click="react()" ref="reactButton" :title="$t('add-reaction')">
+				<button v-if="!isMyNote && appearNote.myReaction == null" class="reactionButton" @click="react()" ref="reactButton" :title="$t('add-reaction')">
 					<fa icon="plus"/>
 				</button>
+				<button v-if="!isMyNote && appearNote.myReaction != null" class="reactionButton reacted" @click="undoReact(appearNote)" ref="reactButton" :title="$t('undo-reaction')">
+					<fa icon="minus"/>
+				</button>
 				<button @click="menu()" ref="menuButton">
 					<fa icon="ellipsis-h"/>
 				</button>
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index e0ce26e19..05c770a59 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -72,9 +72,12 @@
 			<button v-else>
 				<fa icon="ban"/>
 			</button>
-			<button :class="{ reacted: appearNote.myReaction != null }" @click="react()" v-if="!isMyNote" ref="reactButton" :title="$t('title')">
+			<button v-if="!isMyNote && appearNote.myReaction == null" class="reactionButton" @click="react()" ref="reactButton">
 				<fa icon="plus"/>
 			</button>
+			<button v-if="!isMyNote && appearNote.myReaction != null" class="reactionButton reacted" @click="undoReact(appearNote)" ref="reactButton">
+				<fa icon="minus"/>
+			</button>
 			<button @click="menu()" ref="menuButton">
 				<fa icon="ellipsis-h"/>
 			</button>
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index c0f0f49d5..6c17d77cd 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -49,9 +49,12 @@
 				<button v-else>
 					<fa icon="ban"/>
 				</button>
-				<button :class="{ reacted: appearNote.myReaction != null }" @click="react()" v-if="!isMyNote" ref="reactButton">
+				<button v-if="!isMyNote && appearNote.myReaction == null" class="reactionButton" @click="react()" ref="reactButton">
 					<fa icon="plus"/>
 				</button>
+				<button v-if="!isMyNote && appearNote.myReaction != null" class="reactionButton reacted" @click="undoReact(appearNote)" ref="reactButton">
+					<fa icon="minus"/>
+				</button>
 				<button class="menu" @click="menu()" ref="menuButton">
 					<fa icon="ellipsis-h"/>
 				</button>