From dca35ac418b29f5aa8c59bc4cbae8f9480880816 Mon Sep 17 00:00:00 2001
From: Chris Duarte <csduarte@users.noreply.github.com>
Date: Fri, 10 Mar 2017 10:28:57 -0800
Subject: [PATCH] PLT-5675 Fix posts rendering as blank (#337)

* PLT-5675 RN: Posts rendering as blank

* Review feedback
---
 app/components/post/post.js | 188 +++++++++++++++++++-----------------
 app/scenes/root/root.js     |   9 +-
 2 files changed, 108 insertions(+), 89 deletions(-)

diff --git a/app/components/post/post.js b/app/components/post/post.js
index 8ae8221e0..c0d9c6cad 100644
--- a/app/components/post/post.js
+++ b/app/components/post/post.js
@@ -3,6 +3,7 @@
 
 import React, {Component, PropTypes} from 'react';
 import {
+    Platform,
     Image,
     StyleSheet,
     Text,
@@ -20,76 +21,6 @@ import {makeStyleSheetFromTheme} from 'app/utils/theme';
 
 import {isSystemMessage} from 'service/utils/post_utils.js';
 
-const getStyleSheet = makeStyleSheetFromTheme((theme) => {
-    return StyleSheet.create({
-        container: {
-            backgroundColor: theme.centerChannelBg,
-            flexDirection: 'row'
-        },
-        rightColumn: {
-            flex: 1,
-            flexDirection: 'column',
-            marginRight: 12
-        },
-        postInfoContainer: {
-            alignItems: 'center',
-            flexDirection: 'row',
-            marginTop: 10
-        },
-        messageContainerWithReplyBar: {
-            flexDirection: 'row'
-        },
-        profilePictureContainer: {
-            marginBottom: 10,
-            marginRight: 10,
-            marginLeft: 12,
-            marginTop: 10
-        },
-        replyBar: {
-            backgroundColor: theme.centerChannelColor,
-            opacity: 0.1,
-            marginRight: 10,
-            width: 3,
-            flexBasis: 3
-        },
-        replyBarFirst: {
-            marginTop: 10
-        },
-        replyBarLast: {
-            marginBottom: 10
-        },
-        displayName: {
-            fontSize: 14,
-            fontWeight: '600',
-            marginRight: 10,
-            color: theme.centerChannelColor
-        },
-        time: {
-            color: theme.centerChannelColor,
-            fontSize: 12,
-            opacity: 0.5
-        },
-        commentedOn: {
-            color: theme.centerChannelColor,
-            lineHeight: 21
-        },
-        message: {
-            color: theme.centerChannelColor,
-            fontSize: 14,
-            lineHeight: 21,
-            marginBottom: 10
-        },
-        systemMessage: {
-            opacity: 0.5
-        },
-        webhookMessage: {
-            color: theme.centerChannelColor,
-            fontSize: 16,
-            fontWeight: '600'
-        }
-    });
-});
-
 export default class Post extends Component {
     static propTypes = {
         style: View.propTypes.style,
@@ -282,10 +213,12 @@ export default class Post extends Component {
                         </View>
                         <View style={style.messageContainerWithReplyBar}>
                             {this.renderReplyBar(style)}
+                            {this.props.post.message.length > 0 &&
+                                <Text style={messageStyle}>
+                                    {this.props.post.message}
+                                </Text>
+                            }
                             {this.renderFileAttachments()}
-                            <Text style={messageStyle}>
-                                {this.props.post.message}
-                            </Text>
                         </View>
                     </View>
                 </View>
@@ -296,19 +229,23 @@ export default class Post extends Component {
                     <View style={style.profilePictureContainer}>
                         {profilePicture}
                     </View>
-                    {this.renderReplyBar(style)}
-                    <View style={style.rightColumn}>
-                        <View style={style.postInfoContainer}>
-                            {displayName}
-                            <Text style={style.time}>
-                                <FormattedTime value={this.props.post.create_at}/>
-                            </Text>
-                        </View>
-                        <View style={style.messageContainer}>
-                            {this.renderFileAttachments()}
-                            <Text style={messageStyle}>
-                                {this.props.post.message}
-                            </Text>
+                    <View style={style.messageContainerWithReplyBar}>
+                        {this.renderReplyBar(style)}
+                        <View style={style.rightColumn}>
+                            <View style={style.postInfoContainer}>
+                                {displayName}
+                                <Text style={style.time}>
+                                    <FormattedTime value={this.props.post.create_at}/>
+                                </Text>
+                            </View>
+                            <View style={style.messageContainer}>
+                                {this.props.post.message.length > 0 &&
+                                    <Text style={messageStyle}>
+                                        {this.props.post.message}
+                                    </Text>
+                                }
+                                {this.renderFileAttachments()}
+                            </View>
                         </View>
                     </View>
                 </View>
@@ -326,3 +263,82 @@ export default class Post extends Component {
         return contents;
     }
 }
+
+const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    return StyleSheet.create({
+        container: {
+            backgroundColor: theme.centerChannelBg,
+            flexDirection: 'row'
+        },
+        rightColumn: {
+            flex: 1,
+            flexDirection: 'column',
+            marginRight: 12
+        },
+        postInfoContainer: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            marginTop: 10
+        },
+        messageContainerWithReplyBar: {
+            flexDirection: 'row',
+            flex: 1
+        },
+        profilePictureContainer: {
+            marginBottom: 10,
+            marginRight: 10,
+            marginLeft: 12,
+            marginTop: 10
+        },
+        replyBar: {
+            backgroundColor: theme.centerChannelColor,
+            opacity: 0.1,
+            marginRight: 10,
+            ...Platform.select({
+                ios: {
+                    width: 3,
+                    flexBasis: 3
+                },
+                android: {
+                    width: 6,
+                    flexBasis: 6
+                }
+            })
+        },
+        replyBarFirst: {
+            marginTop: 10
+        },
+        replyBarLast: {
+            marginBottom: 10
+        },
+        displayName: {
+            fontSize: 14,
+            fontWeight: '600',
+            marginRight: 10,
+            color: theme.centerChannelColor
+        },
+        time: {
+            color: theme.centerChannelColor,
+            fontSize: 12,
+            opacity: 0.5
+        },
+        commentedOn: {
+            color: theme.centerChannelColor,
+            lineHeight: 21
+        },
+        message: {
+            color: theme.centerChannelColor,
+            fontSize: 14,
+            lineHeight: 21,
+            marginBottom: 10
+        },
+        systemMessage: {
+            opacity: 0.5
+        },
+        webhookMessage: {
+            color: theme.centerChannelColor,
+            fontSize: 16,
+            fontWeight: '600'
+        }
+    });
+});
diff --git a/app/scenes/root/root.js b/app/scenes/root/root.js
index 569caa64d..90284ef67 100644
--- a/app/scenes/root/root.js
+++ b/app/scenes/root/root.js
@@ -77,9 +77,12 @@ export default class Root extends PureComponent {
     };
 
     selectServer = async () => {
-        const {url} = JSON.parse(await AsyncStorage.getItem('storage'));
-        if (url) {
-            await this.props.actions.handleServerUrlChanged(url);
+        const storage = await AsyncStorage.getItem('storage');
+        if (storage) {
+            const {url} = JSON.parse(await AsyncStorage.getItem('storage'));
+            if (url) {
+                await this.props.actions.handleServerUrlChanged(url);
+            }
         }
         this.props.actions.goToSelectServer();
     };