From 3e0189430b6573bebffe4e46209434bd01325052 Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Fri, 27 Sep 2019 09:16:21 -0400 Subject: [PATCH] MM-18762 Remove some usage of deprecated lifecycle methods (#3299) * MM-18762 Remove some usage of deprecated lifecycle methods * Only load ProgressiveImage when a URI changes --- .../announcement_banner.js | 12 +++---- app/components/badge.js | 2 -- app/components/emoji/emoji.js | 2 +- .../post_attachment_opengraph.js | 2 -- .../post_body_additional_content.js | 15 ++++---- .../progressive_image/progressive_image.js | 36 +++++++++---------- app/components/root/root.js | 2 +- .../safe_area_view/safe_area_view.ios.js | 12 +++---- app/components/swiper.js | 10 +++--- app/screens/about/about.js | 6 ++-- app/screens/add_reaction/add_reaction.js | 6 ++-- app/screens/channel/channel_base.js | 4 +-- app/screens/client_upgrade/client_upgrade.js | 6 ++-- app/screens/code/code.js | 6 ++-- .../error_teams_list/error_teams_list.js | 6 ++-- app/screens/image_preview/video_preview.js | 2 +- app/screens/mfa/mfa.js | 6 ++-- .../notification_settings_mention_base.js | 6 ++-- ...notification_settings_mentions_keywords.js | 6 ++-- .../notification_settings_mobile_base.js | 6 ++-- app/screens/settings/timezone/timezone.js | 2 +- app/screens/table_image/table_image.js | 19 ++++++---- app/screens/text_preview/text_preview.js | 6 ++-- app/screens/user_profile/user_profile.js | 6 ++-- index.js | 2 -- .../extension_channels/extension_channels.js | 2 +- 26 files changed, 91 insertions(+), 99 deletions(-) diff --git a/app/components/announcement_banner/announcement_banner.js b/app/components/announcement_banner/announcement_banner.js index 2902f56ba..ae4230256 100644 --- a/app/components/announcement_banner/announcement_banner.js +++ b/app/components/announcement_banner/announcement_banner.js @@ -37,18 +37,18 @@ export default class AnnouncementBanner extends PureComponent { bannerHeight: new Animated.Value(0), }; - componentWillMount() { + componentDidMount() { const {bannerDismissed, bannerEnabled, bannerText} = this.props; const showBanner = bannerEnabled && !bannerDismissed && Boolean(bannerText); this.toggleBanner(showBanner); } - componentWillReceiveProps(nextProps) { - if (this.props.bannerText !== nextProps.bannerText || - this.props.bannerEnabled !== nextProps.bannerEnabled || - this.props.bannerDismissed !== nextProps.bannerDismissed + componentDidUpdate(prevProps) { + if (this.props.bannerText !== prevProps.bannerText || + this.props.bannerEnabled !== prevProps.bannerEnabled || + this.props.bannerDismissed !== prevProps.bannerDismissed ) { - const showBanner = nextProps.bannerEnabled && !nextProps.bannerDismissed && Boolean(nextProps.bannerText); + const showBanner = this.props.bannerEnabled && !this.props.bannerDismissed && Boolean(this.props.bannerText); this.toggleBanner(showBanner); } } diff --git a/app/components/badge.js b/app/components/badge.js index 190ab239d..ad5a0eff5 100644 --- a/app/components/badge.js +++ b/app/components/badge.js @@ -35,9 +35,7 @@ export default class Badge extends PureComponent { this.mounted = false; this.layoutReady = false; - } - componentWillMount() { this.panResponder = PanResponder.create({ onStartShouldSetPanResponder: () => true, onMoveShouldSetPanResponder: () => true, diff --git a/app/components/emoji/emoji.js b/app/components/emoji/emoji.js index 30a8a2358..6f467fe3b 100644 --- a/app/components/emoji/emoji.js +++ b/app/components/emoji/emoji.js @@ -56,7 +56,7 @@ export default class Emoji extends React.PureComponent { }; } - componentWillMount() { + componentDidMount() { const {displayTextOnly, emojiName, imageUrl} = this.props; this.mounted = true; if (!displayTextOnly && imageUrl) { diff --git a/app/components/post_attachment_opengraph/post_attachment_opengraph.js b/app/components/post_attachment_opengraph/post_attachment_opengraph.js index ec66e3cc2..d39ae5182 100644 --- a/app/components/post_attachment_opengraph/post_attachment_opengraph.js +++ b/app/components/post_attachment_opengraph/post_attachment_opengraph.js @@ -45,9 +45,7 @@ export default class PostAttachmentOpenGraph extends PureComponent { componentDidMount() { this.mounted = true; - } - componentWillMount() { this.fetchData(this.props.link, this.props.openGraphData); } diff --git a/app/components/post_body_additional_content/post_body_additional_content.js b/app/components/post_body_additional_content/post_body_additional_content.js index 58d3f5b06..714ce0b61 100644 --- a/app/components/post_body_additional_content/post_body_additional_content.js +++ b/app/components/post_body_additional_content/post_body_additional_content.js @@ -87,21 +87,22 @@ export default class PostBodyAdditionalContent extends PureComponent { this.mounted = false; } - componentWillMount() { + componentDidMount() { this.mounted = true; + this.load(this.props); } + componentDidUpdate(prevProps) { + if (prevProps.link !== this.props.link) { + this.load(this.props); + } + } + componentWillUnmount() { this.mounted = false; } - componentWillReceiveProps(nextProps) { - if (this.props.link !== nextProps.link) { - this.load(nextProps); - } - } - isImage = (specificLink) => { const {metadata, link} = this.props; diff --git a/app/components/progressive_image/progressive_image.js b/app/components/progressive_image/progressive_image.js index 6bc2a40a1..1db062fd1 100644 --- a/app/components/progressive_image/progressive_image.js +++ b/app/components/progressive_image/progressive_image.js @@ -37,23 +37,23 @@ export default class ProgressiveImage extends PureComponent { this.subscribedToCache = true; this.state = { - intensity: null, + intensity: new Animated.Value(80), thumb: null, uri: null, }; } - componentWillMount() { - const intensity = new Animated.Value(80); - this.setState({intensity}); - this.load(this.props); - } - - componentWillReceiveProps(props) { - this.load(props); + componentDidMount() { + this.load(); } componentDidUpdate(prevProps, prevState) { + if (this.props.filename !== prevProps.filename || + this.props.imageUri !== prevProps.imageUri || + this.props.thumbnailUri !== prevProps.thumbnailUri) { + this.load(); + } + const {intensity, thumb, uri} = this.state; if (uri && thumb && uri !== thumb && prevState.uri !== uri) { Animated.timing(intensity, { @@ -68,12 +68,8 @@ export default class ProgressiveImage extends PureComponent { this.subscribedToCache = false; } - load = (props) => { - const {filename, imageUri, style, thumbnailUri} = props; - this.computedStyle = StyleSheet.absoluteFill; - if (Object.keys(style).length) { - this.style = Object.assign({}, StyleSheet.absoluteFill, style); - } + load = () => { + const {filename, imageUri, thumbnailUri} = this.props; if (thumbnailUri) { ImageCacheManager.cache(filename, thumbnailUri, this.setThumbnail); @@ -143,7 +139,7 @@ export default class ProgressiveImage extends PureComponent { resizeMethod={resizeMethod} onError={onError} source={defaultSource} - style={this.computedStyle} + style={StyleSheet.absoluteFill} > {this.props.children} @@ -151,7 +147,7 @@ export default class ProgressiveImage extends PureComponent { } return ( - + {(hasDefaultSource && !hasPreview && !hasURI) && defaultImage} {hasPreview && !isImageReady && {this.props.children} @@ -171,13 +167,13 @@ export default class ProgressiveImage extends PureComponent { resizeMethod={resizeMethod} onError={onError} source={{uri}} - style={this.computedStyle} + style={StyleSheet.absoluteFill} > {this.props.children} } {hasPreview && - + } ); diff --git a/app/components/root/root.js b/app/components/root/root.js index d3f271886..b81588df8 100644 --- a/app/components/root/root.js +++ b/app/components/root/root.js @@ -22,7 +22,7 @@ export default class Root extends PureComponent { theme: PropTypes.object.isRequired, }; - componentWillMount() { + componentDidMount() { Client4.setAcceptLanguage(this.props.locale); if (!this.props.excludeEvents) { diff --git a/app/components/safe_area_view/safe_area_view.ios.js b/app/components/safe_area_view/safe_area_view.ios.js index 97c5117ff..ada7d83e4 100644 --- a/app/components/safe_area_view/safe_area_view.ios.js +++ b/app/components/safe_area_view/safe_area_view.ios.js @@ -54,26 +54,24 @@ export default class SafeAreaIos extends PureComponent { }; } - componentWillMount() { - this.mounted = true; - this.getSafeAreaInsets(); - this.mounted = true; - } - componentDidMount() { + this.mounted = true; + Dimensions.addEventListener('change', this.getSafeAreaInsets); EventEmitter.on('update_safe_area_view', this.getSafeAreaInsets); this.keyboardDidShowListener = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); this.keyboardDidHideListener = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); + + this.getSafeAreaInsets(); this.getStatusBarHeight(); } componentWillUnmount() { - this.mounted = false; Dimensions.removeEventListener('change', this.getSafeAreaInsets); EventEmitter.off('update_safe_area_view', this.getSafeAreaInsets); this.keyboardDidShowListener.remove(); this.keyboardDidHideListener.remove(); + this.mounted = false; } diff --git a/app/components/swiper.js b/app/components/swiper.js index 22dbcdfb9..187a44201 100644 --- a/app/components/swiper.js +++ b/app/components/swiper.js @@ -52,17 +52,15 @@ export default class Swiper extends PureComponent { this.state = this.initialState(props); } - componentWillReceiveProps(nextProps) { - if (this.props.width !== nextProps.width) { - this.scrollByWidth(nextProps.width); - } - } - componentDidUpdate(prevProps, prevState) { // If the index has changed, we notify the parent via the onIndexChanged callback if (this.state.index !== prevState.index) { this.props.onIndexChanged(this.state.index); } + + if (this.props.width !== prevProps.width) { + this.scrollByWidth(this.props.width); + } } initialState = (props) => { diff --git a/app/screens/about/about.js b/app/screens/about/about.js index dc5f96efa..8243dd882 100644 --- a/app/screens/about/about.js +++ b/app/screens/about/about.js @@ -30,9 +30,9 @@ export default class About extends PureComponent { isLandscape: PropTypes.bool.isRequired, }; - componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); + componentDidUpdate(prevProps) { + if (this.props.theme !== prevProps.theme) { + setNavigatorStyles(this.props.componentId, this.props.theme); } } diff --git a/app/screens/add_reaction/add_reaction.js b/app/screens/add_reaction/add_reaction.js index 86ab62b88..b8f45a4a5 100644 --- a/app/screens/add_reaction/add_reaction.js +++ b/app/screens/add_reaction/add_reaction.js @@ -42,9 +42,9 @@ export default class AddReaction extends PureComponent { this.navigationEventListener = Navigation.events().bindComponent(this); } - componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); + componentDidUpdate(prevProps) { + if (this.props.theme !== prevProps.theme) { + setNavigatorStyles(this.props.componentId, this.props.theme); } } diff --git a/app/screens/channel/channel_base.js b/app/screens/channel/channel_base.js index acaca1cf5..76e6227bc 100644 --- a/app/screens/channel/channel_base.js +++ b/app/screens/channel/channel_base.js @@ -81,7 +81,7 @@ export default class ChannelBase extends PureComponent { } } - componentWillMount() { + componentDidMount() { EventEmitter.on('leave_team', this.handleLeaveTeam); if (this.props.currentTeamId) { @@ -93,9 +93,7 @@ export default class ChannelBase extends PureComponent { if (this.props.currentChannelId) { PushNotifications.clearChannelNotifications(this.props.currentChannelId); } - } - componentDidMount() { if (tracker.initialLoad && !this.props.skipMetrics) { this.props.actions.recordLoadTime('Start time', 'initialLoad'); } diff --git a/app/screens/client_upgrade/client_upgrade.js b/app/screens/client_upgrade/client_upgrade.js index c4de963f5..f27b03ebb 100644 --- a/app/screens/client_upgrade/client_upgrade.js +++ b/app/screens/client_upgrade/client_upgrade.js @@ -59,9 +59,9 @@ export default class ClientUpgrade extends PureComponent { } } - componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); + componentDidUpdate(prevProps) { + if (this.props.theme !== prevProps.theme) { + setNavigatorStyles(this.props.componentId, this.props.theme); } } diff --git a/app/screens/code/code.js b/app/screens/code/code.js index 0e839adf7..1b60101dd 100644 --- a/app/screens/code/code.js +++ b/app/screens/code/code.js @@ -33,9 +33,9 @@ export default class Code extends React.PureComponent { BackHandler.addEventListener('hardwareBackPress', this.handleAndroidBack); } - componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); + componentDidUpdate(prevProps) { + if (this.props.theme !== prevProps.theme) { + setNavigatorStyles(this.props.componentId, this.props.theme); } } diff --git a/app/screens/error_teams_list/error_teams_list.js b/app/screens/error_teams_list/error_teams_list.js index 43267140d..2c6d28ee9 100644 --- a/app/screens/error_teams_list/error_teams_list.js +++ b/app/screens/error_teams_list/error_teams_list.js @@ -39,9 +39,9 @@ export default class ErrorTeamsList extends PureComponent { this.navigationEventListener = Navigation.events().bindComponent(this); } - componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); + componentDidUpdate(prevProps) { + if (this.props.theme !== prevProps.theme) { + setNavigatorStyles(this.props.componentId, this.props.theme); } } diff --git a/app/screens/image_preview/video_preview.js b/app/screens/image_preview/video_preview.js index 20bc6cd40..c58c9f4a9 100644 --- a/app/screens/image_preview/video_preview.js +++ b/app/screens/image_preview/video_preview.js @@ -59,7 +59,7 @@ export default class VideoPreview extends PureComponent { }; } - componentWillMount() { + componentDidMount() { EventEmitter.on('stop-video-playback', this.stopPlayback); this.initializeComponent(); } diff --git a/app/screens/mfa/mfa.js b/app/screens/mfa/mfa.js index f5a3cbdea..b76cf78ed 100644 --- a/app/screens/mfa/mfa.js +++ b/app/screens/mfa/mfa.js @@ -52,10 +52,10 @@ export default class Mfa extends PureComponent { } } - componentWillReceiveProps(nextProps) { + componentDidUpdate(prevProps) { // In case the login is successful the previous scene (login) will take care of the transition - if (this.props.loginRequest.status === RequestStatus.STARTED && - nextProps.loginRequest.status === RequestStatus.FAILURE) { + if (prevProps.loginRequest.status === RequestStatus.STARTED && + this.props.loginRequest.status === RequestStatus.FAILURE) { popTopScreen(); } } diff --git a/app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js b/app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js index d10a0fe1e..9d5f6f654 100644 --- a/app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js +++ b/app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js @@ -36,9 +36,9 @@ export default class NotificationSettingsMentionsBase extends PureComponent { this.navigationEventListener = Navigation.events().bindComponent(this); } - componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); + componentDidUpdate(prevProps) { + if (this.props.theme !== prevProps.theme) { + setNavigatorStyles(this.props.componentId, this.props.theme); } } diff --git a/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js b/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js index 977ae2d77..3a6601f99 100644 --- a/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js +++ b/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js @@ -38,9 +38,9 @@ export default class NotificationSettingsMentionsKeywords extends PureComponent this.navigationEventListener = Navigation.events().bindComponent(this); } - componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); + componentDidUpdate(prevProps) { + if (this.props.theme !== prevProps.theme) { + setNavigatorStyles(this.props.componentId, this.props.theme); } } diff --git a/app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js b/app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js index 9eedfc43a..cf516d0a0 100644 --- a/app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js +++ b/app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js @@ -47,9 +47,9 @@ export default class NotificationSettingsMobileBase extends PureComponent { this.navigationEventListener = Navigation.events().bindComponent(this); } - componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); + componentDidUpdate(prevProps) { + if (this.props.theme !== prevProps.theme) { + setNavigatorStyles(this.props.componentId, this.props.theme); } } diff --git a/app/screens/settings/timezone/timezone.js b/app/screens/settings/timezone/timezone.js index ffebb05d5..8e6e76a68 100644 --- a/app/screens/settings/timezone/timezone.js +++ b/app/screens/settings/timezone/timezone.js @@ -53,7 +53,7 @@ export default class Timezone extends PureComponent { }; } - componentWillMount() { + componentDidMount() { const {actions: {getSupportedTimezones}, timezones} = this.props; if (timezones.length === 0) { diff --git a/app/screens/table_image/table_image.js b/app/screens/table_image/table_image.js index 6551c90df..bc8f64ea3 100644 --- a/app/screens/table_image/table_image.js +++ b/app/screens/table_image/table_image.js @@ -21,23 +21,30 @@ export default class TableImage extends React.PureComponent { super(props); this.state = { + imageSource: '', width: -1, height: -1, }; } - componentWillMount() { + componentDidMount() { this.getImageSize(this.props.imageSource); } - componentWillReceiveProps(nextProps) { - if (this.props.imageSource !== nextProps.imageSource) { - this.setState({ + static getDerivedStateFromProps(nextProps, state) { + if (nextProps.imageSource !== state.imageSource) { + return { width: -1, height: -1, - }); + }; + } - this.getImageSize(nextProps.imageSource); + return null; + } + + componentDidUpdate(prevProps) { + if (prevProps.imageSource !== this.props.imageSource) { + this.getImageSize(this.props.imageSource); } } diff --git a/app/screens/text_preview/text_preview.js b/app/screens/text_preview/text_preview.js index ffee6f7a9..fd3054486 100644 --- a/app/screens/text_preview/text_preview.js +++ b/app/screens/text_preview/text_preview.js @@ -27,9 +27,9 @@ export default class TextPreview extends React.PureComponent { content: PropTypes.string.isRequired, }; - componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); + componentDidUpdate(prevProps) { + if (this.props.theme !== prevProps.theme) { + setNavigatorStyles(this.props.componentId, this.props.theme); } } diff --git a/app/screens/user_profile/user_profile.js b/app/screens/user_profile/user_profile.js index e7675eaf0..aa41499d9 100644 --- a/app/screens/user_profile/user_profile.js +++ b/app/screens/user_profile/user_profile.js @@ -84,9 +84,9 @@ export default class UserProfile extends PureComponent { } } - componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); + componentDidUpdate(prevProps) { + if (this.props.theme !== prevProps.theme) { + setNavigatorStyles(this.props.componentId, this.props.theme); } } diff --git a/index.js b/index.js index 84ce150c3..c16d98063 100644 --- a/index.js +++ b/index.js @@ -13,8 +13,6 @@ import 'app/mattermost'; if (__DEV__) { YellowBox.ignoreWarnings([ - 'Warning: componentWillMount is deprecated', - 'Warning: componentWillUpdate is deprecated', 'Warning: componentWillReceiveProps is deprecated', // Hide warnings caused by React Native (https://github.com/facebook/react-native/issues/20841) diff --git a/share_extension/android/extension_channels/extension_channels.js b/share_extension/android/extension_channels/extension_channels.js index 50f1b50f7..df67c554d 100644 --- a/share_extension/android/extension_channels/extension_channels.js +++ b/share_extension/android/extension_channels/extension_channels.js @@ -47,7 +47,7 @@ export default class ExtensionTeam extends PureComponent { sections: null, }; - componentWillMount() { + componentDidMount() { this.buildSections(); }