PLT-6689: fix user image requests (#6946)

* fix user image requests

* fix eslint errors and a few more cache busters

3 files changed, 21 insertions, 7 deletions

diff --git a/webapp/utils/channel_intro_messages.jsx b/webapp/utils/channel_intro_messages.jsx
index c874bfc73..6390f615c 100644
--- a/webapp/utils/channel_intro_messages.jsx
+++ b/webapp/utils/channel_intro_messages.jsx
@@ -13,8 +13,6 @@ import Constants from 'utils/constants.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 import ProfilePicture from 'components/profile_picture.jsx';
 
-import {Client4} from 'mattermost-redux/client';
-
 import {showManagementOptions} from './channel_utils.jsx';
 
 import React from 'react';
@@ -52,7 +50,7 @@ export function createGMIntroMessage(channel, centeredIntro) {
             pictures.push(
                 <ProfilePicture
                     key={'introprofilepicture' + profile.id}
-                    src={Client4.getUsersRoute() + '/' + profile.id + '/image?time=' + profile.last_picture_update}
+                    src={Utils.imageURLForUser(profile)}
                     width='50'
                     height='50'
                     user={profile}
@@ -112,7 +110,7 @@ export function createDMIntroMessage(channel, centeredIntro) {
             <div className={'channel-intro ' + centeredIntro}>
                 <div className='post-profile-img__container channel-intro-img'>
                     <ProfilePicture
-                        src={Client4.getUsersRoute() + '/' + teammate.id + '/image?time=' + teammate.last_picture_update}
+                        src={Utils.imageURLForUser(teammate)}
                         width='50'
                         height='50'
                         user={teammate}
diff --git a/webapp/utils/post_utils.jsx b/webapp/utils/post_utils.jsx
index a71aeef31..9309e1e49 100644
--- a/webapp/utils/post_utils.jsx
+++ b/webapp/utils/post_utils.jsx
@@ -1,7 +1,6 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import {Client4} from 'mattermost-redux/client';
 import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 
@@ -32,8 +31,14 @@ export function isEdited(post) {
     return post.edit_at > 0;
 }
 
-export function getProfilePicSrcForPost(post, timestamp) {
-    let src = Client4.getUsersRoute() + '/' + post.user_id + '/image?time=' + timestamp;
+export function getProfilePicSrcForPost(post, user) {
+    let src = '';
+    if (user && user.id === post.user_id) {
+        src = Utils.imageURLForUser(user);
+    } else {
+        src = Utils.imageURLForUser(post.user_id);
+    }
+
     if (post.props && post.props.from_webhook && global.window.mm_config.EnablePostIconOverride === 'true') {
         if (post.props.override_icon_url) {
             src = post.props.override_icon_url;
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index b14bdaf11..0bd8c7bff 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -1023,6 +1023,17 @@ export function displayUsernameForUser(user) {
     return '';
 }
 
+export function imageURLForUser(userIdOrObject) {
+    if (typeof userIdOrObject == 'string') {
+        const profile = UserStore.getProfile(userIdOrObject);
+        if (profile) {
+            return imageURLForUser(profile);
+        }
+        return Client4.getUsersRoute() + '/' + userIdOrObject + '/image?_=' + Date.now();
+    }
+    return Client4.getUsersRoute() + '/' + userIdOrObject.id + '/image?_=' + (userIdOrObject.last_picture_update || 0);
+}
+
 // Converts a file size in bytes into a human-readable string of the form '123MB'.
 export function fileSizeToString(bytes) {
     // it's unlikely that we'll have files bigger than this