From 928400203ab48ee29e029f82f069006725bca3c3 Mon Sep 17 00:00:00 2001
From: anatawa12 <anatawa12@icloud.com>
Date: Mon, 16 Oct 2023 21:38:24 +0900
Subject: [PATCH] fix(frontend): use v-model

---
 packages/frontend/src/components/MkFollowButton.vue | 9 ++++++++-
 packages/frontend/src/components/MkUserPopup.vue    | 2 +-
 packages/frontend/src/pages/gallery/post.vue        | 2 +-
 packages/frontend/src/pages/user/home.vue           | 5 +++--
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
index c4103ce3c61c..a10e7dfd4993 100644
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -53,6 +53,10 @@ const props = withDefaults(defineProps<{
 	large: false,
 });
 
+const emit = defineEmits<{
+	(e: 'update:user', value: Misskey.entities.UserDetailed): void
+}>();
+
 let isFollowing = $ref(props.user.isFollowing);
 let hasPendingFollowRequestFromYou = $ref(props.user.hasPendingFollowRequestFromYou);
 let wait = $ref(false);
@@ -98,7 +102,10 @@ async function onClick() {
 					userId: props.user.id,
 					withReplies: defaultStore.state.defaultWithReplies,
 				});
-				props.user.withReplies = defaultStore.state.defaultWithReplies;
+				emit('update:user', {
+					...props.user,
+					withReplies: defaultStore.state.defaultWithReplies
+				})
 				hasPendingFollowRequestFromYou = true;
 
 				claimAchievement('following1');
diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue
index 33ef07d54b79..dcdcf2238f30 100644
--- a/packages/frontend/src/components/MkUserPopup.vue
+++ b/packages/frontend/src/components/MkUserPopup.vue
@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>
 			<button class="_button" :class="$style.menu" @click="showMenu"><i class="ti ti-dots"></i></button>
-			<MkFollowButton v-if="$i && user.id != $i.id" :class="$style.follow" :user="user" mini/>
+			<MkFollowButton v-if="$i && user.id != $i.id" :class="$style.follow" v-model:user="user" mini/>
 		</div>
 		<div v-else>
 			<MkLoading/>
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index 3f4f657e9472..3863348eaef5 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<MkUserName :user="post.user" style="display: block;"/>
 								<MkAcct :user="post.user"/>
 							</div>
-							<MkFollowButton v-if="!$i || $i.id != post.user.id" :user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
+							<MkFollowButton v-if="!$i || $i.id != post.user.id" v-model:user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
 						</div>
 					</div>
 					<MkAd :prefer="['horizontal', 'horizontal-big']"/>
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 605e9fbb7639..4c425898d5d3 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
 						<div v-if="$i" class="actions">
 							<button class="menu _button" @click="menu"><i class="ti ti-dots"></i></button>
-							<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
+							<MkFollowButton v-if="$i.id != user.id" v-model:user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 						</div>
 					</div>
 					<MkAvatar class="avatar" :user="user" indicator/>
@@ -198,6 +198,7 @@ const props = withDefaults(defineProps<{
 
 const router = useRouter();
 
+let user = $ref(props.user);
 let parallaxAnimationId = $ref<null | number>(null);
 let narrow = $ref<null | boolean>(null);
 let rootEl = $ref<null | HTMLElement>(null);
@@ -232,7 +233,7 @@ const age = $computed(() => {
 });
 
 function menu(ev) {
-	const { menu, cleanup } = getUserMenu(props.user, router);
+	const { menu, cleanup } = getUserMenu(user, router);
 	os.popupMenu(menu, ev.currentTarget ?? ev.target).finally(cleanup);
 }