Only load post body additional content when needed (#927)

* Only load post body additional content when needed

* Feedback review
This commit is contained in:
enahum 2017-09-22 12:04:29 -03:00 committed by Jarred Witt
parent a09e1ebcc1
commit 757387a4de
3 changed files with 26 additions and 8 deletions

View file

@ -21,6 +21,7 @@ import PostBodyAdditionalContent from 'app/components/post_body_additional_conte
import {emptyFunction} from 'app/utils/general';
import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
import {extractFirstLink} from 'app/utils/url';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
import Reactions from 'app/components/reactions';
@ -66,6 +67,20 @@ class PostBody extends PureComponent {
toggleSelected: emptyFunction
};
constructor(props) {
super(props);
this.state = {
link: extractFirstLink(props.message)
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.message !== this.props.message) {
this.setState({link: extractFirstLink(nextProps.message)});
}
}
handleHideUnderlay = () => {
this.props.toggleSelected(false);
};
@ -226,14 +241,17 @@ class PostBody extends PureComponent {
>
<View>
{messageComponent}
{Boolean(this.state.link) &&
<PostBodyAdditionalContent
baseTextStyle={messageStyle}
blockStyles={blockStyles}
navigator={navigator}
message={message}
link={this.state.link}
postProps={postProps}
textStyles={textStyles}
/>
}
{this.renderFileAttachments()}
</View>
</TouchableHighlight>
@ -248,14 +266,17 @@ class PostBody extends PureComponent {
cancelText={formatMessage({id: 'channel_modal.cancel', defaultMessage: 'Cancel'})}
>
{messageComponent}
{Boolean(this.state.link) &&
<PostBodyAdditionalContent
baseTextStyle={messageStyle}
blockStyles={blockStyles}
message={message}
navigator={navigator}
message={message}
link={this.state.link}
postProps={postProps}
textStyles={textStyles}
/>
}
{this.renderFileAttachments()}
{hasReactions && <Reactions postId={postId}/>}
</OptionsContext>

View file

@ -15,20 +15,17 @@ import {ViewTypes} from 'app/constants';
import {getDimensions} from 'app/selectors/device';
import {getTheme} from 'app/selectors/preferences';
import {extractFirstLink} from 'app/utils/url';
import PostBodyAdditionalContent from './post_body_additional_content';
function mapStateToProps(state, ownProps) {
const config = getConfig(state);
const previewsEnabled = getBool(state, Preferences.CATEGORY_ADVANCED_SETTINGS, `${ViewTypes.FEATURE_TOGGLE_PREFIX}${ViewTypes.EMBED_PREVIEW}`);
const link = extractFirstLink(ownProps.message);
return {
...ownProps,
...getDimensions(state),
config,
link,
openGraphData: getOpenGraphMetadataForUrl(state, link),
openGraphData: getOpenGraphMetadataForUrl(state, ownProps.link),
showLinkPreviews: previewsEnabled && config.EnableLinkPreviews === 'true',
theme: getTheme(state)
};

View file

@ -93,8 +93,8 @@ export default class PostBodyAdditionalContent extends PureComponent {
return {width: maxWidth, height: maxHeight};
};
generateStaticEmbed = (isYouTube) => {
if (isYouTube) {
generateStaticEmbed = (isYouTube, isImage) => {
if (isYouTube || isImage) {
return null;
}
@ -255,7 +255,7 @@ export default class PostBodyAdditionalContent extends PureComponent {
}
}
return this.generateStaticEmbed(isYouTube);
return this.generateStaticEmbed(isYouTube, isImage);
}
}