MM-18771 Removed componentwillreceiveprops (#4980)
* at_mention : removed componentwillreceiveprops * channel_mention : remove componentwillreceiveprops * slash_suggestion : remove componentWillReceiveProps
This commit is contained in:
parent
04bb204191
commit
0360ceeb6e
3 changed files with 72 additions and 79 deletions
|
|
@ -54,51 +54,38 @@ export default class AtMention extends PureComponent {
|
|||
sections: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const {groups, inChannel, outChannel, teamMembers, isSearch, matchTerm, requestStatus} = nextProps;
|
||||
|
||||
// Not invoked, render nothing.
|
||||
if (matchTerm === null) {
|
||||
this.setState({
|
||||
sections: [],
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (matchTerm !== this.props.matchTerm) {
|
||||
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 (
|
||||
groups !== this.props.groups ||
|
||||
(
|
||||
requestStatus !== RequestStatus.STARTED &&
|
||||
(inChannel !== this.props.inChannel || outChannel !== this.props.outChannel || teamMembers !== this.props.teamMembers)
|
||||
)
|
||||
) {
|
||||
const sections = this.buildSections(nextProps);
|
||||
this.setState({
|
||||
sections,
|
||||
});
|
||||
|
||||
this.props.onResultCountChange(sections.reduce((total, section) => total + section.data.length, 0));
|
||||
}
|
||||
updateSections(sections) {
|
||||
this.setState({sections});
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (this.props.matchTerm !== prevProps.matchTerm) {
|
||||
if (this.props.matchTerm === null) {
|
||||
this.updateSections([]);
|
||||
} else {
|
||||
const sections = this.buildSections(this.props);
|
||||
this.updateSections(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 = this.props.isSearch ? '' : currentChannelId;
|
||||
this.props.actions.autocompleteUsers(this.props.matchTerm, currentTeamId, channelId);
|
||||
}
|
||||
}
|
||||
if (this.props.matchTerm !== null && this.props.matchTerm === prevProps.matchTerm) {
|
||||
if (
|
||||
this.props.groups !== prevProps.groups ||
|
||||
(
|
||||
this.props.requestStatus !== RequestStatus.STARTED &&
|
||||
(this.props.inChannel !== prevProps.inChannel || this.props.outChannel !== prevProps.outChannel || this.props.teamMembers !== prevProps.teamMembers)
|
||||
)
|
||||
) {
|
||||
const sections = this.buildSections(this.props);
|
||||
this.updateSections(sections);
|
||||
this.props.onResultCountChange(sections.reduce((total, section) => total + section.data.length, 0));
|
||||
}
|
||||
}
|
||||
if (prevState.sections.length !== this.state.sections.length && this.state.sections.length === 0) {
|
||||
this.props.onResultCountChange(0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,15 +61,23 @@ export default class ChannelMention extends PureComponent {
|
|||
this.props.actions.autocompleteChannelsForSearch(currentTeamId, matchTerm);
|
||||
}, 200);
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const {isSearch, matchTerm, myChannels, otherChannels, privateChannels, publicChannels, directAndGroupMessages, requestStatus, myMembers} = nextProps;
|
||||
resetState() {
|
||||
this.setState({
|
||||
mentionComplete: false,
|
||||
sections: [],
|
||||
});
|
||||
}
|
||||
|
||||
if ((matchTerm !== this.props.matchTerm && matchTerm === null) || this.state.mentionComplete) {
|
||||
updateSections(sections) {
|
||||
this.setState({sections});
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const {isSearch, matchTerm, myChannels, otherChannels, privateChannels, publicChannels, directAndGroupMessages, requestStatus, myMembers} = this.props;
|
||||
|
||||
if ((matchTerm !== prevProps.matchTerm && matchTerm === null) || (this.state.mentionComplete !== prevState.mentionComplete && this.state.mentionComplete)) {
|
||||
// if the term changes but is null or the mention has been completed we render this component as null
|
||||
this.setState({
|
||||
mentionComplete: false,
|
||||
sections: [],
|
||||
});
|
||||
this.resetState();
|
||||
|
||||
this.props.onResultCountChange(0);
|
||||
|
||||
|
|
@ -79,15 +87,15 @@ export default class ChannelMention extends PureComponent {
|
|||
return;
|
||||
}
|
||||
|
||||
if (matchTerm !== this.props.matchTerm) {
|
||||
if (matchTerm !== prevProps.matchTerm) {
|
||||
const {currentTeamId} = this.props;
|
||||
this.runSearch(currentTeamId, matchTerm);
|
||||
}
|
||||
|
||||
if (matchTerm === '' || (myChannels !== this.props.myChannels || otherChannels !== this.props.otherChannels ||
|
||||
privateChannels !== this.props.privateChannels || publicChannels !== this.props.publicChannels ||
|
||||
directAndGroupMessages !== this.props.directAndGroupMessages ||
|
||||
myMembers !== this.props.myMembers)) {
|
||||
if ((matchTerm !== prevProps.matchTerm && matchTerm === '') || (myChannels !== prevProps.myChannels || otherChannels !== prevProps.otherChannels ||
|
||||
privateChannels !== prevProps.privateChannels || publicChannels !== prevProps.publicChannels ||
|
||||
directAndGroupMessages !== prevProps.directAndGroupMessages ||
|
||||
myMembers !== prevProps.myMembers)) {
|
||||
const sections = [];
|
||||
if (isSearch) {
|
||||
if (publicChannels.length) {
|
||||
|
|
@ -139,9 +147,7 @@ export default class ChannelMention extends PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
sections,
|
||||
});
|
||||
this.updateSections(sections);
|
||||
this.props.onResultCountChange(sections.reduce((total, section) => total + section.data.length, 0));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,51 +48,53 @@ export default class SlashSuggestion extends PureComponent {
|
|||
lastCommandRequest: 0,
|
||||
};
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if ((nextProps.value === this.props.value && nextProps.suggestions === this.props.suggestions && nextProps.commands === this.props.commands) ||
|
||||
nextProps.isSearch || nextProps.value.startsWith('//') || !nextProps.channelId) {
|
||||
setActive(active) {
|
||||
this.setState({active});
|
||||
}
|
||||
|
||||
setLastCommandRequest(lastCommandRequest) {
|
||||
this.setState({lastCommandRequest});
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if ((this.props.value === prevProps.value && this.props.suggestions === prevProps.suggestions && this.props.commands === prevProps.commands) ||
|
||||
this.props.isSearch || this.props.value.startsWith('//') || !this.props.channelId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const {currentTeamId} = this.props;
|
||||
const {currentTeamId} = prevProps;
|
||||
const {
|
||||
commands: nextCommands,
|
||||
currentTeamId: nextTeamId,
|
||||
value: nextValue,
|
||||
suggestions: nextSuggestions,
|
||||
} = nextProps;
|
||||
} = this.props;
|
||||
|
||||
if (nextValue[0] !== '/') {
|
||||
this.setState({
|
||||
active: false,
|
||||
});
|
||||
this.setActive(false);
|
||||
this.props.onResultCountChange(0);
|
||||
return;
|
||||
}
|
||||
|
||||
if (nextValue.indexOf(' ') === -1) { // return suggestions for a top level cached commands
|
||||
if (currentTeamId !== nextTeamId) {
|
||||
this.setState({
|
||||
lastCommandRequest: 0,
|
||||
});
|
||||
this.setLastCommandRequest(0);
|
||||
}
|
||||
|
||||
const dataIsStale = Date.now() - this.state.lastCommandRequest > TIME_BEFORE_NEXT_COMMAND_REQUEST;
|
||||
|
||||
if ((!nextCommands.length || dataIsStale)) {
|
||||
this.props.actions.getAutocompleteCommands(nextProps.currentTeamId);
|
||||
this.setState({
|
||||
lastCommandRequest: Date.now(),
|
||||
});
|
||||
this.props.actions.getAutocompleteCommands(this.props.currentTeamId);
|
||||
this.setLastCommandRequest(Date.now());
|
||||
}
|
||||
|
||||
const matches = this.filterSlashSuggestions(nextValue.substring(1), nextCommands);
|
||||
this.updateSuggestions(matches);
|
||||
} else if (isMinimumServerVersion(Client4.getServerVersion(), 5, 24)) {
|
||||
if (nextSuggestions === this.props.suggestions) {
|
||||
if (nextSuggestions === prevProps.suggestions) {
|
||||
const args = {
|
||||
channel_id: this.props.channelId,
|
||||
...(this.props.rootId && {root_id: this.props.rootId, parent_id: this.props.rootId}),
|
||||
channel_id: prevProps.channelId,
|
||||
...(prevProps.rootId && {root_id: prevProps.rootId, parent_id: prevProps.rootId}),
|
||||
};
|
||||
this.props.actions.getCommandAutocompleteSuggestions(nextValue, nextTeamId, args);
|
||||
} else {
|
||||
|
|
@ -110,9 +112,7 @@ export default class SlashSuggestion extends PureComponent {
|
|||
this.updateSuggestions(matches);
|
||||
}
|
||||
} else {
|
||||
this.setState({
|
||||
active: false,
|
||||
});
|
||||
this.setActive(false);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue