diff --git a/app/containers/message/Message.js b/app/containers/message/Message.js index d5c1a9fc545d64826e5d3559b59ec9e68dce33f6..e8132bdc5ec6b4a4a25d7db2ed09cc67040b69ad 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) => ( - <Url url={url} key={url.url} index={index} /> + <Url url={url} key={url.url} index={index} user={user} baseUrl={baseUrl} /> )); } diff --git a/app/containers/message/Url.js b/app/containers/message/Url.js index 36ae44c19b59459d9366f2eecf019b1bbe190352..e0ae7d4ec790b61594dc71383d4780963f2af745 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 <FastImage source={{ uri: image }} style={styles.image} resizeMode={FastImage.resizeMode.cover} />; +}); + +const UrlContent = React.memo(({ title, description }) => ( + <View style={styles.textContainer}> + {title ? <Text style={styles.title} numberOfLines={2}>{title}</Text> : null} + {description ? <Text style={styles.description} numberOfLines={2}>{description}</Text> : null} + </View> +)); + +const Url = React.memo(({ + url, index, user, baseUrl +}) => { if (!url) { return null; } + + const onPress = () => openLink(url.url); + return ( <Touchable - onPress={() => onPress(url.url)} + onPress={onPress} style={[styles.button, index > 0 && styles.marginTop, styles.container]} background={Touchable.Ripple('#fff')} > <React.Fragment> - {url.image ? <FastImage source={{ uri: url.image }} style={styles.image} resizeMode={FastImage.resizeMode.cover} /> : null} - <View style={styles.textContainer}> - <Text style={styles.title} numberOfLines={2}>{url.title}</Text> - <Text style={styles.description} numberOfLines={2}>{url.description}</Text> - </View> + <UrlImage image={url.image} user={user} baseUrl={baseUrl} /> + <UrlContent title={url.title} description={url.description} /> </React.Fragment> </Touchable> ); +}, (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;