fix(frontend): フォロー申請のキャンセル時に確認ダイアログを出すように (#16834)

* fix(frontend): フォロー申請のキャンセル時に確認ダイアログを出すように

* Update Changelog

* fix: 注釈は書かない

CHANGELOG.md

@@ -15,6 +15,7 @@
 - Fix: 投稿フォームのリセットボタンで注釈がリセットされない問題を修正
 - Fix: PlayのAiScriptバージョン判定（v0.x系・v1.x系の判定）が正しく動作しない問題を修正  
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/1129)
+- Fix: フォロー申請をキャンセルする際の確認ダイアログの文言が不正確な問題を修正
 
 ### Server
 - Enhance: `clips/my-favorites` APIがページネーションに対応しました

locales/index.d.ts

@@ -350,6 +350,14 @@ export interface Locale extends ILocale {
      * {name}のフォローを解除しますか？
      */
     "unfollowConfirm": ParameterizedString<"name">;
+    /**
+     * {name}へのフォロー申請をキャンセルしますか？
+     */
+    "cancelFollowRequestConfirm": ParameterizedString<"name">;
+    /**
+     * {name}からのフォロー申請を拒否しますか？
+     */
+    "rejectFollowRequestConfirm": ParameterizedString<"name">;
     /**
      * エクスポートをリクエストしました。これには時間がかかる場合があります。エクスポートが終わると、「ドライブ」に追加されます。
      */

locales/ja-JP.yml

@@ -83,6 +83,8 @@ files: "ファイル"
 download: "ダウンロード"
 driveFileDeleteConfirm: "ファイル「{name}」を削除しますか？このファイルを使用した一部のコンテンツも削除されます。"
 unfollowConfirm: "{name}のフォローを解除しますか？"
+cancelFollowRequestConfirm: "{name}へのフォロー申請をキャンセルしますか？"
+rejectFollowRequestConfirm: "{name}からのフォロー申請を拒否しますか？"
 exportRequested: "エクスポートをリクエストしました。これには時間がかかる場合があります。エクスポートが終わると、「ドライブ」に追加されます。"
 importRequested: "インポートをリクエストしました。これには時間がかかる場合があります。"
 lists: "リスト"

packages/frontend/src/components/MkFollowButton.vue

@@ -102,6 +102,21 @@ async function onClick() {
 			await misskeyApi('following/delete', {
 				userId: props.user.id,
 			});
+		} else if (hasPendingFollowRequestFromYou.value) {
+			const { canceled } = await os.confirm({
+				type: 'question',
+				text: i18n.tsx.cancelFollowRequestConfirm({ name: props.user.name || props.user.username }),
+			});
+
+			if (canceled) {
+				wait.value = false;
+				return;
+			}
+
+			await misskeyApi('following/requests/cancel', {
+				userId: props.user.id,
+			});
+			hasPendingFollowRequestFromYou.value = false;
 		} else {
 			if (prefer.s.alwaysConfirmFollow) {
 				const { canceled } = await os.confirm({
@@ -115,41 +130,34 @@ async function onClick() {
 				}
 			}
 
-			if (hasPendingFollowRequestFromYou.value) {
+			await misskeyApi('following/create', {
-				await misskeyApi('following/requests/cancel', {
+				userId: props.user.id,
-					userId: props.user.id,
+				withReplies: prefer.s.defaultFollowWithReplies,
-				});
+			});
-				hasPendingFollowRequestFromYou.value = false;
+			emit('update:user', {
-			} else {
+				...props.user,
-				await misskeyApi('following/create', {
+				withReplies: prefer.s.defaultFollowWithReplies,
-					userId: props.user.id,
+			});
-					withReplies: prefer.s.defaultFollowWithReplies,
+			hasPendingFollowRequestFromYou.value = true;
-				});
-				emit('update:user', {
-					...props.user,
-					withReplies: prefer.s.defaultFollowWithReplies,
-				});
-				hasPendingFollowRequestFromYou.value = true;
 
-				if ($i == null) {
+			if ($i == null) {
-					wait.value = false;
+				wait.value = false;
-					return;
+				return;
-				}
+			}
 
-				claimAchievement('following1');
+			claimAchievement('following1');
 
-				if ($i.followingCount >= 10) {
+			if ($i.followingCount >= 10) {
-					claimAchievement('following10');
+				claimAchievement('following10');
-				}
+			}
-				if ($i.followingCount >= 50) {
+			if ($i.followingCount >= 50) {
-					claimAchievement('following50');
+				claimAchievement('following50');
-				}
+			}
-				if ($i.followingCount >= 100) {
+			if ($i.followingCount >= 100) {
-					claimAchievement('following100');
+				claimAchievement('following100');
-				}
+			}
-				if ($i.followingCount >= 300) {
+			if ($i.followingCount >= 300) {
-					claimAchievement('following300');
+				claimAchievement('following300');
-				}
 			}
 		}
 	} catch (err) {

packages/frontend/src/pages/follow-requests.vue

@@ -63,14 +63,28 @@ function accept(user: Misskey.entities.UserLite) {
 	});
 }
 
-function reject(user: Misskey.entities.UserLite) {
+async function reject(user: Misskey.entities.UserLite) {
-	os.apiWithDialog('following/requests/reject', { userId: user.id }).then(() => {
+	const { canceled } = await os.confirm({
+		type: 'question',
+		text: i18n.tsx.rejectFollowRequestConfirm({ name: user.name || user.username }),
+	});
+
+	if (canceled) return;
+
+	await os.apiWithDialog('following/requests/reject', { userId: user.id }).then(() => {
 		paginator.reload();
 	});
 }
 
-function cancel(user: Misskey.entities.UserLite) {
+async function cancel(user: Misskey.entities.UserLite) {
-	os.apiWithDialog('following/requests/cancel', { userId: user.id }).then(() => {
+	const { canceled } = await os.confirm({
+		type: 'question',
+		text: i18n.tsx.cancelFollowRequestConfirm({ name: user.name || user.username }),
+	});
+
+	if (canceled) return;
+
+	await os.apiWithDialog('following/requests/cancel', { userId: user.id }).then(() => {
 		paginator.reload();
 	});
 }