From 9509e1a83ee40462abec6154a314ae7d87ce76ef Mon Sep 17 00:00:00 2001
From: enahum <nahumhbl@gmail.com>
Date: Tue, 2 Jan 2018 19:24:03 -0300
Subject: [PATCH] Fix UI when rendering link previews in a reply (#1318)

* Fix UI when rendering link previews in a reply

* feedback review
---
 app/components/post/post.js                           | 11 ++++++++---
 .../post_attachment_opengraph.js                      |  7 ++++---
 app/components/post_body/post_body.js                 |  4 ++++
 .../post_body_additional_content.js                   |  4 +++-
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/components/post/post.js b/app/components/post/post.js
index 7bb6bdce9..c3298b6dc 100644
--- a/app/components/post/post.js
+++ b/app/components/post/post.js
@@ -287,17 +287,20 @@ class Post extends PureComponent {
         removePost(post);
     };
 
+    isReplyPost = () => {
+        const {renderReplies, post} = this.props;
+        return Boolean(renderReplies && post.root_id && !isPostEphemeral(post));
+    };
+
     renderReplyBar = () => {
         const {
             commentedOnPost,
             isFirstReply,
             isLastReply,
-            post,
-            renderReplies,
             theme
         } = this.props;
 
-        if (!renderReplies || !post.root_id || isPostEphemeral(post)) {
+        if (!this.isReplyPost()) {
             return null;
         }
 
@@ -367,6 +370,7 @@ class Post extends PureComponent {
         const style = getStyleSheet(theme);
         const selected = this.state && this.state.selected ? style.selected : null;
         const highlighted = highlight ? style.highlight : null;
+        const isReplyPost = this.isReplyPost();
 
         const onUsernamePress = Config.ExperimentalUsernamePressIsMention ? this.autofillUserMention : this.viewUserProfile;
 
@@ -411,6 +415,7 @@ class Post extends PureComponent {
                             toggleSelected={this.toggleSelected}
                             managedConfig={managedConfig}
                             isFlagged={isFlagged}
+                            isReplyPost={isReplyPost}
                         />
                     </View>
                 </View>
diff --git a/app/components/post_attachment_opengraph/post_attachment_opengraph.js b/app/components/post_attachment_opengraph/post_attachment_opengraph.js
index 8bd6c482e..a7b6a5385 100644
--- a/app/components/post_attachment_opengraph/post_attachment_opengraph.js
+++ b/app/components/post_attachment_opengraph/post_attachment_opengraph.js
@@ -26,6 +26,7 @@ export default class PostAttachmentOpenGraph extends PureComponent {
         actions: PropTypes.shape({
             getOpenGraphMetadata: PropTypes.func.isRequired
         }).isRequired,
+        isReplyPost: PropTypes.bool,
         link: PropTypes.string.isRequired,
         openGraphData: PropTypes.object,
         theme: PropTypes.object.isRequired
@@ -67,7 +68,7 @@ export default class PostAttachmentOpenGraph extends PureComponent {
     calculateLargeImageDimensions = (width, height) => {
         const {width: deviceWidth} = Dimensions.get('window');
         let maxHeight = MAX_IMAGE_HEIGHT;
-        let maxWidth = deviceWidth - 88;
+        let maxWidth = deviceWidth - 88 - (this.props.isReplyPost ? 15 : 0);
 
         if (height <= MAX_IMAGE_HEIGHT) {
             maxHeight = height;
@@ -160,7 +161,7 @@ export default class PostAttachmentOpenGraph extends PureComponent {
     };
 
     render() {
-        const {openGraphData, theme} = this.props;
+        const {isReplyPost, openGraphData, theme} = this.props;
         const {hasLargeImage, height, imageLoaded, imageUrl, offset, width} = this.state;
 
         if (!openGraphData || !openGraphData.description) {
@@ -187,7 +188,7 @@ export default class PostAttachmentOpenGraph extends PureComponent {
                         onPress={this.goToLink}
                     >
                         <Text
-                            style={style.siteSubtitle}
+                            style={[style.siteSubtitle, {marginRight: isReplyPost ? 10 : 0}]}
                             numberOfLines={3}
                             ellipsizeMode='tail'
                         >
diff --git a/app/components/post_body/post_body.js b/app/components/post_body/post_body.js
index 0edaaf00a..f5ebfa8b9 100644
--- a/app/components/post_body/post_body.js
+++ b/app/components/post_body/post_body.js
@@ -41,6 +41,7 @@ class PostBody extends PureComponent {
         isFlagged: PropTypes.bool,
         isPending: PropTypes.bool,
         isPostEphemeral: PropTypes.bool,
+        isReplyPost: PropTypes.bool,
         isSearchResult: PropTypes.bool,
         isSystemMessage: PropTypes.bool,
         managedConfig: PropTypes.object,
@@ -142,6 +143,7 @@ class PostBody extends PureComponent {
             isFlagged,
             isPending,
             isPostEphemeral,
+            isReplyPost,
             isSearchResult,
             isSystemMessage,
             intl,
@@ -266,6 +268,7 @@ class PostBody extends PureComponent {
                                 postId={postId}
                                 postProps={postProps}
                                 textStyles={textStyles}
+                                isReplyPost={isReplyPost}
                             />
                             {this.renderFileAttachments()}
                         </View>
@@ -290,6 +293,7 @@ class PostBody extends PureComponent {
                             postProps={postProps}
                             textStyles={textStyles}
                             onLongPress={this.showOptionsContext}
+                            isReplyPost={isReplyPost}
                         />
                         {this.renderFileAttachments()}
                         {hasReactions && <Reactions postId={postId}/>}
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 592749f96..7dd950e2f 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
@@ -32,6 +32,7 @@ export default class PostBodyAdditionalContent extends PureComponent {
         config: PropTypes.object,
         deviceHeight: PropTypes.number.isRequired,
         deviceWidth: PropTypes.number.isRequired,
+        isReplyPost: PropTypes.bool,
         link: PropTypes.string,
         message: PropTypes.string.isRequired,
         navigator: PropTypes.object.isRequired,
@@ -106,7 +107,7 @@ export default class PostBodyAdditionalContent extends PureComponent {
             return null;
         }
 
-        const {link, openGraphData, showLinkPreviews, theme} = this.props;
+        const {isReplyPost, link, openGraphData, showLinkPreviews, theme} = this.props;
         const attachments = this.getSlackAttachment();
         if (attachments) {
             return attachments;
@@ -115,6 +116,7 @@ export default class PostBodyAdditionalContent extends PureComponent {
         if (link && showLinkPreviews) {
             return (
                 <PostAttachmentOpenGraph
+                    isReplyPost={isReplyPost}
                     link={link}
                     openGraphData={openGraphData}
                     theme={theme}