toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

MM-13076 Start with store results for at-mention/search autocomplete (#4444)

Browse source 
Currently, at-mention and search autocomplete do not render if there is a server request or network problem/outage, because the only data used to populate autocomplete results is a server request.

Now, these autocompletes will render initially with user data currently in store, and then re-rendered in place, once the server response completes.

Co-authored-by: Amit Uttam <changingrainbows@gmail.com>
This commit is contained in:
Mattermost Build 2020-06-18 03:26:13 +02:00 committed by GitHub
parent 0cd123aecc
commit ae65a4af6f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 66 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
app/components/autocomplete/at_mention/at_mention.js
View file

@ -57,70 +57,46 @@ export default class AtMention extends PureComponent {
componentWillReceiveProps(nextProps) {
const {inChannel, outChannel, teamMembers, isSearch, matchTerm, requestStatus} = nextProps;
if ((matchTerm !== this.props.matchTerm && matchTerm === null) || this.state.mentionComplete) {
// if the term changes but is null or the mention has been completed we render this component as null
// Not invoked, render nothing.
if (matchTerm === null) {
this.setState({
mentionComplete: false,
sections: [],
});
this.props.onResultCountChange(0);
return;
} else if (matchTerm === null) {
// if the terms did not change but is null then we don't need to do anything
}
if (this.state.mentionComplete) {
// Mention has been completed. Hide autocomplete.
this.setState({
sections: [],
});
this.props.onResultCountChange(0);
return;
}
if (matchTerm !== this.props.matchTerm) {
// if the term changed and we haven't made the request do that first
const sections = this.buildSections(nextProps);
this.setState({
sections,
});
this.props.onResultCountChange(sections.reduce((total, section) => total + section.data.length, 0));
// Update user autocomplete list with results of server request
const {currentTeamId, currentChannelId} = this.props;
const channelId = isSearch ? '' : currentChannelId;
this.props.actions.autocompleteUsers(matchTerm, currentTeamId, channelId);
return;
}
// Server request is complete
if (requestStatus !== RequestStatus.STARTED &&
(inChannel !== this.props.inChannel || outChannel !== this.props.outChannel || teamMembers !== this.props.teamMembers)) {
// if the request is complete and the term is not null we show the autocomplete
const sections = [];
if (isSearch) {
sections.push({
id: t('mobile.suggestion.members'),
defaultMessage: 'Members',
data: teamMembers,
key: 'teamMembers',
});
} else {
if (inChannel.length) {
sections.push({
id: t('suggestion.mention.members'),
defaultMessage: 'Channel Members',
data: inChannel,
key: 'inChannel',
});
}
if (this.props.useChannelMentions && this.checkSpecialMentions(matchTerm)) {
sections.push({
id: t('suggestion.mention.special'),
defaultMessage: 'Special Mentions',
data: this.getSpecialMentions(),
key: 'special',
renderItem: this.renderSpecialMentions,
});
}
if (outChannel.length) {
sections.push({
id: t('suggestion.mention.nonmembers'),
defaultMessage: 'Not in Channel',
data: outChannel,
key: 'outChannel',
});
}
}
const sections = this.buildSections(nextProps);
this.setState({
sections,
});
@ -129,6 +105,50 @@ export default class AtMention extends PureComponent {
}
}
buildSections = (props) => {
const {isSearch, inChannel, outChannel, teamMembers, matchTerm} = props;
const sections = [];
if (isSearch) {
sections.push({
id: t('mobile.suggestion.members'),
defaultMessage: 'Members',
data: teamMembers,
key: 'teamMembers',
});
} else {
if (inChannel.length) {
sections.push({
id: t('suggestion.mention.members'),
defaultMessage: 'Channel Members',
data: inChannel,
key: 'inChannel',
});
}
if (this.props.useChannelMentions && this.checkSpecialMentions(matchTerm)) {
sections.push({
id: t('suggestion.mention.special'),
defaultMessage: 'Special Mentions',
data: this.getSpecialMentions(),
key: 'special',
renderItem: this.renderSpecialMentions,
});
}
if (outChannel.length) {
sections.push({
id: t('suggestion.mention.nonmembers'),
defaultMessage: 'Not in Channel',
data: outChannel,
key: 'outChannel',
});
}
}
return sections;
};
keyExtractor = (item) => {
return item.id || item;
};