Fix race condition when showing the turorial (#7599) (#7616)

(cherry picked from commit 12a29fe33e)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>

app/components/tutorial_highlight/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback} from 'react';
-import {Modal, StyleSheet, useWindowDimensions, View} from 'react-native';
+import {Modal, useWindowDimensions} from 'react-native';
 
 import HighlightItem from './item';
 
@@ -11,11 +11,10 @@ type Props = {
     itemBounds: TutorialItemBounds;
     itemBorderRadius?: number;
     onDismiss: () => void;
-    onLayout: () => void;
     onShow?: () => void;
 }
 
-const TutorialHighlight = ({children, itemBounds, itemBorderRadius, onDismiss, onLayout, onShow}: Props) => {
+const TutorialHighlight = ({children, itemBounds, itemBorderRadius, onDismiss, onShow}: Props) => {
     const {width, height} = useWindowDimensions();
 
     const handleShowTutorial = useCallback(() => {
@@ -26,19 +25,13 @@ const TutorialHighlight = ({children, itemBounds, itemBorderRadius, onDismiss, o
 
     return (
         <Modal
-            visible={true}
+            visible={itemBounds.endX > 0}
             transparent={true}
             animationType='fade'
             onDismiss={onDismiss}
             onRequestClose={onDismiss}
             testID='tutorial_highlight'
         >
-            <View
-                style={StyleSheet.absoluteFill}
-                pointerEvents='box-none'
-                onLayout={onLayout}
-            />
-            {itemBounds.endX > 0 &&
             <HighlightItem
                 borderRadius={itemBorderRadius}
                 itemBounds={itemBounds}
@@ -47,7 +40,6 @@ const TutorialHighlight = ({children, itemBounds, itemBorderRadius, onDismiss, o
                 width={width}
                 onLayout={handleShowTutorial}
             />
-            }
             {children}
         </Modal>
     );

app/components/user_item/user_item.tsx

@@ -32,6 +32,7 @@ type Props = {
     rightDecorator?: React.ReactNode;
     onUserPress?: (user: UserProfile | UserModel) => void;
     onUserLongPress?: (user: UserProfile | UserModel) => void;
+    onLayout?: () => void;
     disabled?: boolean;
     viewRef?: React.LegacyRef<View>;
     padding?: number;
@@ -102,6 +103,7 @@ const UserItem = ({
     locale,
     teammateNameDisplay,
     rightDecorator,
+    onLayout,
     onUserPress,
     onUserLongPress,
     disabled = false,
@@ -159,6 +161,7 @@ const UserItem = ({
             onPress={onPress}
             onLongPress={onLongPress}
             disabled={!(onUserPress || onUserLongPress)}
+            onLayout={onLayout}
         >
             <View
                 ref={viewRef}

app/components/user_list/__snapshots__/index.test.tsx.snap

@@ -138,6 +138,7 @@ exports[`components/channel_list_row should show no results 1`] = `
         collapsable={false}
         focusable={true}
         onClick={[Function]}
+        onLayout={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
         onResponderRelease={[Function]}
@@ -424,6 +425,7 @@ exports[`components/channel_list_row should show results and tutorial 1`] = `
         collapsable={false}
         focusable={true}
         onClick={[Function]}
+        onLayout={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
         onResponderRelease={[Function]}
@@ -551,79 +553,8 @@ exports[`components/channel_list_row should show results and tutorial 1`] = `
         onRequestClose={[Function]}
         testID="tutorial_highlight"
         transparent={true}
-        visible={true}
-      >
-        <View
-          onLayout={[Function]}
-          pointerEvents="box-none"
-          style={
-            {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        />
-        <View
-          pointerEvents="none"
-          style={
-            [
-              {
-                "alignItems": "center",
-                "bottom": 0,
-                "justifyContent": "center",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              undefined,
-            ]
-          }
-          testID="tutorial_swipe_left"
-        >
-          <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 8,
-                  "height": 161,
-                  "padding": 16,
-                  "width": 247,
-                },
-                {
-                  "top": -74,
-                },
-              ]
-            }
-          >
-            <long_press_illustration.svg />
-            <Text
-              style={
-                [
-                  {
-                    "color": "#3f4350",
-                    "fontFamily": "Metropolis-SemiBold",
-                    "fontSize": 16,
-                    "fontWeight": "600",
-                    "lineHeight": 24,
-                    "marginTop": 8,
-                    "paddingHorizontal": 12,
-                    "textAlign": "center",
-                  },
-                  undefined,
-                ]
-              }
-            >
-              Long-press on an item to view a user's profile
-            </Text>
-          </View>
-        </View>
-      </Modal>
+        visible={false}
+      />
     </View>
     <View
       onFocusCapture={[Function]}
@@ -790,6 +721,7 @@ exports[`components/channel_list_row should show results no tutorial 1`] = `
         collapsable={false}
         focusable={true}
         onClick={[Function]}
+        onLayout={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
         onResponderRelease={[Function]}
@@ -1108,6 +1040,7 @@ exports[`components/channel_list_row should show results no tutorial 2 users 1`]
         collapsable={false}
         focusable={true}
         onClick={[Function]}
+        onLayout={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
         onResponderRelease={[Function]}
@@ -1299,6 +1232,7 @@ exports[`components/channel_list_row should show results no tutorial 2 users 1`]
         collapsable={false}
         focusable={true}
         onClick={[Function]}
+        onLayout={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
         onResponderRelease={[Function]}

app/components/user_list_row/index.tsx

@@ -155,8 +155,10 @@ function UserListRow({
     }, [isChannelAdmin, showManageMode, theme]);
 
     const onLayout = useCallback(() => {
-        startTutorial();
-    }, []);
+        if (showTutorial) {
+            startTutorial();
+        }
+    }, [showTutorial]);
 
     const icon = useMemo(() => {
         if (!selectable && !selected) {
@@ -190,17 +192,19 @@ function UserListRow({
                 viewRef={viewRef}
                 padding={20}
                 includeMargin={includeMargin}
+                onLayout={onLayout}
             />
             {showTutorial &&
             <TutorialHighlight
                 itemBounds={itemBounds}
                 onDismiss={handleDismissTutorial}
-                onLayout={onLayout}
             >
+                {Boolean(itemBounds.endX) &&
                 <TutorialLongPress
                     message={formatMessage({id: 'user.tutorial.long_press', defaultMessage: "Long-press on an item to view a user's profile"})}
                     style={isTablet ? style.tutorialTablet : style.tutorial}
                 />
+                }
             </TutorialHighlight>
             }
         </>

app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx

@@ -213,9 +213,11 @@ const ServerItem = ({
     };
 
     const onLayout = useCallback(() => {
-        swipeable.current?.close();
-        startTutorial();
-    }, []);
+        if (showTutorial) {
+            swipeable.current?.close();
+            startTutorial();
+        }
+    }, [showTutorial]);
 
     const containerStyle = useMemo(() => {
         const style: StyleProp<ViewStyle> = [styles.container];
@@ -390,6 +392,7 @@ const ServerItem = ({
                     style={containerStyle}
                     ref={viewRef}
                     testID={serverItemTestId}
+                    onLayout={onLayout}
                 >
                     <RectButton
                         onPress={onServerPressed}
@@ -474,13 +477,14 @@ const ServerItem = ({
                 itemBounds={itemBounds}
                 onDismiss={handleDismissTutorial}
                 onShow={handleShowTutorial}
-                onLayout={onLayout}
                 itemBorderRadius={8}
             >
+                {Boolean(itemBounds.endX) &&
                 <TutorialSwipeLeft
                     message={intl.formatMessage({id: 'server.tutorial.swipe', defaultMessage: 'Swipe left on a server to see more actions'})}
                     style={isTablet ? styles.tutorialTablet : styles.tutorial}
                 />
+                }
             </TutorialHighlight>
             }
         </>