mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-04 22:40:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use Tanstack Query when fetching extended profiles to improve caching

Browse source
This commit is contained in:
Ginger 2025-09-16 09:23:06 -04:00
parent c389365ea2
commit 07df0c2c79
No known key found for this signature in database
3 changed files with 18 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/components/user-profile/UserRoomProfile.tsx
View file

@ -23,7 +23,6 @@ import { CreatorChip } from './CreatorChip';
import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils'; import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils';
import { DirectCreateSearchParams } from '../../pages/paths'; import { DirectCreateSearchParams } from '../../pages/paths';
import { useExtendedProfile } from '../../hooks/useExtendedProfile'; import { useExtendedProfile } from '../../hooks/useExtendedProfile';
import { AsyncStatus } from '../../hooks/useAsyncCallback';
type UserRoomProfileProps = { type UserRoomProfileProps = {
userId: string; userId: string;
@ -58,8 +57,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
const displayName = getMemberDisplayName(room, userId); const displayName = getMemberDisplayName(room, userId);
const avatarMxc = getMemberAvatarMxc(room, userId); const avatarMxc = getMemberAvatarMxc(room, userId);
const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined; const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
const [extendedProfileState, refreshExtendedProfile] = useExtendedProfile(userId); const [extendedProfile, refreshExtendedProfile] = useExtendedProfile(userId);
const extendedProfile = extendedProfileState.status === AsyncStatus.Success ? extendedProfileState.data : undefined;
const timezone = useMemo(() => { const timezone = useMemo(() => {
// @ts-expect-error Intl.supportedValuesOf isn't in the types yet // @ts-expect-error Intl.supportedValuesOf isn't in the types yet
const supportedTimezones = Intl.supportedValuesOf('timeZone') as string[]; const supportedTimezones = Intl.supportedValuesOf('timeZone') as string[];

6
src/app/features/settings/account/Profile.tsx
View file

@ -519,9 +519,7 @@ export function Profile() {
const userId = mx.getUserId() as string; const userId = mx.getUserId() as string;
const server = getMxIdServer(userId); const server = getMxIdServer(userId);
const [extendedProfileState, refreshExtendedProfile] = useExtendedProfile(userId); const [extendedProfile, refreshExtendedProfile] = useExtendedProfile(userId);
const extendedProfile =
extendedProfileState.status === AsyncStatus.Success ? extendedProfileState.data : undefined;
const [fieldDefaults, setFieldDefaults] = useState<ExtendedProfile>({}); const [fieldDefaults, setFieldDefaults] = useState<ExtendedProfile>({});
useLayoutEffect(() => { useLayoutEffect(() => {
@ -559,7 +557,7 @@ export function Profile() {
); );
const saving = saveState.status === AsyncStatus.Loading; const saving = saveState.status === AsyncStatus.Loading;
const loadingExtendedProfile = extendedProfileState.status === AsyncStatus.Loading; const loadingExtendedProfile = extendedProfile === undefined;
const busy = saving || loadingExtendedProfile; const busy = saving || loadingExtendedProfile;
return ( return (

30
src/app/hooks/useExtendedProfile.ts
View file

@ -1,6 +1,6 @@
import { useCallback, useEffect } from 'react'; import { useCallback } from 'react';
import z from 'zod'; import z from 'zod';
import { AsyncCallback, AsyncState, useAsyncCallback } from './useAsyncCallback'; import { useQuery } from '@tanstack/react-query';
import { useMatrixClient } from './useMatrixClient'; import { useMatrixClient } from './useMatrixClient';
import { useSpecVersions } from './useSpecVersions'; import { useSpecVersions } from './useSpecVersions';
import { useCapabilities } from './useCapabilities'; import { useCapabilities } from './useCapabilities';
@ -30,26 +30,26 @@ export function useExtendedProfileSupported(): boolean {
export function useExtendedProfile( export function useExtendedProfile(
userId: string userId: string
): [ ): [ExtendedProfile | undefined, () => Promise<void>] {
AsyncState<ExtendedProfile | undefined, unknown>,
AsyncCallback<[], ExtendedProfile | undefined>
] {
const mx = useMatrixClient(); const mx = useMatrixClient();
const extendedProfileSupported = useExtendedProfileSupported(); const extendedProfileSupported = useExtendedProfileSupported();
const [extendedProfileData, refresh] = useAsyncCallback( const { data, refetch } = useQuery({
useCallback(async () => { queryKey: ['extended-profile', userId],
queryFn: useCallback(async () => {
if (extendedProfileSupported) { if (extendedProfileSupported) {
return extendedProfile.parse(await mx.getExtendedProfile(userId)); return extendedProfile.parse(await mx.getExtendedProfile(userId));
} }
return undefined; return undefined;
}, [mx, userId, extendedProfileSupported]) }, [mx, userId, extendedProfileSupported]),
); refetchOnMount: false,
});
useEffect(() => { return [
refresh(); data,
}, [refresh]); async () => {
await refetch();
return [extendedProfileData, refresh]; },
];
} }
const LEGACY_FIELDS = ['displayname', 'avatar_url']; const LEGACY_FIELDS = ['displayname', 'avatar_url'];