fix(frontend): 削除して編集の削除タイミングを投稿後になるように #14498 (#15545)

* fix #14498

- 「削除して編集」の削除タイミングを投稿したタイミングへ変更

* update CHANGELOG.md

* 指摘対応

- InitialNoteがあれば必ず削除するべきものでもないため、投稿後にノートを削除するフラグをプロパティに追加

* 指摘対応のミス修正

- フラグを条件に追加
- 実績のdateが数値になってなかった点を修正

---------

Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>

CHANGELOG.md

@@ -5,7 +5,7 @@
 - Fix: システムアカウントが削除できる問題を修正
 
 ### Client
--
+- Fix: 削除して編集の削除タイミングを投稿後になるように `#14498`
 
 ### Server
 - Fix: 特定のケースでActivityPubの処理がデッドロックになることがあるのを修正

packages/frontend/src/components/MkPostForm.vue

@@ -67,7 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
 	<div v-show="useCw" :class="$style.cwOuter">
 		<input ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown" @keyup="onKeyup" @compositionend="onCompositionEnd">
-		<div v-if="maxCwTextLength - cwTextLength < 20" :class="['_acrylic', $style.cwTextCount, { [$style.cwTextOver]: cwTextLength > maxCwTextLength }]">{{ maxCwTextLength - cwTextLength }}</div>		
+		<div v-if="maxCwTextLength - cwTextLength < 20" :class="['_acrylic', $style.cwTextCount, { [$style.cwTextOver]: cwTextLength > maxCwTextLength }]">{{ maxCwTextLength - cwTextLength }}</div>
 	</div>
 	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
 		<div v-if="channel" :class="$style.colorBar" :style="{ background: channel.color }"></div>
@@ -104,18 +104,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { inject, watch, nextTick, onMounted, defineAsyncComponent, provide, shallowRef, ref, computed } from 'vue';
-import type { ShallowRef } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { toASCII } from 'punycode.js';
 import { host, url } from '@@/js/config.js';
+import type { ShallowRef } from 'vue';
 import type { PostFormProps } from '@/types/post-form.js';
-import MkNoteSimple from '@/components/MkNoteSimple.vue';
+import type { PollEditorModelValue } from '@/components/MkPollEditor.vue';
 import MkNotePreview from '@/components/MkNotePreview.vue';
 import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
 import MkPollEditor from '@/components/MkPollEditor.vue';
-import type { PollEditorModelValue } from '@/components/MkPollEditor.vue';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
 import { erase, unique } from '@/scripts/array.js';
 import { extractMentions } from '@/scripts/extract-mentions.js';
 import { formatTimeString } from '@/scripts/format-time-string.js';
@@ -150,6 +150,7 @@ const props = withDefaults(defineProps<PostFormProps & {
 	autofocus: true,
 	mock: false,
 	initialLocalOnly: undefined,
+	deleteInitialNoteAfterPost: false,
 });
 
 provide('mock', props.mock);
@@ -845,6 +846,12 @@ async function post(ev?: MouseEvent) {
 			clear();
 		}
 		nextTick(() => {
+			// 削除して編集の対象ノートを削除
+			if (props.initialNote && props.deleteInitialNoteAfterPost) {
+				misskeyApi('notes/delete', {
+					noteId: props.initialNote.id,
+				});
+			}
 			deleteDraft();
 			emit('posted');
 			if (postData.text && postData.text !== '') {
@@ -896,6 +903,11 @@ async function post(ev?: MouseEvent) {
 			if (m === 0 && s === 0) {
 				claimAchievement('postedAt0min0sec');
 			}
+			if (props.initialNote && props.deleteInitialNoteAfterPost) {
+				if (date.getTime() - new Date(props.initialNote.createdAt).getTime() < 1000 * 60 && props.initialNote.userId === $i.id) {
+					claimAchievement('noteDeletedWithin1min');
+				}
+			}
 		});
 	}).catch(err => {
 		posting.value = false;

packages/frontend/src/scripts/get-note-menu.ts

@@ -4,10 +4,10 @@
  */
 
 import { defineAsyncComponent } from 'vue';
-import type { Ref, ShallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import { url } from '@@/js/config.js';
 import { claimAchievement } from './achievements.js';
+import type { Ref, ShallowRef } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
@@ -208,15 +208,7 @@ export function getNoteMenu(props: {
 		}).then(({ canceled }) => {
 			if (canceled) return;
 
-			misskeyApi('notes/delete', {
-				noteId: appearNote.id,
-			});
-
-			os.post({ initialNote: appearNote, renote: appearNote.renote, reply: appearNote.reply, channel: appearNote.channel });
-
-			if (Date.now() - new Date(appearNote.createdAt).getTime() < 1000 * 60 && appearNote.userId === $i.id) {
-				claimAchievement('noteDeletedWithin1min');
-			}
+			os.post({ initialNote: appearNote, renote: appearNote.renote, reply: appearNote.reply, channel: appearNote.channel, deleteInitialNoteAfterPost: true });
 		});
 	}
 

packages/frontend/src/types/post-form.ts

@@ -19,4 +19,5 @@ export interface PostFormProps {
 	initialVisibleUsers?: Misskey.entities.UserDetailed[];
 	initialNote?: Misskey.entities.Note;
 	instant?: boolean;
+	deleteInitialNoteAfterPost?: boolean;
 };