element-call/src/profile/useProfile.js

import { useState, useCallback, useEffect } from "react";
import { getAvatarUrl } from "../matrix-utils";

export function useProfile(client) {
  const [{ loading, displayName, avatarUrl, error, success }, setState] =
    useState(() => {
      const user = client?.getUser(client.getUserId());

      return {
        success: false,
        loading: false,
        displayName: user?.displayName,
        avatarUrl: user && client && getAvatarUrl(client, user.avatarUrl),
        error: null,
      };
    });

  useEffect(() => {
    const onChangeUser = (_event, { displayName, avatarUrl }) => {
      setState({
        success: false,
        loading: false,
        displayName,
        avatarUrl: getAvatarUrl(client, avatarUrl),
        error: null,
      });
    };

    let user;

    if (client) {
      const userId = client.getUserId();
      user = client.getUser(userId);
      user.on("User.displayName", onChangeUser);
      user.on("User.avatarUrl", onChangeUser);
    }

    return () => {
      if (user) {
        user.removeListener("User.displayName", onChangeUser);
        user.removeListener("User.avatarUrl", onChangeUser);
      }
    };
  }, [client]);

  const saveProfile = useCallback(
    async ({ displayName, avatar }) => {
      if (client) {
        setState((prev) => ({
          ...prev,
          loading: true,
          error: null,
          success: false,
        }));

        try {
          await client.setDisplayName(displayName);

          let mxcAvatarUrl;

          if (avatar) {
            mxcAvatarUrl = await client.uploadContent(avatar);
            await client.setAvatarUrl(mxcAvatarUrl);
          }

          setState((prev) => ({
            ...prev,
            displayName,
            avatarUrl: mxcAvatarUrl
              ? getAvatarUrl(client, mxcAvatarUrl)
              : prev.avatarUrl,
            loading: false,
            success: true,
          }));
        } catch (error) {
          setState((prev) => ({
            ...prev,
            loading: false,
            error,
            success: false,
          }));
        }
      } else {
        console.error("Client not initialized before calling saveProfile");
      }
    },
    [client]
  );

  return { loading, error, displayName, avatarUrl, saveProfile, success };
}