From 576a87118c18c9354f35ee3cb207d5e6bccdba91 Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Thu, 21 Dec 2023 16:00:59 +0000
Subject: [PATCH] real-time update: adjust replyCount up/down

this also fixes the connecting lines in the Sk-style view

thanks @ShittyKopper for reporting the bug!

NOTE: at this point, the `isDeletedRef` boolean is pretty much
useless, because we're directly removing deleted notes from the
`replies` array and therefore from the DOM (we were just hiding them,
before); I'm intentionally not touching `isDeletedRef` to simplify
merges from upstream
---
 .../frontend/src/components/MkNoteDetailed.vue    | 13 +++++++++++--
 packages/frontend/src/components/MkNoteSub.vue    | 15 +++++++++++++--
 .../frontend/src/components/SkNoteDetailed.vue    | 13 +++++++++++--
 packages/frontend/src/components/SkNoteSub.vue    | 15 +++++++++++++--
 packages/frontend/src/scripts/use-note-capture.ts |  7 +++++--
 5 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index ae9d8a0d6b..1ff05fd318 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -170,7 +170,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-if="!repliesLoaded" style="padding: 16px">
 				<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
 			</div>
-			<MkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws"/>
+			<MkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" />
 		</div>
 		<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
 			<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@@ -372,8 +372,17 @@ const reactionsPagination = computed(() => ({
 	},
 }));
 
-async function addReplyTo(note, replyNote: Misskey.entities.Note) {
+async function addReplyTo(replyNote: Misskey.entities.Note) {
 		replies.value.unshift(replyNote);
+		appearNote.repliesCount += 1;
+}
+
+async function removeReply(id: Misskey.entities.Note['id']) {
+		const replyIdx = replies.value.findIndex(note => note.id === id);
+		if (replyIdx >= 0) {
+			replies.value.splice(replyIdx, 1);
+			appearNote.repliesCount -= 1;
+		}
 }
 
 useNoteCapture({
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index fd8904f3c2..d1e45b30bb 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -65,7 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</div>
 	<template v-if="depth < numberOfReplies">
-		<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="$style.reply" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws"/>
+		<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="$style.reply" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
 	</template>
 	<div v-else :class="$style.more">
 		<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
@@ -110,6 +110,7 @@ const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
 	detail?: boolean;
 	expandAllCws?: boolean;
+	onDeleteCallback?: (id: Misskey.entities.Note['id']) => void;
 
 	// how many notes are in between this one and the note being viewed in detail
 	depth?: number;
@@ -141,8 +142,17 @@ const isRenote = (
 	props.note.poll == null
 );
 
-async function addReplyTo(note, replyNote: Misskey.entities.Note) {
+async function addReplyTo(replyNote: Misskey.entities.Note) {
 		replies.value.unshift(replyNote);
+		appearNote.repliesCount += 1;
+}
+
+async function removeReply(id: Misskey.entities.Note['id']) {
+		const replyIdx = replies.value.findIndex(note => note.id === id);
+		if (replyIdx >= 0) {
+			replies.value.splice(replyIdx, 1);
+			appearNote.repliesCount -= 1;
+		}
 }
 
 useNoteCapture({
@@ -151,6 +161,7 @@ useNoteCapture({
 	isDeletedRef: isDeleted,
 	// only update replies if we are, in fact, showing replies
 	onReplyCallback: props.detail && props.depth < numberOfReplies.value ? addReplyTo : undefined,
+	onDeleteCallback: props.detail && props.depth < numberOfReplies.value ? props.onDeleteCallback : undefined,
 });
 
 if ($i) {
diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index ff2058d79f..06783f7fff 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -178,7 +178,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-if="!repliesLoaded" style="padding: 16px">
 				<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
 			</div>
-			<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws"/>
+			<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" />
 		</div>
 		<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
 			<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@@ -380,8 +380,17 @@ const reactionsPagination = computed(() => ({
 	},
 }));
 
-async function addReplyTo(note, replyNote: Misskey.entities.Note) {
+async function addReplyTo(replyNote: Misskey.entities.Note) {
 		replies.value.unshift(replyNote);
+		appearNote.repliesCount += 1;
+}
+
+async function removeReply(id: Misskey.entities.Note['id']) {
+		const replyIdx = replies.value.findIndex(note => note.id === id);
+		if (replyIdx >= 0) {
+			replies.value.splice(replyIdx, 1);
+			appearNote.repliesCount -= 1;
+		}
 }
 
 useNoteCapture({
diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index b6e0cd4b35..bee4074bd0 100644
--- a/packages/frontend/src/components/SkNoteSub.vue
+++ b/packages/frontend/src/components/SkNoteSub.vue
@@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</div>
 	<template v-if="depth < numberOfReplies">
-		<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws"/>
+		<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
 	</template>
 	<div v-else :class="$style.more">
 		<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
@@ -119,6 +119,7 @@ const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
 	detail?: boolean;
 	expandAllCws?: boolean;
+	onDeleteCallback?: (id: Misskey.entities.Note['id']) => void;
 
 	// how many notes are in between this one and the note being viewed in detail
 	depth?: number;
@@ -150,8 +151,17 @@ const isRenote = (
 	props.note.poll == null
 );
 
-async function addReplyTo(note, replyNote: Misskey.entities.Note) {
+async function addReplyTo(replyNote: Misskey.entities.Note) {
 		replies.value.unshift(replyNote);
+		appearNote.repliesCount += 1;
+}
+
+async function removeReply(id: Misskey.entities.Note['id']) {
+		const replyIdx = replies.value.findIndex(note => note.id === id);
+		if (replyIdx >= 0) {
+			replies.value.splice(replyIdx, 1);
+			appearNote.repliesCount -= 1;
+		}
 }
 
 useNoteCapture({
@@ -160,6 +170,7 @@ useNoteCapture({
 	isDeletedRef: isDeleted,
 	// only update replies if we are, in fact, showing replies
 	onReplyCallback: props.detail && props.depth < numberOfReplies.value ? addReplyTo : undefined,
+	onDeleteCallback: props.detail && props.depth < numberOfReplies.value ? props.onDeleteCallback : undefined,
 });
 
 if ($i) {
diff --git a/packages/frontend/src/scripts/use-note-capture.ts b/packages/frontend/src/scripts/use-note-capture.ts
index 8692d056b0..427bc6ff36 100644
--- a/packages/frontend/src/scripts/use-note-capture.ts
+++ b/packages/frontend/src/scripts/use-note-capture.ts
@@ -14,7 +14,8 @@ export function useNoteCapture(props: {
 	note: Ref<Misskey.entities.Note>;
 	pureNote: Ref<Misskey.entities.Note>;
 	isDeletedRef: Ref<boolean>;
-	onReplyCallback: (note, replyNote: Misskey.entities.Note) => void | undefined;
+	onReplyCallback: (replyNote: Misskey.entities.Note) => void | undefined;
+	onDeleteCallback: (id: Misskey.entities.Note['id']) => void | undefined;
 }) {
 	const note = props.note;
 	const pureNote = props.pureNote !== undefined ? props.pureNote : props.note;
@@ -33,7 +34,7 @@ export function useNoteCapture(props: {
 					noteId: body.id,
 				});
 
-				await props.onReplyCallback(pureNote, replyNote);
+				await props.onReplyCallback(replyNote);
 				break;
 			}
 
@@ -88,6 +89,8 @@ export function useNoteCapture(props: {
 
 			case 'deleted': {
 				props.isDeletedRef.value = true;
+
+				if (props.onDeleteCallback) await props.onDeleteCallback(id);
 				break;
 			}