diff --git a/app/containers/message/Urls.tsx b/app/containers/message/Urls.tsx index b8c623239..fb3723987 100644 --- a/app/containers/message/Urls.tsx +++ b/app/containers/message/Urls.tsx @@ -58,38 +58,6 @@ const styles = StyleSheet.create({ } }); -const UrlImage = ({ - image, - setImageLoadedState, - hasContent, - imageLoadedState -}: { - image: string; - setImageLoadedState(value: TImageLoadedState): void; - hasContent: boolean; - imageLoadedState: TImageLoadedState; -}) => { - const { baseUrl, user } = useContext(MessageContext); - - if (!image) { - return null; - } - - image = image.includes('http') ? image : `${baseUrl}/${image}?rc_uid=${user.id}&rc_token=${user.token}`; - - return ( - <> - setImageLoadedState('error')} - onLoad={() => setImageLoadedState('done')} - /> - - ); -}; - const UrlContent = React.memo( ({ title, description, theme }: { title: string; description: string; theme: TSupportedThemes }) => ( @@ -124,6 +92,8 @@ type TImageLoadedState = 'loading' | 'done' | 'error'; const Url = React.memo( ({ url, index, theme }: { url: IUrl; index: number; theme: TSupportedThemes }) => { const [imageLoadedState, setImageLoadedState] = useState('loading'); + const { baseUrl, user } = useContext(MessageContext); + if (!url || url?.ignoreParse || imageLoadedState === 'error') { return null; } @@ -137,6 +107,11 @@ const Url = React.memo( const hasContent = url.title || url.description; + let image = url.image || url.url; + if (image) { + image = image.includes('http') ? image : `${baseUrl}/${image}?rc_uid=${user.id}&rc_token=${user.token}`; + } + return ( <> - + {image ? ( + setImageLoadedState('error')} + onLoad={() => setImageLoadedState('done')} + /> + ) : null} {hasContent ? : null} @@ -182,7 +160,6 @@ const Urls = React.memo( (oldProps, newProps) => dequal(oldProps.urls, newProps.urls) ); -UrlImage.displayName = 'MessageUrlImage'; UrlContent.displayName = 'MessageUrlContent'; Url.displayName = 'MessageUrl'; Urls.displayName = 'MessageUrls';