From 2119cb4f85fca8bc3bdda0785721d4e8ec1f6e5a Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Tue, 22 Jun 2021 19:34:05 +0200
Subject: [PATCH] Fixed custom status issues (#5476) (#5477)

Fixed MM-36571 and MM-36601 issues by dispatching RECEIVED_ME action on websocket reconnecting
Added memoization in makeGetCustomStatus in custom status emoji component
Fixed e2e test case failing due to post header custom status emoji

(cherry picked from commit c06b5ecb4f9bf11fb2e2c566772bf808a817ffea)

Co-authored-by: Manoj Malik <manoj@brightscout.com>
---
 app/actions/websocket/index.ts                       | 3 +++
 app/components/custom_status/custom_status_emoji.tsx | 4 ++--
 app/components/post_list/post/header/header.tsx      | 1 +
 detox/e2e/test/custom_statuses/custom_status.e2e.js  | 4 ++--
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/actions/websocket/index.ts b/app/actions/websocket/index.ts
index 46500db84..46344650c 100644
--- a/app/actions/websocket/index.ts
+++ b/app/actions/websocket/index.ts
@@ -151,6 +151,9 @@ export function doReconnect(now: number) {
                 }
 
                 actions.push({
+                    type: UserTypes.RECEIVED_ME,
+                    data: me.user,
+                }, {
                     type: PreferenceTypes.RECEIVED_ALL_PREFERENCES,
                     data: me.preferences,
                 }, {
diff --git a/app/components/custom_status/custom_status_emoji.tsx b/app/components/custom_status/custom_status_emoji.tsx
index 29a891086..f5fcce0da 100644
--- a/app/components/custom_status/custom_status_emoji.tsx
+++ b/app/components/custom_status/custom_status_emoji.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useMemo} from 'react';
 import {Text, TextStyle} from 'react-native';
 import {useSelector} from 'react-redux';
 
@@ -17,7 +17,7 @@ interface ComponentProps {
 }
 
 const CustomStatusEmoji = ({emojiSize, userID, style, testID}: ComponentProps) => {
-    const getCustomStatus = makeGetCustomStatus();
+    const getCustomStatus = useMemo(makeGetCustomStatus, []);
     const customStatus = useSelector((state: GlobalState) => {
         return getCustomStatus(state, userID);
     });
diff --git a/app/components/post_list/post/header/header.tsx b/app/components/post_list/post/header/header.tsx
index 22c90e202..1f3ea8cb4 100644
--- a/app/components/post_list/post/header/header.tsx
+++ b/app/components/post_list/post/header/header.tsx
@@ -92,6 +92,7 @@ const Header = ({
                         <CustomStatusEmoji
                             userID={post.user_id}
                             style={style.customStatusEmoji}
+                            testID='post_header'
                         />
                     )}
                     {!isSystemPost &&
diff --git a/detox/e2e/test/custom_statuses/custom_status.e2e.js b/detox/e2e/test/custom_statuses/custom_status.e2e.js
index 270ef3c1b..287df0707 100644
--- a/detox/e2e/test/custom_statuses/custom_status.e2e.js
+++ b/detox/e2e/test/custom_statuses/custom_status.e2e.js
@@ -213,14 +213,14 @@ describe('Custom status', () => {
 
         // # Post a message and check if custom status emoji is present in the post header
         await ChannelScreen.postMessage(message);
-        await expect(element(by.id(`custom_status_emoji.${customStatus.emojiName}`).withAncestor(by.id('post_header')))).toBeVisible();
+        await expect(element(by.id(`post_header.custom_status_emoji.${customStatus.emojiName}`))).toBeVisible();
 
         // # Open the reply thread for the last post
         const {post} = await Post.apiGetLastPostInChannel(testChannel.id);
         await ChannelScreen.openReplyThreadFor(post.id, message);
 
         // * Check if the custom status emoji is present in the post header and close thread
-        await expect(element(by.id(`custom_status_emoji.${customStatus.emojiName}`).withAncestor(by.id('post_header')))).toBeVisible();
+        await expect(element(by.id(`post_header.custom_status_emoji.${customStatus.emojiName}`))).toBeVisible();
         await ThreadScreen.back();
 
         // # Open user profile screen