From afd3e3374cc9cddbf81d03a0c7110c088692a713 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Thu, 28 Nov 2019 06:30:02 -0300
Subject: [PATCH] MM-20689 Long post to use all available space (#3623)

* MM-20689 Long post to use all available space

* Add footer and update snapshots

* Fix footer ui

* Remove file_ids from connected component
---
 .../__snapshots__/long_post.test.js.snap      | 18 ++++++-
 app/screens/long_post/index.js                |  1 -
 app/screens/long_post/long_post.js            | 53 ++-----------------
 3 files changed, 20 insertions(+), 52 deletions(-)

diff --git a/app/screens/long_post/__snapshots__/long_post.test.js.snap b/app/screens/long_post/__snapshots__/long_post.test.js.snap
index 95f9c6973..e28205ee7 100644
--- a/app/screens/long_post/__snapshots__/long_post.test.js.snap
+++ b/app/screens/long_post/__snapshots__/long_post.test.js.snap
@@ -38,7 +38,6 @@ LongPost {
       "loadThreadIfNecessary": [MockFunction],
       "selectPost": [MockFunction],
     },
-    "fileIds": Array [],
     "intl": Object {
       "defaultFormats": Object {},
       "defaultLocale": "en",
@@ -150,7 +149,6 @@ LongPost {
             "selectPost": [MockFunction],
           }
         }
-        fileIds={Array []}
         intl={
           Object {
             "defaultFormats": Object {},
@@ -337,6 +335,22 @@ LongPost {
                 showLongPost={true}
               />
             </ScrollViewMock>
+            <View
+              style={
+                Object {
+                  "alignItems": "flex-start",
+                  "backgroundColor": "#ffffff",
+                  "borderBottomColor": "rgba(61,60,64,0.2)",
+                  "borderBottomLeftRadius": 6,
+                  "borderBottomRightRadius": 6,
+                  "borderBottomWidth": 1,
+                  "flexDirection": "column",
+                  "justifyContent": "center",
+                  "marginBottom": 10,
+                  "paddingLeft": 16,
+                }
+              }
+            />
           </withAnimatable(View)>
         </View>
       </Connect(SafeAreaIos)>,
diff --git a/app/screens/long_post/index.js b/app/screens/long_post/index.js
index a0ab4f3e4..e80ffee2c 100644
--- a/app/screens/long_post/index.js
+++ b/app/screens/long_post/index.js
@@ -23,7 +23,6 @@ function makeMapStateToProps() {
         return {
             channelName: channel ? channel.display_name : '',
             inThreadView: Boolean(state.entities.posts.selectedPostId),
-            fileIds: post ? post.file_ids : false,
             theme: getTheme(state),
             isLandscape: isLandscape(state),
         };
diff --git a/app/screens/long_post/long_post.js b/app/screens/long_post/long_post.js
index 754a11798..16b4ba8fd 100644
--- a/app/screens/long_post/long_post.js
+++ b/app/screens/long_post/long_post.js
@@ -13,12 +13,10 @@ import * as Animatable from 'react-native-animatable';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import {Navigation} from 'react-native-navigation';
 
-import FileAttachmentList from 'app/components/file_attachment_list';
 import FormattedText from 'app/components/formatted_text';
 import Post from 'app/components/post';
 import SafeAreaView from 'app/components/safe_area_view';
 import {marginHorizontal as margin} from 'app/components/safe_area_view/iphone_x_spacing';
-import {emptyFunction} from 'app/utils/general';
 import {preventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 import {goToScreen, dismissModal} from 'app/actions/navigation';
@@ -47,7 +45,6 @@ export default class LongPost extends PureComponent {
             selectPost: PropTypes.func.isRequired,
         }).isRequired,
         channelName: PropTypes.string,
-        fileIds: PropTypes.array,
         isPermalink: PropTypes.bool,
         inThreadView: PropTypes.bool,
         managedConfig: PropTypes.object,
@@ -58,10 +55,6 @@ export default class LongPost extends PureComponent {
         isLandscape: PropTypes.bool.isRequired,
     };
 
-    static defaultProps = {
-        fileIds: [],
-    };
-
     static contextTypes = {
         intl: intlShape.isRequired,
     };
@@ -115,33 +108,9 @@ export default class LongPost extends PureComponent {
         }
     };
 
-    renderFileAttachments(style) {
-        const {
-            fileIds,
-            postId,
-        } = this.props;
-
-        let attachments;
-        if (fileIds.length > 0) {
-            attachments = (
-                <View style={style.attachments}>
-                    <FileAttachmentList
-                        fileIds={fileIds}
-                        isFailed={false}
-                        onLongPress={emptyFunction}
-                        postId={postId}
-                        toggleSelected={emptyFunction}
-                    />
-                </View>
-            );
-        }
-        return attachments;
-    }
-
     render() {
         const {
             channelName,
-            fileIds,
             managedConfig,
             onHashtagPress,
             onPermalinkPress,
@@ -151,15 +120,6 @@ export default class LongPost extends PureComponent {
         } = this.props;
         const style = getStyleSheet(theme);
 
-        let footer;
-        if (fileIds.length) {
-            footer = (
-                <View style={style.footer}>
-                    {this.renderFileAttachments(style)}
-                </View>
-            );
-        }
-
         return (
             <SafeAreaView
                 backgroundColor='transparent'
@@ -211,7 +171,7 @@ export default class LongPost extends PureComponent {
                                 managedConfig={managedConfig}
                             />
                         </ScrollView>
-                        {footer}
+                        <View style={style.footer}/>
                     </Animatable.View>
                 </View>
             </SafeAreaView>
@@ -267,19 +227,14 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         footer: {
             alignItems: 'flex-start',
             justifyContent: 'center',
-            borderTopColor: changeOpacity(theme.centerChannelColor, 0.2),
-            borderTopWidth: 1,
+            borderBottomColor: changeOpacity(theme.centerChannelColor, 0.2),
+            borderBottomWidth: 1,
             backgroundColor: theme.centerChannelBg,
             borderBottomLeftRadius: 6,
             borderBottomRightRadius: 6,
             flexDirection: 'column',
-            marginVertical: 10,
+            marginBottom: 10,
             paddingLeft: 16,
         },
-        attachments: {
-            backgroundColor: theme.centerChannelBg,
-            height: 95,
-            width: '100%',
-        },
     };
 });