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 { DirectCreateSearchParams } from '../../pages/paths';
import { useExtendedProfile } from '../../hooks/useExtendedProfile';
import { AsyncStatus } from '../../hooks/useAsyncCallback';
type UserRoomProfileProps = {
userId: string;
@ -58,8 +57,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
const displayName = getMemberDisplayName(room, userId);
const avatarMxc = getMemberAvatarMxc(room, userId);
const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
const [extendedProfileState, refreshExtendedProfile] = useExtendedProfile(userId);
const extendedProfile = extendedProfileState.status === AsyncStatus.Success ? extendedProfileState.data : undefined;
const [extendedProfile, refreshExtendedProfile] = useExtendedProfile(userId);
const timezone = useMemo(() => {
// @ts-expect-error Intl.supportedValuesOf isn't in the types yet
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 server = getMxIdServer(userId);
const [extendedProfileState, refreshExtendedProfile] = useExtendedProfile(userId);
const extendedProfile =
extendedProfileState.status === AsyncStatus.Success ? extendedProfileState.data : undefined;
const [extendedProfile, refreshExtendedProfile] = useExtendedProfile(userId);
const [fieldDefaults, setFieldDefaults] = useState<ExtendedProfile>({});
useLayoutEffect(() => {
@ -559,7 +557,7 @@ export function Profile() {
);
const saving = saveState.status === AsyncStatus.Loading;
const loadingExtendedProfile = extendedProfileState.status === AsyncStatus.Loading;
const loadingExtendedProfile = extendedProfile === undefined;
const busy = saving || loadingExtendedProfile;
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 { AsyncCallback, AsyncState, useAsyncCallback } from './useAsyncCallback';
import { useQuery } from '@tanstack/react-query';
import { useMatrixClient } from './useMatrixClient';
import { useSpecVersions } from './useSpecVersions';
import { useCapabilities } from './useCapabilities';
@ -30,26 +30,26 @@ export function useExtendedProfileSupported(): boolean {
export function useExtendedProfile(
userId: string
): [
AsyncState<ExtendedProfile | undefined, unknown>,
AsyncCallback<[], ExtendedProfile | undefined>
] {
): [ExtendedProfile | undefined, () => Promise<void>] {
const mx = useMatrixClient();
const extendedProfileSupported = useExtendedProfileSupported();
const [extendedProfileData, refresh] = useAsyncCallback(
useCallback(async () => {
const { data, refetch } = useQuery({
queryKey: ['extended-profile', userId],
queryFn: useCallback(async () => {
if (extendedProfileSupported) {
return extendedProfile.parse(await mx.getExtendedProfile(userId));
}
return undefined;
}, [mx, userId, extendedProfileSupported])
);
}, [mx, userId, extendedProfileSupported]),
refetchOnMount: false,
});
useEffect(() => {
refresh();
}, [refresh]);
return [extendedProfileData, refresh];
return [
data,
async () => {
await refetch();
},
];
}
const LEGACY_FIELDS = ['displayname', 'avatar_url'];