diff --git a/app/containers/message/Message.js b/app/containers/message/Message.js index d5c1a9fc5..e8132bdc5 100644 --- a/app/containers/message/Message.js +++ b/app/containers/message/Message.js @@ -320,13 +320,13 @@ export default class Message extends PureComponent { } renderUrl = () => { - const { urls } = this.props; + const { urls, user, baseUrl } = this.props; if (urls.length === 0) { return null; } return urls.map((url, index) => ( - + )); } diff --git a/app/containers/message/Url.js b/app/containers/message/Url.js index 36ae44c19..e0ae7d4ec 100644 --- a/app/containers/message/Url.js +++ b/app/containers/message/Url.js @@ -3,6 +3,7 @@ import { View, Text, StyleSheet } from 'react-native'; import PropTypes from 'prop-types'; import FastImage from 'react-native-fast-image'; import Touchable from 'react-native-platform-touchable'; +import isEqual from 'lodash/isEqual'; import openLink from '../../utils/openLink'; import sharedStyles from '../../views/Styles'; @@ -50,33 +51,60 @@ const styles = StyleSheet.create({ } }); -const onPress = (url) => { - openLink(url); -}; -const Url = ({ url, index }) => { +const UrlImage = React.memo(({ image, user, baseUrl }) => { + if (!image) { + return null; + } + image = image.includes('http') ? image : `${ baseUrl }/${ image }?rc_uid=${ user.id }&rc_token=${ user.token }`; + return ; +}); + +const UrlContent = React.memo(({ title, description }) => ( + + {title ? {title} : null} + {description ? {description} : null} + +)); + +const Url = React.memo(({ + url, index, user, baseUrl +}) => { if (!url) { return null; } + + const onPress = () => openLink(url.url); + return ( onPress(url.url)} + onPress={onPress} style={[styles.button, index > 0 && styles.marginTop, styles.container]} background={Touchable.Ripple('#fff')} > - {url.image ? : null} - - {url.title} - {url.description} - + + ); +}, (oldProps, newProps) => isEqual(oldProps.url, newProps.url)); + +UrlImage.propTypes = { + image: PropTypes.string, + user: PropTypes.object, + baseUrl: PropTypes.string +}; + +UrlContent.propTypes = { + title: PropTypes.string, + description: PropTypes.string }; Url.propTypes = { url: PropTypes.object.isRequired, - index: PropTypes.number + index: PropTypes.number, + user: PropTypes.object, + baseUrl: PropTypes.string }; export default Url;