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

* fix user image requests * fix eslint errors and a few more cache busters
2017-07-19 13:54:16 -07:00
--- a/webapp/components/post_view/post/post.jsx
+++ b/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)) {
--- a/webapp/components/rhs_comment.jsx
+++ b/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'
                />
--- a/webapp/components/rhs_root_post.jsx
+++ b/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'
                />
--- a/webapp/components/search_results_item.jsx
+++ b/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}
--- a/webapp/components/suggestion/at_mention_provider.jsx
+++ b/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)}
                />
            );
        }
--- a/webapp/components/suggestion/search_user_provider.jsx
+++ b/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>
--- a/webapp/components/suggestion/switch_channel_provider.jsx
+++ b/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
            };
--- a/webapp/components/user_profile.jsx
+++ b/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) {
--- a/webapp/components/user_settings/user_settings_general/user_settings_general.jsx
+++ b/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) => {
--- a/webapp/components/webrtc/components/webrtc_notification.jsx
+++ b/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'
--- a/webapp/components/webrtc/webrtc_controller.jsx
+++ b/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
--- 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}
--- 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;
--- 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