diff --git a/src/profile/ProfileModal.tsx b/src/profile/ProfileModal.tsx index 5711ef1..26b99e9 100644 --- a/src/profile/ProfileModal.tsx +++ b/src/profile/ProfileModal.tsx @@ -57,10 +57,16 @@ export function ProfileModal({ client, ...rest }: Props) { (e) => { e.preventDefault(); const data = new FormData(e.target); - const displayName = data.get("displayName"); + const displayNameDataEntry = data.get("displayName"); const avatar: File | string = data.get("avatar"); + const avatarSize = typeof avatar == "string" ? avatar.length : avatar.size; + const displayName = + typeof displayNameDataEntry == "string" + ? displayNameDataEntry + : displayNameDataEntry.name; + saveProfile({ displayName, avatar: avatar && avatarSize > 0 ? avatar : undefined, diff --git a/src/profile/useProfile.ts b/src/profile/useProfile.ts index 6ae5024..4eadcd8 100644 --- a/src/profile/useProfile.ts +++ b/src/profile/useProfile.ts @@ -14,28 +14,36 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { MatrixClient, User } from "matrix-js-sdk"; +import { + FileType, + MatrixClient, + MatrixEvent, + User, + UserEvent, +} from "matrix-js-sdk"; import { useState, useCallback, useEffect } from "react"; -interface ProfileResult { - loading: boolean; - error: Error; +interface ProfileLoadState { + success?: boolean; + loading?: boolean; displayName: string; avatarUrl: string; - saveProfile: ({ - displayName, - avatar, - removeAvatar, - }: { - displayName: string; - avatar: any; - removeAvatar: boolean; - }) => Promise; - success: boolean; + error?: Error; } -export function useProfile(client: MatrixClient): ProfileResult { + +type ProfileSaveCallback = ({ + displayName, + avatar, + removeAvatar, +}: { + displayName: string; + avatar: FileType; + removeAvatar: boolean; +}) => Promise; + +export function useProfile(client: MatrixClient) { const [{ loading, displayName, avatarUrl, error, success }, setState] = - useState(() => { + useState(() => { const user = client?.getUser(client.getUserId()); return { @@ -48,7 +56,10 @@ export function useProfile(client: MatrixClient): ProfileResult { }); useEffect(() => { - const onChangeUser = (_event: any, { displayName, avatarUrl }: any) => { + const onChangeUser = ( + _event: MatrixEvent, + { displayName, avatarUrl }: User + ) => { setState({ success: false, loading: false, @@ -63,19 +74,19 @@ export function useProfile(client: MatrixClient): ProfileResult { if (client) { const userId = client.getUserId(); user = client.getUser(userId); - user.on("User.displayName", onChangeUser); - user.on("User.avatarUrl", onChangeUser); + user.on(UserEvent.DisplayName, onChangeUser); + user.on(UserEvent.AvatarUrl, onChangeUser); } return () => { if (user) { - user.removeListener("User.displayName", onChangeUser); - user.removeListener("User.avatarUrl", onChangeUser); + user.removeListener(UserEvent.DisplayName, onChangeUser); + user.removeListener(UserEvent.AvatarUrl, onChangeUser); } }; }, [client]); - const saveProfile = useCallback( + const saveProfile = useCallback( async ({ displayName, avatar, removeAvatar }) => { if (client) { setState((prev) => ({ @@ -104,11 +115,11 @@ export function useProfile(client: MatrixClient): ProfileResult { loading: false, success: true, })); - } catch (error) { + } catch (error: unknown) { setState((prev) => ({ ...prev, loading: false, - error, + error: error instanceof Error ? error : Error(error as string), success: false, })); } @@ -119,5 +130,12 @@ export function useProfile(client: MatrixClient): ProfileResult { [client] ); - return { loading, error, displayName, avatarUrl, saveProfile, success }; + return { + loading, + error, + displayName, + avatarUrl, + saveProfile, + success, + }; }