fix(frontend): ユーザーの「概要」ページで引っ張って更新しても何も更新されない問題を修正 (#17965)

* fix(frontend): プロフィールページの pull to refresh が何も再取得しない (shiroha-a/misskey-ts#3150)

Co-Authored-By: しろは <admin@k7a.org>

* clean up

* Update Changelog

* clean up

* Update Changelog

* fix

---------

Co-authored-by: しろは <admin@k7a.org>

Author: kakkokari-gtyih

CHANGELOG.md

@@ -4,7 +4,8 @@
 -
 
 ### Client
--
+- Fix: ユーザーの「概要」ページで引っ張って更新しても何も更新されない問題を修正  
+  (Cherry-picked from https://github.com/shiroha-a/misskey-ts/commit/c946a42dbb71234dd9d9bbc14474853f0709431c)
 
 ### Server
 - Fix: HTTP Signaturesの`(request-target)`にクエリ文字列が含まれない問題を修正

packages/frontend/src/pages/user/home.vue

@@ -62,7 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</span>
 						</div>
 						<div v-if="iAmModerator" class="moderationNote">
-							<MkTextarea v-if="editModerationNote || (moderationNote != null && moderationNote !== '')" v-model="moderationNote" manualSave>
+							<MkTextarea v-if="editModerationNote || (moderationNote != null && moderationNote !== '')" v-model="moderationNote" manualSave @savingStateChange="(changed) => { isModerationNoteDirty = changed; }">
 								<template #label>{{ i18n.ts.moderationNote }}</template>
 								<template #caption>{{ i18n.ts.moderationNoteDescription }}</template>
 							</MkTextarea>
@@ -144,7 +144,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</template>
 					<div v-if="!disableNotes">
 						<MkLazy>
-							<XTimeline :user="user"/>
+							<XTimeline ref="timelineEl" :user="user"/>
 						</MkLazy>
 					</div>
 				</div>
@@ -187,6 +187,7 @@ import MkSparkle from '@/components/MkSparkle.vue';
 import { prefer } from '@/preferences.js';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 import { isBirthday } from '@/utility/is-birthday.js';
+import type XTimeline_TypeReferenceOnly from './index.timeline.vue';
 
 function calcAge(birthdate: string): number {
 	const date = new Date(birthdate);
@@ -209,9 +210,12 @@ const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
 
 const props = withDefaults(defineProps<{
 	user: Misskey.entities.UserDetailed;
+	/** Refetches the user in place. Supplied by the parent page. */
+	refreshUser?: () => Promise<void>;
 	/** Test only; MkNotesTimeline currently causes problems in vitest */
 	disableNotes?: boolean;
 }>(), {
+	refreshUser: undefined,
 	disableNotes: false,
 });
 
@@ -226,13 +230,18 @@ const narrow = ref<null | boolean>(null);
 const rootEl = useTemplateRef('rootEl');
 const bannerEl = useTemplateRef('bannerEl');
 const memoTextareaEl = useTemplateRef('memoTextareaEl');
+const timelineEl = useTemplateRef<InstanceType<typeof XTimeline_TypeReferenceOnly>>('timelineEl');
 const memoDraft = ref(props.user.memo);
 const isEditingMemo = ref(false);
 const moderationNote = ref(props.user.moderationNote ?? '');
 const editModerationNote = ref(false);
+const isModerationNoteDirty = ref(false);
 
-watch(moderationNote, async () => {
-	await misskeyApi('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
+watch(moderationNote, async (newValue) => {
+	// 再取得した値を同期しただけの場合は保存しない
+	if (newValue === (user.value.moderationNote ?? '')) return;
+	await misskeyApi('admin/update-user-note', { userId: user.value.id, text: newValue });
+	user.value = { ...user.value, moderationNote: newValue };
 });
 
 const style = computed(() => {
@@ -278,12 +287,20 @@ async function updateMemo() {
 	isEditingMemo.value = false;
 }
 
-watch([props.user], () => {
+watch(() => props.user, () => {
+	user.value = props.user;
+	// 編集中は上書きしない (入力中の内容を消してしまう)
+	if (!isModerationNoteDirty.value) moderationNote.value = props.user.moderationNote ?? '';
+	if (isEditingMemo.value) return;
 	memoDraft.value = props.user.memo;
 });
 
+// ここでは失敗は握りつぶす（Pull to Refreshがもどらなくなるので）
 async function reload() {
-	// TODO
+	await Promise.allSettled([
+		props.refreshUser?.(),
+		timelineEl.value?.reload(),
+	]);
 }
 
 let bannerParallaxResizeObserver: ResizeObserver | null = null;

packages/frontend/src/pages/user/index.timeline.vue

@@ -54,6 +54,10 @@ const notesPaginator = markRaw(new Paginator('users/notes', {
 		withFiles: tab.value === 'files',
 	})),
 }));
+
+defineExpose({
+	reload: () => (tab.value === 'featured' ? featuredPaginator : notesPaginator).reload(),
+});
 </script>
 
 <style lang="scss" module>

packages/frontend/src/pages/user/index.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <PageWithHeader v-model:tab="tab" :tabs="headerTabs" :actions="headerActions" :swipable="true">
 	<div v-if="user">
-		<XHome v-if="tab === 'home'" :user="user" @showMoreFiles="() => { tab = 'files'; }"/>
+		<XHome v-if="tab === 'home'" :user="user" :refreshUser="refreshUser" @showMoreFiles="() => { tab = 'files'; }"/>
 		<XNotes v-else-if="tab === 'notes'" :user="user"/>
 		<XFiles v-else-if="tab === 'files'" :user="user"/>
 		<XActivity v-else-if="tab === 'activity'" :user="user"/>
@@ -62,6 +62,7 @@ const tab = ref(props.page);
 const user = ref<null | Misskey.entities.UserDetailed>(CTX_USER);
 const error = ref<any>(null);
 
+// 初回読込時専用（使える場合はサーバーコンテキストから取得する）
 function fetchUser(): void {
 	if (props.acct == null) return;
 
@@ -87,6 +88,14 @@ watch(() => props.acct, fetchUser, {
 	immediate: true,
 });
 
+// 再読込時専用（強制fetch）
+async function refreshUser(): Promise<void> {
+	if (props.acct == null) return;
+
+	const { username, host } = Misskey.acct.parse(props.acct);
+	user.value = await misskeyApi('users/show', { username, host });
+}
+
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => user.value ? [{