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

* fix user image requests

* fix eslint errors and a few more cache busters

webapp/components/post_view/post/post.jsx

@@ -199,13 +199,6 @@ export default class Post extends React.PureComponent {
         const isSystemMessage = PostUtils.isSystemMessage(post);
         const fromWebhook = post.props && post.props.from_webhook === 'true';
 
-        let timestamp = 0;
-        if (!this.props.user || this.props.user.last_picture_update == null) {
-            timestamp = this.props.currentUser.last_picture_update;
-        } else {
-            timestamp = this.props.user.last_picture_update;
-        }
-
         let status = this.props.status;
         if (fromWebhook) {
             status = null;
@@ -213,7 +206,7 @@ export default class Post extends React.PureComponent {
 
         let profilePic = (
             <ProfilePicture
-                src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
+                src={PostUtils.getProfilePicSrcForPost(post, this.props.user)}
                 status={status}
                 user={this.props.user}
                 isBusy={this.props.isBusy}
@@ -223,7 +216,7 @@ export default class Post extends React.PureComponent {
         if (fromWebhook) {
             profilePic = (
                 <ProfilePicture
-                    src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
+                    src={PostUtils.getProfilePicSrcForPost(post, this.props.user)}
                 />
             );
         } else if (PostUtils.isSystemMessage(post)) {

webapp/components/rhs_comment.jsx

@@ -212,8 +212,6 @@ export default class RhsComment extends React.Component {
         const isEphemeral = Utils.isPostEphemeral(post);
         const isSystemMessage = PostUtils.isSystemMessage(post);
 
-        var timestamp = this.props.currentUser.last_picture_update;
-
         let status = this.props.status;
         if (post.props && post.props.from_webhook === 'true') {
             status = null;
@@ -277,7 +275,7 @@ export default class RhsComment extends React.Component {
 
         let profilePic = (
             <ProfilePicture
-                src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
+                src={PostUtils.getProfilePicSrcForPost(post, this.props.user)}
                 status={status}
                 width='36'
                 height='36'
@@ -289,7 +287,7 @@ export default class RhsComment extends React.Component {
         if (post.props && post.props.from_webhook) {
             profilePic = (
                 <ProfilePicture
-                    src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
+                    src={PostUtils.getProfilePicSrcForPost(post, this.props.user)}
                     width='36'
                     height='36'
                 />

webapp/components/rhs_root_post.jsx

@@ -196,7 +196,6 @@ export default class RhsRootPost extends React.Component {
         const post = this.props.post;
         const user = this.props.user;
         const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
-        var timestamp = user ? user.last_picture_update : 0;
         var channel = ChannelStore.get(post.channel_id);
 
         const isEphemeral = Utils.isPostEphemeral(post);
@@ -303,7 +302,7 @@ export default class RhsRootPost extends React.Component {
 
         let profilePic = (
             <ProfilePicture
-                src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
+                src={PostUtils.getProfilePicSrcForPost(post, user)}
                 status={status}
                 width='36'
                 height='36'
@@ -315,7 +314,7 @@ export default class RhsRootPost extends React.Component {
         if (post.props && post.props.from_webhook) {
             profilePic = (
                 <ProfilePicture
-                    src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
+                    src={PostUtils.getProfilePicSrcForPost(post, user)}
                     width='36'
                     height='36'
                 />

webapp/components/search_results_item.jsx

@@ -9,7 +9,6 @@ import ProfilePicture from './profile_picture.jsx';
 import CommentIcon from 'components/common/comment_icon.jsx';
 
 import TeamStore from 'stores/team_store.jsx';
-import UserStore from 'stores/user_store.jsx';
 
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
@@ -113,7 +112,6 @@ export default class SearchResultsItem extends React.Component {
     render() {
         let channelName = null;
         const channel = this.props.channel;
-        const timestamp = UserStore.getCurrentUser().last_picture_update;
         const user = this.props.user || {};
         const post = this.props.post;
 
@@ -154,7 +152,7 @@ export default class SearchResultsItem extends React.Component {
 
         const profilePic = (
             <ProfilePicture
-                src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
+                src={PostUtils.getProfilePicSrcForPost(post, user)}
                 user={this.props.user}
                 status={this.props.status}
                 isBusy={this.props.isBusy}

webapp/components/suggestion/at_mention_provider.jsx

@@ -10,7 +10,6 @@ import {autocompleteUsersInChannel} from 'actions/user_actions.jsx';
 
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import * as Utils from 'utils/utils.jsx';
-import {Client4} from 'mattermost-redux/client';
 import {Constants, ActionTypes} from 'utils/constants.jsx';
 
 import React from 'react';
@@ -66,7 +65,7 @@ class AtMentionSuggestion extends Suggestion {
             icon = (
                 <img
                     className='mention__image'
-                    src={Client4.getUsersRoute() + '/' + user.id + '/image?time=' + user.last_picture_update}
+                    src={Utils.imageURLForUser(user)}
                 />
             );
         }

webapp/components/suggestion/search_user_provider.jsx

@@ -7,7 +7,6 @@ import Provider from './provider.jsx';
 import {autocompleteUsersInTeam} from 'actions/user_actions.jsx';
 
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
-import {Client4} from 'mattermost-redux/client';
 import * as Utils from 'utils/utils.jsx';
 import {ActionTypes} from 'utils/constants.jsx';
 
@@ -41,7 +40,7 @@ class SearchUserSuggestion extends Suggestion {
                 <i className='fa fa fa-plus-square'/>
                 <img
                     className='profile-img rounded'
-                    src={Client4.getUsersRoute() + '/' + item.id + '/image?time=' + item.last_picture_update}
+                    src={Utils.imageURLForUser(item)}
                 />
                 <div className='mention--align'>
                     <span>

webapp/components/suggestion/switch_channel_provider.jsx

@@ -58,7 +58,7 @@ class SwitchChannelSuggestion extends Suggestion {
                 <div className='pull-left'>
                     <img
                         className='mention__image'
-                        src={Client4.getUsersRoute() + '/' + channel.id + '/image?time=' + channel.last_picture_update}
+                        src={Utils.imageURLForUser(channel)}
                     />
                 </div>
             );
@@ -239,7 +239,8 @@ export default class SwitchChannelProvider extends Provider {
                     name: user.username,
                     id: user.id,
                     update_at: user.update_at,
-                    type: Constants.DM_CHANNEL
+                    type: Constants.DM_CHANNEL,
+                    last_picture_update: user.last_picture_update || 0
                 },
                 name: user.username
             };

webapp/components/user_profile.jsx

@@ -3,7 +3,6 @@
 
 import ProfilePopover from './profile_popover.jsx';
 import * as Utils from 'utils/utils.jsx';
-import {Client4} from 'mattermost-redux/client';
 
 import {OverlayTrigger} from 'react-bootstrap';
 
@@ -59,7 +58,7 @@ export default class UserProfile extends React.Component {
 
         if (this.props.user) {
             name = Utils.displayUsername(this.props.user.id);
-            profileImg = Client4.getUsersRoute() + '/' + this.props.user.id + '/image?time=' + this.props.user.last_picture_update;
+            profileImg = Utils.imageURLForUser(this.props.user);
         }
 
         if (this.props.overwriteName) {

webapp/components/user_settings/user_settings_general/user_settings_general.jsx

@@ -9,7 +9,6 @@ import SettingPicture from 'components/setting_picture.jsx';
 import UserStore from 'stores/user_store.jsx';
 import ErrorStore from 'stores/error_store.jsx';
 
-import {Client4} from 'mattermost-redux/client';
 import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 
@@ -1141,7 +1140,7 @@ class UserSettingsGeneralTab extends React.Component {
                 <SettingPicture
                     title={formatMessage(holders.profilePicture)}
                     submit={this.submitPicture}
-                    src={Client4.getUsersRoute() + '/' + user.id + '/image?time=' + user.last_picture_update}
+                    src={Utils.imageURLForUser(user)}
                     serverError={serverError}
                     clientError={clientError}
                     updateSection={(e) => {

webapp/components/webrtc/components/webrtc_notification.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 WebSocketClient from 'client/web_websocket_client.jsx';
 
 import UserStore from 'stores/user_store.jsx';
@@ -197,7 +196,7 @@ export default class WebrtcNotification extends React.Component {
         const user = this.state.userCalling;
         if (user) {
             const username = Utils.displayUsername(user.id);
-            const profileImgSrc = Client4.getUsersRoute() + '/' + user.id + '/image?time=' + (user.last_picture_update || new Date().getTime());
+            const profileImgSrc = Utils.imageURLForUser(user);
             const profileImg = (
                 <img
                     className='user-popover__image'

webapp/components/webrtc/webrtc_controller.jsx

@@ -5,7 +5,6 @@ import UserStore from 'stores/user_store.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 import WebrtcStore from 'stores/webrtc_store.jsx';
 
-import {Client4} from 'mattermost-redux/client';
 import WebSocketClient from 'client/web_websocket_client.jsx';
 import Janus from 'janus';
 
@@ -84,14 +83,14 @@ export default class WebrtcController extends React.Component {
 
         const currentUser = UserStore.getCurrentUser();
         const remoteUser = UserStore.getProfile(props.userId);
-        const remoteUserImage = Client4.getUsersRoute() + '/' + remoteUser.id + '/image?time=' + remoteUser.last_picture_update;
+        const remoteUserImage = Utils.imageURLForUser(remoteUser);
 
         this.state = {
             windowWidth: Utils.windowWidth(),
             windowHeight: Utils.windowHeight(),
             channelId: ChannelStore.getCurrentId(),
             currentUser,
-            currentUserImage: Client4.getUsersRoute() + '/' + currentUser.id + '/image?time=' + currentUser.last_picture_update,
+            currentUserImage: Utils.imageURLForUser(currentUser),
             remoteUserImage,
             localMediaLoaded: false,
             isPaused: false,
@@ -133,7 +132,7 @@ export default class WebrtcController extends React.Component {
             (nextProps.userId !== this.props.userId) ||
             (nextProps.isCaller !== this.props.isCaller)) {
             const remoteUser = UserStore.getProfile(nextProps.userId);
-            const remoteUserImage = Client4.getUsersRoute() + '/' + remoteUser.id + '/image?time=' + remoteUser.last_picture_update;
+            const remoteUserImage = Utils.imageURLForUser(remoteUser);
             this.setState({
                 error: null,
                 remoteUserImage

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}

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) {
+export function getProfilePicSrcForPost(post, user) {
-    let src = Client4.getUsersRoute() + '/' + post.user_id + '/image?time=' + timestamp;
+    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;

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