Fix profile picture inconsistency (#104, #147)

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/navigation/SideBar.jsx

@@ -24,6 +24,28 @@ import PowerIC from '../../../../public/res/ic/outlined/power.svg';
 
 function ProfileAvatarMenu() {
   const mx = initMatrix.matrixClient;
+  const [profile, setProfile] = useState({
+    avatarUrl: null,
+    displayName: mx.getUser(mx.getUserId()).displayName,
+  });
+
+  useEffect(() => {
+    const user = mx.getUser(mx.getUserId());
+    const setNewProfile = (avatarUrl, displayName) => setProfile({
+      avatarUrl: avatarUrl || null,
+      displayName: displayName || profile.displayName,
+    });
+    const onAvatarChange = (event, myUser) => {
+      setNewProfile(myUser.avatarUrl, myUser.displayName);
+    };
+    mx.getProfileInfo(mx.getUserId()).then((info) => {
+      setNewProfile(info.avatar_url, info.displayname);
+    });
+    user.on('User.avatarUrl', onAvatarChange);
+    return () => {
+      user.removeListener('User.avatarUrl', onAvatarChange);
+    };
+  }, []);
 
   return (
     <ContextMenu
@@ -45,10 +67,10 @@ function ProfileAvatarMenu() {
       render={(toggleMenu) => (
         <SidebarAvatar
           onClick={toggleMenu}
-          tooltip={mx.getUser(mx.getUserId()).displayName}
+          tooltip={profile.displayName}
-          imageSrc={mx.getUser(mx.getUserId()).avatarUrl !== null ? mx.mxcUrlToHttp(mx.getUser(mx.getUserId()).avatarUrl, 42, 42, 'crop') : null}
+          imageSrc={profile.avatarUrl !== null ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, 'crop') : null}
           bgColor={colorMXID(mx.getUserId())}
-          text={mx.getUser(mx.getUserId()).displayName.slice(0, 1)}
+          text={profile.displayName.slice(0, 1)}
         />
       )}
     />

src/app/organisms/profile-editor/ProfileEditor.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import initMatrix from '../../../client/initMatrix';
@@ -17,11 +17,17 @@ function ProfileEditor({
   const mx = initMatrix.matrixClient;
   const displayNameRef = useRef(null);
   const bgColor = colorMXID(userId);
-  const [avatarSrc, setAvatarSrc] = useState(mx.mxcUrlToHttp(mx.getUser(mx.getUserId()).avatarUrl, 80, 80, 'crop') || null);
+  const [avatarSrc, setAvatarSrc] = useState(null);
   const [disabled, setDisabled] = useState(true);
 
   let username = mx.getUser(mx.getUserId()).displayName;
 
+  useEffect(() => {
+    mx.getProfileInfo(mx.getUserId()).then((info) => {
+      setAvatarSrc(info.avatar_url ? mx.mxcUrlToHttp(info.avatar_url, 80, 80, 'crop') : null);
+    });
+  }, [userId]);
+
   // Sets avatar URL and updates the avatar component in profile editor to reflect new upload
   function handleAvatarUpload(url) {
     if (url === null) {