From a9824a3653a30779f7fd0cc62e329c988f02b519 Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Mon, 21 Nov 2016 12:17:46 -0500 Subject: Hotfix: PLT-4779 Fixing scrolling on loading a channel and missing DM channel headers (#4584) * Added all parameters to call tracker ids when getting profiles * Changed channel header rendering to not depend on knowing all users in a DM channel * Added comment about a race condition in UserActions.populateDMChannelsWithProfiles * Added a fixed-height placeholder for the ChannelHeader when its state isn't valid for rendering --- webapp/actions/user_actions.jsx | 1 + webapp/components/channel_header.jsx | 18 ++++++++--- webapp/sass/layout/_headers.scss | 2 +- webapp/utils/async_client.jsx | 60 +++++++++++++++++++++--------------- 4 files changed, 51 insertions(+), 30 deletions(-) diff --git a/webapp/actions/user_actions.jsx b/webapp/actions/user_actions.jsx index 304d36a62..9b5bc985c 100644 --- a/webapp/actions/user_actions.jsx +++ b/webapp/actions/user_actions.jsx @@ -135,6 +135,7 @@ function populateDMChannelsWithProfiles(userIds) { const currentUserId = UserStore.getCurrentId(); for (let i = 0; i < userIds.length; i++) { + // TODO There's a race condition here for DM channels if those channels aren't loaded yet const channelName = getDirectChannelName(currentUserId, userIds[i]); const channel = ChannelStore.getByName(channelName); if (channel) { diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx index 1ce7b4a0e..213f7fd0a 100644 --- a/webapp/components/channel_header.jsx +++ b/webapp/components/channel_header.jsx @@ -68,12 +68,18 @@ export default class ChannelHeader extends React.Component { const stats = ChannelStore.getStats(this.props.channelId); const users = UserStore.getProfileListInChannel(this.props.channelId); + let otherUserId = null; + if (channel.type === 'D') { + otherUserId = Utils.getUserIdFromChannelName(channel); + } + return { channel, memberChannel: ChannelStore.getMyMember(this.props.channelId), users, userCount: stats.member_count, currentUser: UserStore.getCurrentUser(), + otherUserId, enableFormatting: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', true), isBusy: WebrtcStore.isBusy(), isFavorite: channel && ChannelUtils.isFavoriteChannel(channel) @@ -84,7 +90,6 @@ export default class ChannelHeader extends React.Component { if (!this.state.channel || !this.state.memberChannel || !this.state.users || - (Object.keys(this.state.users).length === 0 && this.state.channel.type === 'D') || !this.state.userCount || !this.state.currentUser) { return false; @@ -240,7 +245,10 @@ export default class ChannelHeader extends React.Component { const flagIcon = Constants.FLAG_ICON_SVG; if (!this.validState()) { - return null; + // Use an empty div to make sure the header's height stays constant + return ( +
+ ); } const channel = this.state.channel; @@ -285,7 +293,7 @@ export default class ChannelHeader extends React.Component { if (isDirect) { const userMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; - const contact = this.state.users[0]; + const otherUserId = this.state.otherUserId; const teammateId = Utils.getUserIdFromChannelName(channel); channelTitle = Utils.displayUsername(teammateId); @@ -293,7 +301,7 @@ export default class ChannelHeader extends React.Component { const webrtcEnabled = global.mm_config.EnableWebrtc === 'true' && userMedia && Utils.isFeatureEnabled(PreReleaseFeatures.WEBRTC_PREVIEW); if (webrtcEnabled) { - const isOffline = UserStore.getStatus(contact.id) === UserStatuses.OFFLINE; + const isOffline = UserStore.getStatus(otherUserId) === UserStatuses.OFFLINE; const busy = this.state.isBusy; let circleClass = ''; let webrtcMessage; @@ -321,7 +329,7 @@ export default class ChannelHeader extends React.Component {
this.initWebrtc(contact.id, !isOffline)} + onClick={() => this.initWebrtc(otherUserId, !isOffline)} disabled={isOffline} > { - callTracker[`getUser${userId}`] = 0; + callTracker[callName] = 0; AppDispatcher.handleServerAction({ type: ActionTypes.RECEIVED_PROFILE, @@ -314,23 +316,25 @@ export function getUser(userId) { }); }, (err) => { - callTracker[`getUser${userId}`] = 0; + callTracker[callName] = 0; dispatchError(err, 'getUser'); } ); } export function getProfiles(offset = UserStore.getPagingOffset(), limit = Constants.PROFILE_CHUNK_SIZE) { - if (isCallInProgress(`getProfiles${offset}${limit}`)) { + const callName = `getProfiles${offset}${limit}`; + + if (isCallInProgress(callName)) { return; } - callTracker[`getProfiles${offset}${limit}`] = utils.getTimestamp(); + callTracker[callName] = utils.getTimestamp(); Client.getProfiles( offset, limit, (data) => { - callTracker[`getProfiles${offset}${limit}`] = 0; + callTracker[callName] = 0; AppDispatcher.handleServerAction({ type: ActionTypes.RECEIVED_PROFILES, @@ -338,24 +342,26 @@ export function getProfiles(offset = UserStore.getPagingOffset(), limit = Consta }); }, (err) => { - callTracker[`getProfiles${offset}${limit}`] = 0; + callTracker[callName] = 0; dispatchError(err, 'getProfiles'); } ); } export function getProfilesInTeam(teamId = TeamStore.getCurrentId(), offset = UserStore.getInTeamPagingOffset(), limit = Constants.PROFILE_CHUNK_SIZE) { - if (isCallInProgress(`getProfilesInTeam${offset}${limit}`)) { + const callName = `getProfilesInTeam${teamId}${offset}${limit}`; + + if (isCallInProgress(callName)) { return; } - callTracker[`getProfilesInTeam${offset}${limit}`] = utils.getTimestamp(); + callTracker[callName] = utils.getTimestamp(); Client.getProfilesInTeam( teamId, offset, limit, (data) => { - callTracker[`getProfilesInTeam${offset}${limit}`] = 0; + callTracker[callName] = 0; AppDispatcher.handleServerAction({ type: ActionTypes.RECEIVED_PROFILES_IN_TEAM, @@ -366,24 +372,26 @@ export function getProfilesInTeam(teamId = TeamStore.getCurrentId(), offset = Us }); }, (err) => { - callTracker[`getProfilesInTeam${offset}${limit}`] = 0; + callTracker[callName] = 0; dispatchError(err, 'getProfilesInTeam'); } ); } export function getProfilesInChannel(channelId = ChannelStore.getCurrentId(), offset = UserStore.getInChannelPagingOffset(), limit = Constants.PROFILE_CHUNK_SIZE) { - if (isCallInProgress(`getProfilesInChannel${offset}${limit}`)) { + const callName = `getProfilesInChannel${channelId}${offset}${limit}`; + + if (isCallInProgress()) { return; } - callTracker[`getProfilesInChannel${offset}${limit}`] = utils.getTimestamp(); + callTracker[callName] = utils.getTimestamp(); Client.getProfilesInChannel( channelId, offset, limit, (data) => { - callTracker[`getProfilesInChannel${offset}${limit}`] = 0; + callTracker[callName] = 0; AppDispatcher.handleServerAction({ type: ActionTypes.RECEIVED_PROFILES_IN_CHANNEL, @@ -396,24 +404,26 @@ export function getProfilesInChannel(channelId = ChannelStore.getCurrentId(), of loadStatusesForProfilesMap(data); }, (err) => { - callTracker[`getProfilesInChannel${offset}${limit}`] = 0; + callTracker[callName] = 0; dispatchError(err, 'getProfilesInChannel'); } ); } export function getProfilesNotInChannel(channelId = ChannelStore.getCurrentId(), offset = UserStore.getNotInChannelPagingOffset(), limit = Constants.PROFILE_CHUNK_SIZE) { - if (isCallInProgress(`getProfilesNotInChannel${offset}${limit}`)) { + const callName = `getProfilesNotInChannel${channelId}${offset}${limit}`; + + if (isCallInProgress(callName)) { return; } - callTracker[`getProfilesNotInChannel${offset}${limit}`] = utils.getTimestamp(); + callTracker[callName] = utils.getTimestamp(); Client.getProfilesNotInChannel( channelId, offset, limit, (data) => { - callTracker[`getProfilesNotInChannel${offset}${limit}`] = 0; + callTracker[callName] = 0; AppDispatcher.handleServerAction({ type: ActionTypes.RECEIVED_PROFILES_NOT_IN_CHANNEL, @@ -426,14 +436,16 @@ export function getProfilesNotInChannel(channelId = ChannelStore.getCurrentId(), loadStatusesForProfilesMap(data); }, (err) => { - callTracker[`getProfilesNotInChannel${offset}${limit}`] = 0; + callTracker[callName] = 0; dispatchError(err, 'getProfilesNotInChannel'); } ); } export function getProfilesByIds(userIds) { - if (isCallInProgress('getProfilesByIds')) { + const callName = 'getProfilesByIds' + JSON.stringify(userIds); + + if (isCallInProgress(callName)) { return; } @@ -441,11 +453,11 @@ export function getProfilesByIds(userIds) { return; } - callTracker.getProfilesByIds = utils.getTimestamp(); + callTracker[callName] = utils.getTimestamp(); Client.getProfilesByIds( userIds, (data) => { - callTracker.getProfilesByIds = 0; + callTracker[callName] = 0; AppDispatcher.handleServerAction({ type: ActionTypes.RECEIVED_PROFILES, @@ -453,7 +465,7 @@ export function getProfilesByIds(userIds) { }); }, (err) => { - callTracker.getProfilesByIds = 0; + callTracker[callName] = 0; dispatchError(err, 'getProfilesByIds'); } ); -- cgit v1.2.3-1-g7c22