From 6a3d98fbc10dddb08bc624bb498ad6b979f6cdde Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sat, 20 Aug 2022 16:03:09 +0200
Subject: [PATCH] refactor: remove reaction-icon component

The removed component does not contain any special script or styling.
It's template only contains a MkEmoji. To remove this unnecessary
indirection, the components was replaced with the MkEmoji component.
---
 packages/client/src/components/notification.vue    |  7 ++++---
 packages/client/src/components/reaction-icon.vue   | 14 --------------
 .../client/src/components/reaction-tooltip.vue     |  3 +--
 .../src/components/reactions-viewer.details.vue    |  3 +--
 .../src/components/reactions-viewer.reaction.vue   |  3 +--
 packages/client/src/pages/user/reactions.vue       |  3 +--
 6 files changed, 8 insertions(+), 25 deletions(-)
 delete mode 100644 packages/client/src/components/reaction-icon.vue

diff --git a/packages/client/src/components/notification.vue b/packages/client/src/components/notification.vue
index bfd5fc227..c8b2da54f 100644
--- a/packages/client/src/components/notification.vue
+++ b/packages/client/src/components/notification.vue
@@ -16,11 +16,13 @@
 			<i v-else-if="notification.type === 'pollVote'" class="fas fa-poll-h"></i>
 			<i v-else-if="notification.type === 'pollEnded'" class="fas fa-poll-h"></i>
 			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
-			<XReactionIcon
+			<MkEmoji
 				v-else-if="notification.type === 'reaction'"
 				ref="reactionRef"
-				:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
+				:emoji="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
 				:custom-emojis="notification.note.emojis"
+				:is-reaction="true"
+				:normal="true"
 				:no-style="true"
 			/>
 		</div>
@@ -75,7 +77,6 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, watch } from 'vue';
 import * as misskey from 'misskey-js';
-import XReactionIcon from './reaction-icon.vue';
 import MkFollowButton from './follow-button.vue';
 import XReactionTooltip from './reaction-tooltip.vue';
 import { getNoteSummary } from '@/scripts/get-note-summary';
diff --git a/packages/client/src/components/reaction-icon.vue b/packages/client/src/components/reaction-icon.vue
deleted file mode 100644
index 9c91b174c..000000000
--- a/packages/client/src/components/reaction-icon.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-<MkEmoji :emoji="reaction" :custom-emojis="customEmojis" :is-reaction="true" :normal="true" :no-style="noStyle"/>
-</template>
-
-<script lang="ts" setup>
-
-withDefaults(defineProps<{
-	reaction: string;
-	customEmojis?: Record<string, any>[]; // TODO
-	noStyle?: boolean;
-}>(), {
-	customEmojis: [],
-});
-</script>
diff --git a/packages/client/src/components/reaction-tooltip.vue b/packages/client/src/components/reaction-tooltip.vue
index 0d50b8e5b..3fe29ebcf 100644
--- a/packages/client/src/components/reaction-tooltip.vue
+++ b/packages/client/src/components/reaction-tooltip.vue
@@ -1,7 +1,7 @@
 <template>
 <MkTooltip ref="tooltip" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
 	<div class="beeadbfb">
-		<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
+		<MkEmoji :emoji="reaction" :custom-emojis="emojis" :is-reaction="true" :normal="true" class="icon" :no-style="true"/>
 		<div class="name">{{ reaction.replace('@.', '') }}</div>
 	</div>
 </MkTooltip>
@@ -9,7 +9,6 @@
 
 <script lang="ts" setup>
 import MkTooltip from './ui/tooltip.vue';
-import XReactionIcon from './reaction-icon.vue';
 
 defineProps<{
 	reaction: string;
diff --git a/packages/client/src/components/reactions-viewer.details.vue b/packages/client/src/components/reactions-viewer.details.vue
index 06650e9f5..4b351769f 100644
--- a/packages/client/src/components/reactions-viewer.details.vue
+++ b/packages/client/src/components/reactions-viewer.details.vue
@@ -2,7 +2,7 @@
 <MkTooltip ref="tooltip" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
 	<div class="bqxuuuey">
 		<div class="reaction">
-			<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
+			<MkEmoji :emoji="reaction" :custom-emojis="emojis" class="icon" :is-reaction="true" :normal="true" :no-style="true"/>
 			<div class="name">{{ reaction.replace('@.', '') }}</div>
 		</div>
 		<div class="users">
@@ -18,7 +18,6 @@
 
 <script lang="ts" setup>
 import MkTooltip from './ui/tooltip.vue';
-import XReactionIcon from './reaction-icon.vue';
 
 defineProps<{
 	reaction: string;
diff --git a/packages/client/src/components/reactions-viewer.reaction.vue b/packages/client/src/components/reactions-viewer.reaction.vue
index c29bd4640..6e479855b 100644
--- a/packages/client/src/components/reactions-viewer.reaction.vue
+++ b/packages/client/src/components/reactions-viewer.reaction.vue
@@ -7,7 +7,7 @@
 	:class="{ reacted: note.myReaction == reaction, canToggle }"
 	@click="toggleReaction()"
 >
-	<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/>
+	<MkEmoji class="icon" :emoji="reaction" :custom-emojis="note.emojis" :is-reaction="true" :normal="true"/>
 	<span class="count">{{ count }}</span>
 </button>
 </template>
@@ -16,7 +16,6 @@
 import { computed, onMounted, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import XDetails from '@/components/reactions-viewer.details.vue';
-import XReactionIcon from '@/components/reaction-icon.vue';
 import * as os from '@/os';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { $i } from '@/account';
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index d2c1f92eb..a6c998db0 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -4,7 +4,7 @@
 		<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
 			<div class="header">
 				<MkAvatar class="avatar" :user="user"/>
-				<MkReactionIcon class="reaction" :reaction="item.type" :custom-emojis="item.note.emojis" :no-style="true"/>
+				<MkEmoji class="reaction" :emoji="item.type" :custom-emojis="item.note.emojis" :is-reaction="true" :normal="true" :no-style="true"/>
 				<MkTime :time="item.createdAt" class="createdAt"/>
 			</div>
 			<MkNote :key="item.id" :note="item.note"/>
@@ -18,7 +18,6 @@ import { computed } from 'vue';
 import * as misskey from 'misskey-js';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkNote from '@/components/note.vue';
-import MkReactionIcon from '@/components/reaction-icon.vue';
 
 const props = defineProps<{
 	user: misskey.entities.User;