diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2016-11-21 12:17:46 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2016-11-21 12:17:46 -0500 |
commit | a9824a3653a30779f7fd0cc62e329c988f02b519 (patch) | |
tree | 47689539ae8a5d53b968d8746fa412c2609a9ac5 | |
parent | 477dc6c4b62aad9102cb2c86f1d722ea996270d5 (diff) | |
download | chat-a9824a3653a30779f7fd0cc62e329c988f02b519.tar.gz chat-a9824a3653a30779f7fd0cc62e329c988f02b519.tar.bz2 chat-a9824a3653a30779f7fd0cc62e329c988f02b519.zip |
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
-rw-r--r-- | webapp/actions/user_actions.jsx | 1 | ||||
-rw-r--r-- | webapp/components/channel_header.jsx | 18 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 2 | ||||
-rw-r--r-- | 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 ( + <div className='channel-header'/> + ); } 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 { <div className='webrtc__header'> <a href='#' - onClick={() => this.initWebrtc(contact.id, !isOffline)} + onClick={() => this.initWebrtc(otherUserId, !isOffline)} disabled={isOffline} > <svg diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index a8344b1c5..fd1c42135 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -1,7 +1,7 @@ @charset 'UTF-8'; .channel-header { - @include flex(0 0 56px); + @include flex(0 0 57px); border-left: none; font-size: 14px; line-height: 56px; diff --git a/webapp/utils/async_client.jsx b/webapp/utils/async_client.jsx index efa9eeb2b..c281f2893 100644 --- a/webapp/utils/async_client.jsx +++ b/webapp/utils/async_client.jsx @@ -298,15 +298,17 @@ export function getChannelMember(channelId, userId) { } export function getUser(userId) { - if (isCallInProgress(`getUser${userId}`)) { + const callName = `getUser${userId}`; + + if (isCallInProgress(callName)) { return; } - callTracker[`getUser${userId}`] = utils.getTimestamp(); + callTracker[callName] = utils.getTimestamp(); Client.getUser( userId, (data) => { - 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'); } ); |