52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
|
import { useEffect, useState } from 'react';
|
||
|
|
import { UserEvent, UserEventHandlerMap } from 'matrix-js-sdk';
|
||
|
|
import { useMatrixClient } from './useMatrixClient';
|
||
|
|
|
||
|
|
export type UserProfile = {
|
||
|
|
avatarUrl?: string;
|
||
|
|
displayName?: string;
|
||
|
|
};
|
||
|
|
export const useUserProfile = (userId: string): UserProfile => {
|
||
|
|
const mx = useMatrixClient();
|
||
|
|
|
||
|
|
const [profile, setProfile] = useState<UserProfile>(() => {
|
||
|
|
const user = mx.getUser(userId);
|
||
|
|
return {
|
||
|
|
avatarUrl: user?.avatarUrl,
|
||
|
|
displayName: user?.displayName,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const user = mx.getUser(userId);
|
||
|
|
const onAvatarChange: UserEventHandlerMap[UserEvent.AvatarUrl] = (event, myUser) => {
|
||
|
|
setProfile((cp) => ({
|
||
|
|
...cp,
|
||
|
|
avatarUrl: myUser.avatarUrl,
|
||
|
|
}));
|
||
|
|
};
|
||
|
|
const onDisplayNameChange: UserEventHandlerMap[UserEvent.DisplayName] = (event, myUser) => {
|
||
|
|
setProfile((cp) => ({
|
||
|
|
...cp,
|
||
|
|
displayName: myUser.displayName,
|
||
|
|
}));
|
||
|
|
};
|
||
|
|
|
||
|
|
mx.getProfileInfo(userId).then((info) =>
|
||
|
|
setProfile({
|
||
|
|
avatarUrl: info.avatar_url,
|
||
|
|
displayName: info.displayname,
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
user?.on(UserEvent.AvatarUrl, onAvatarChange);
|
||
|
|
user?.on(UserEvent.DisplayName, onDisplayNameChange);
|
||
|
|
return () => {
|
||
|
|
user?.removeListener(UserEvent.AvatarUrl, onAvatarChange);
|
||
|
|
user?.removeListener(UserEvent.DisplayName, onDisplayNameChange);
|
||
|
|
};
|
||
|
|
}, [mx, userId]);
|
||
|
|
|
||
|
|
return profile;
|
||
|
|
};
|