[MM-18532] Remove reactions from long post screen (#3447)

* Remove reactions from long post screen

* Remove reaction post option

* Update app/screens/long_post/long_post.test.js

Co-Authored-By: Elias Nahum <nahumhbl@gmail.com>

* Update snapshot test

app/screens/long_post/__snapshots__/long_post.test.js.snap

@@ -0,0 +1,345 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LongPost should match snapshot 1`] = `
+LongPost {
+  "context": Object {
+    "intl": Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": "span",
+      "timeZone": null,
+    },
+  },
+  "goToThread": [Function],
+  "handleClose": [Function],
+  "handlePress": [Function],
+  "navigationEventListener": undefined,
+  "props": Object {
+    "actions": Object {
+      "loadThreadIfNecessary": [MockFunction],
+      "selectPost": [MockFunction],
+    },
+    "fileIds": Array [],
+    "intl": Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": "span",
+      "timeZone": null,
+    },
+    "isLandscape": false,
+    "postId": "post-id",
+    "theme": Object {
+      "awayIndicator": "#ffbc42",
+      "buttonBg": "#166de0",
+      "buttonColor": "#ffffff",
+      "centerChannelBg": "#ffffff",
+      "centerChannelColor": "#3d3c40",
+      "codeTheme": "github",
+      "dndIndicator": "#f74343",
+      "errorTextColor": "#fd5960",
+      "linkColor": "#2389d7",
+      "mentionBj": "#ffffff",
+      "mentionColor": "#145dbf",
+      "mentionHighlightBg": "#ffe577",
+      "mentionHighlightLink": "#166de0",
+      "newMessageSeparator": "#ff8800",
+      "onlineIndicator": "#06d6a0",
+      "sidebarBg": "#145dbf",
+      "sidebarHeaderBg": "#1153ab",
+      "sidebarHeaderTextColor": "#ffffff",
+      "sidebarText": "#ffffff",
+      "sidebarTextActiveBorder": "#579eff",
+      "sidebarTextActiveColor": "#ffffff",
+      "sidebarTextHoverBg": "#4578bf",
+      "sidebarUnreadText": "#ffffff",
+      "type": "Mattermost",
+    },
+  },
+  "refs": Object {},
+  "setState": [Function],
+  "state": null,
+  "updater": Updater {
+    "_callbacks": Array [],
+    "_renderer": ReactShallowRenderer {
+      "_context": Object {
+        "intl": Object {
+          "defaultFormats": Object {},
+          "defaultLocale": "en",
+          "formatDate": [Function],
+          "formatHTMLMessage": [Function],
+          "formatMessage": [Function],
+          "formatNumber": [Function],
+          "formatPlural": [Function],
+          "formatRelative": [Function],
+          "formatTime": [Function],
+          "formats": Object {},
+          "formatters": Object {
+            "getDateTimeFormat": [Function],
+            "getMessageFormat": [Function],
+            "getNumberFormat": [Function],
+            "getPluralFormat": [Function],
+            "getRelativeFormat": [Function],
+          },
+          "locale": "en",
+          "messages": Object {},
+          "now": [Function],
+          "onError": [Function],
+          "textComponent": "span",
+          "timeZone": null,
+        },
+      },
+      "_didScheduleRenderPhaseUpdate": false,
+      "_dispatcher": Object {
+        "readContext": [Function],
+        "useCallback": [Function],
+        "useContext": [Function],
+        "useDebugValue": [Function],
+        "useEffect": [Function],
+        "useImperativeHandle": [Function],
+        "useLayoutEffect": [Function],
+        "useMemo": [Function],
+        "useReducer": [Function],
+        "useRef": [Function],
+        "useState": [Function],
+      },
+      "_element": <LongPost
+        actions={
+          Object {
+            "loadThreadIfNecessary": [MockFunction],
+            "selectPost": [MockFunction],
+          }
+        }
+        fileIds={Array []}
+        intl={
+          Object {
+            "defaultFormats": Object {},
+            "defaultLocale": "en",
+            "formatDate": [Function],
+            "formatHTMLMessage": [Function],
+            "formatMessage": [Function],
+            "formatNumber": [Function],
+            "formatPlural": [Function],
+            "formatRelative": [Function],
+            "formatTime": [Function],
+            "formats": Object {},
+            "formatters": Object {
+              "getDateTimeFormat": [Function],
+              "getMessageFormat": [Function],
+              "getNumberFormat": [Function],
+              "getPluralFormat": [Function],
+              "getRelativeFormat": [Function],
+            },
+            "locale": "en",
+            "messages": Object {},
+            "now": [Function],
+            "onError": [Function],
+            "textComponent": "span",
+            "timeZone": null,
+          }
+        }
+        isLandscape={false}
+        postId="post-id"
+        theme={
+          Object {
+            "awayIndicator": "#ffbc42",
+            "buttonBg": "#166de0",
+            "buttonColor": "#ffffff",
+            "centerChannelBg": "#ffffff",
+            "centerChannelColor": "#3d3c40",
+            "codeTheme": "github",
+            "dndIndicator": "#f74343",
+            "errorTextColor": "#fd5960",
+            "linkColor": "#2389d7",
+            "mentionBj": "#ffffff",
+            "mentionColor": "#145dbf",
+            "mentionHighlightBg": "#ffe577",
+            "mentionHighlightLink": "#166de0",
+            "newMessageSeparator": "#ff8800",
+            "onlineIndicator": "#06d6a0",
+            "sidebarBg": "#145dbf",
+            "sidebarHeaderBg": "#1153ab",
+            "sidebarHeaderTextColor": "#ffffff",
+            "sidebarText": "#ffffff",
+            "sidebarTextActiveBorder": "#579eff",
+            "sidebarTextActiveColor": "#ffffff",
+            "sidebarTextHoverBg": "#4578bf",
+            "sidebarUnreadText": "#ffffff",
+            "type": "Mattermost",
+          }
+        }
+      />,
+      "_firstWorkInProgressHook": null,
+      "_forcedUpdate": false,
+      "_instance": [Circular],
+      "_isReRender": false,
+      "_newState": null,
+      "_numberOfReRenders": 0,
+      "_renderPhaseUpdates": null,
+      "_rendered": <Connect(SafeAreaIos)
+        backgroundColor="transparent"
+        excludeHeader={true}
+        footerColor="transparent"
+        forceTop={44}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flex": 1,
+                "marginTop": 20,
+              },
+              null,
+            ]
+          }
+        >
+          <withAnimatable(View)
+            animation="zoomIn"
+            delay={0}
+            direction="normal"
+            duration={200}
+            iterationCount={1}
+            iterationDelay={0}
+            onAnimationBegin={[Function]}
+            onAnimationEnd={[Function]}
+            onTransitionBegin={[Function]}
+            onTransitionEnd={[Function]}
+            style={
+              Object {
+                "backgroundColor": "#ffffff",
+                "borderRadius": 6,
+                "flex": 1,
+                "margin": 10,
+                "opacity": 0,
+              }
+            }
+            useNativeDriver={true}
+          >
+            <View
+              style={
+                Object {
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderBottomColor": "rgba(61,60,64,0.2)",
+                  "borderBottomWidth": 1,
+                  "borderTopLeftRadius": 6,
+                  "borderTopRightRadius": 6,
+                  "flexDirection": "row",
+                  "height": 44,
+                  "paddingRight": 16,
+                  "width": "100%",
+                }
+              }
+            >
+              <TouchableOpacity
+                activeOpacity={0.2}
+                onPress={[Function]}
+                style={
+                  Object {
+                    "height": 44,
+                    "justifyContent": "center",
+                    "paddingLeft": 7,
+                    "width": 40,
+                  }
+                }
+              >
+                <Icon
+                  allowFontScaling={false}
+                  color="#3d3c40"
+                  name="close"
+                  size={20}
+                />
+              </TouchableOpacity>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "paddingRight": 40,
+                  }
+                }
+              >
+                <FormattedText
+                  defaultMessage="{channelName} - Post"
+                  ellipsizeMode="tail"
+                  id="mobile.long_post_title"
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "color": "#3d3c40",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                  values={
+                    Object {
+                      "channelName": undefined,
+                    }
+                  }
+                />
+              </View>
+            </View>
+            <ScrollViewMock
+              style={
+                Object {
+                  "backgroundColor": "#ffffff",
+                  "flex": 1,
+                }
+              }
+            >
+              <Connect(Post)
+                isSearchResult={false}
+                onPress={[Function]}
+                postId="post-id"
+                shouldRenderReplyButton={false}
+                showAddReaction={false}
+                showLongPost={true}
+              />
+            </ScrollViewMock>
+          </withAnimatable(View)>
+        </View>
+      </Connect(SafeAreaIos)>,
+      "_rendering": false,
+      "_updater": [Circular],
+      "_workInProgressHook": null,
+    },
+  },
+}
+`;

app/screens/long_post/index.js

@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 
 import {selectPost} from 'mattermost-redux/actions/posts';
 import {makeGetChannel} from 'mattermost-redux/selectors/entities/channels';
-import {getPost, makeGetReactionsForPost} from 'mattermost-redux/selectors/entities/posts';
+import {getPost} from 'mattermost-redux/selectors/entities/posts';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 import {loadThreadIfNecessary} from 'app/actions/views/channel';
@@ -15,16 +15,13 @@ import LongPost from './long_post';
 
 function makeMapStateToProps() {
     const getChannel = makeGetChannel();
-    const getReactionsForPost = makeGetReactionsForPost();
 
     return function mapStateToProps(state, ownProps) {
         const post = getPost(state, ownProps.postId);
         const channel = post ? getChannel(state, {id: post.channel_id}) : null;
-        const reactions = getReactionsForPost(state, post.id);
 
         return {
             channelName: channel ? channel.display_name : '',
-            hasReactions: (reactions && Object.keys(reactions).length > 0) || Boolean(post.has_reactions),
             inThreadView: Boolean(state.entities.posts.selectedPostId),
             fileIds: post ? post.file_ids : false,
             theme: getTheme(state),

app/screens/long_post/long_post.js

@@ -16,7 +16,6 @@ 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 Reactions from 'app/components/reactions';
 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';
@@ -49,7 +48,6 @@ export default class LongPost extends PureComponent {
         }).isRequired,
         channelName: PropTypes.string,
         fileIds: PropTypes.array,
-        hasReactions: PropTypes.bool,
         isPermalink: PropTypes.bool,
         inThreadView: PropTypes.bool,
         managedConfig: PropTypes.object,
@@ -136,28 +134,10 @@ export default class LongPost extends PureComponent {
         return attachments;
     }
 
-    renderReactions = (style) => {
-        const {hasReactions, postId} = this.props;
-
-        if (!hasReactions) {
-            return null;
-        }
-
-        return (
-            <View style={style.reactions}>
-                <Reactions
-                    position='left'
-                    postId={postId}
-                />
-            </View>
-        );
-    };
-
     render() {
         const {
             channelName,
             fileIds,
-            hasReactions,
             managedConfig,
             onHashtagPress,
             onPermalinkPress,
@@ -168,11 +148,10 @@ export default class LongPost extends PureComponent {
         const style = getStyleSheet(theme);
 
         let footer;
-        if (hasReactions || fileIds.length) {
+        if (fileIds.length) {
             footer = (
                 <View style={style.footer}>
                     {this.renderFileAttachments(style)}
-                    {this.renderReactions(style)}
                 </View>
             );
         }
@@ -222,6 +201,7 @@ export default class LongPost extends PureComponent {
                                 onPress={this.handlePress}
                                 isSearchResult={false}
                                 showLongPost={true}
+                                showAddReaction={false}
                                 onHashtagPress={onHashtagPress}
                                 onPermalinkPress={onPermalinkPress}
                                 managedConfig={managedConfig}
@@ -297,9 +277,5 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             height: 95,
             width: '100%',
         },
-        reactions: {
-            height: 47,
-            width: '100%',
-        },
     };
 });

app/screens/long_post/long_post.test.js

@@ -0,0 +1,32 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import Preferences from 'mattermost-redux/constants/preferences';
+
+import {shallowWithIntl} from 'test/intl-test-helper';
+
+import LongPost from './long_post';
+
+jest.mock('react-native-doc-viewer', () => ({
+    openDoc: jest.fn(),
+}));
+
+describe('LongPost', () => {
+    const baseProps = {
+        actions: {
+            loadThreadIfNecessary: jest.fn(),
+            selectPost: jest.fn(),
+        },
+        postId: 'post-id',
+        theme: Preferences.THEMES.default,
+        isLandscape: false,
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallowWithIntl(<LongPost {...baseProps}/>);
+
+        expect(wrapper.instance()).toMatchSnapshot();
+    });
+});