Feat(Frontend): リアクションミュート周りの仕様を変更

Type4ny-Project · Jul 20, 2024 · 8056f82 · 8056f82
1 parent 1502bc6
commit 8056f82
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -73,7 +73,8 @@ function getReactionName(reaction: string, formated = false) {
 async function toggleReaction() {
 	if (!canToggle.value) return;
 
-	const oldReaction = props.note.myReactions.includes(props.reaction) ? props.reaction : null;
+	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+	const oldReaction = props.note.myReactions?.includes(props.reaction) ? props.reaction : null;
 	if (oldReaction) {
 		const confirm = await os.confirm({
 			type: 'warning',
@@ -94,7 +95,7 @@ async function toggleReaction() {
 			noteId: props.note.id,
 			reaction: oldReaction,
 		}).then(() => {
-			if (oldReaction !== props.reaction ) {
+			if (oldReaction !== props.reaction && oldReaction !== '🚮' && props.reaction !== '🚮') {
 				misskeyApi('notes/reactions/create', {
 					noteId: props.note.id,
 					reaction: props.reaction,

diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -47,7 +47,6 @@ if (props.note.myReaction && !Object.keys(reactions.value).includes(props.note.m
 	reactions.value[props.note.myReaction] = props.note.reactions[props.note.myReaction];
 }
 
-
 function onMockToggleReaction(emoji: string, count: number) {
 	if (!mock) return;
 
@@ -56,12 +55,15 @@ function onMockToggleReaction(emoji: string, count: number) {
 
 	emit('mockUpdateMyReaction', emoji, (count - reactions.value[i][1]));
 }
-if ($i && reactions.value){
 
-	reactions.value = reactions.value.filter(([reactionType]) =>{
-		if (reactionType === props.note.myReaction) return true;
-		if (!($i.mutedReactions.flat()).includes(reactionType)) return true;
-	} );
+if ($i && reactions.value) {
+	reactions.value = reactions.value.map(([reactionType, count]) => {
+		if (reactionType === props.note.myReaction || !($i.mutedReactions.flat()).includes(reactionType)) {
+			return [reactionType, count];
+		} else {
+			return ['🚮', count];
+		}
+	});
 }
 watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumber]) => {
 	let newReactions: [string, number][] = [];
@@ -86,11 +88,14 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
 	if (props.note.myReaction && !newReactions.map(([x]) => x).includes(props.note.myReaction)) {
 		newReactions.push([props.note.myReaction, newSource[props.note.myReaction]]);
 	}
-	if ($i){
-		reactions.value = newReactions.filter(([reactionType]) =>{
-			if (reactionType === props.note.myReaction) return true;
-			if (!($i.mutedReactions.flat()).includes(reactionType)) return true;
-		} );
+	if ($i) {
+		reactions.value = newReactions.map(([reactionType, count]) => {
+			if (reactionType === props.note.myReaction || !($i.mutedReactions.flat()).includes(reactionType)) {
+				return [reactionType, count];
+			} else {
+				return ['🚮️', count];
+			}
+		});
 	} else {
 		reactions.value = newReactions;
 	}