Undo reaction with clicking minus (#3773)

* Undo reaction with clicking minus

* fix isMyNote

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: "この投稿は削除されました"

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

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>

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>

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>

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>