fix: android anrs due to popover (#10306)

artsy · May 29, 2024 · eac7e9b · eac7e9b
1 parent 84d3e78
commit eac7e9b
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 53 deletions.
diff --git a/src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tests.tsx b/src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tests.tsx
@@ -41,11 +41,11 @@ describe("MyCollectionArtworkGridItem", () => {
       }),
     })
 
-    expect(screen.queryByLabelText("Go to artwork details")).toBeOnTheScreen()
-    expect(screen.queryByTestId("Fallback")).toBeOnTheScreen()
+    expect(screen.getByLabelText("Go to artwork details")).toBeOnTheScreen()
+    expect(screen.getByTestId("Fallback")).toBeOnTheScreen()
 
-    expect(screen.queryByText("artistNames")).toBeOnTheScreen()
-    expect(screen.queryByText("title")).toBeOnTheScreen()
+    expect(screen.getByText("artistNames")).toBeOnTheScreen()
+    expect(screen.getByText("title")).toBeOnTheScreen()
   })
 
   it("navigates to artwork detail on tap", () => {
@@ -95,7 +95,7 @@ describe("MyCollectionArtworkGridItem", () => {
       }),
     })
 
-    expect(screen.queryByTestId("Fallback")).toBeOnTheScreen()
+    expect(screen.getByTestId("Fallback")).toBeOnTheScreen()
   })
 
   it("renders the high demand icon if artist is P1 and demand rank is over 9", () => {

diff --git a/src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tsx b/src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tsx
@@ -1,6 +1,5 @@
 import { tappedCollectedArtwork } from "@artsy/cohesion"
-import { Flex, Box, Text, Popover } from "@artsy/palette-mobile"
-import { themeGet } from "@styled-system/theme-get"
+import { Flex, Box, Text, Popover, useColor } from "@artsy/palette-mobile"
 import { MyCollectionArtworkGridItem_artwork$data } from "__generated__/MyCollectionArtworkGridItem_artwork.graphql"
 import { DEFAULT_SECTION_MARGIN } from "app/Components/ArtworkGrids/InfiniteScrollArtworksGrid"
 import HighDemandIcon from "app/Components/Icons/HighDemandIcon"
@@ -12,11 +11,10 @@ import { navigate } from "app/system/navigation/navigate"
 import { useLocalImage } from "app/utils/LocalImageStore"
 import { useScreenDimensions } from "app/utils/hooks"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
-import { View } from "react-native"
+import { TouchableHighlight, View } from "react-native"
 import { isTablet } from "react-native-device-info"
 import { createFragmentContainer, graphql } from "react-relay"
 import { useTracking } from "react-tracking"
-import styled from "styled-components/native"
 
 interface MyCollectionArtworkGridItemProps {
   artwork: MyCollectionArtworkGridItem_artwork$data
@@ -27,6 +25,7 @@ const MyCollectionArtworkGridItem: React.FC<MyCollectionArtworkGridItemProps> =
   artwork,
   displayToolTip,
 }) => {
+  const color = useColor()
   const { trackEvent } = useTracking()
   const displayImage = artwork.images?.find((i: any) => i?.isDefault) || artwork.images?.[0]
   const { width } = useScreenDimensions()
@@ -65,40 +64,42 @@ const MyCollectionArtworkGridItem: React.FC<MyCollectionArtworkGridItemProps> =
   }
 
   return (
-    <TouchElement
-      accessibilityLabel="Go to artwork details"
-      accessibilityRole="link"
-      onPress={() => {
-        if (!!artist) {
-          trackEvent(tracks.tappedCollectedArtwork(internalID, slug))
-          navigate("/my-collection/artwork/" + slug, {
-            passProps: {
-              medium,
-              category: mediumType?.name,
-              artistInternalID: artist.internalID,
-            },
-          })
-        } else {
-          console.warn("MyCollectionArtworkGridItem: Error: Missing artist.artistID")
-        }
-      }}
+    <Popover
+      visible={!!displayToolTip && isActive}
+      onDismiss={handleDismissPopover}
+      onPressOutside={handleDismissPopover}
+      onCloseComplete={clearActivePopover}
+      placement="top"
+      title={
+        <Text variant="xs" color="white100" fontWeight="500">
+          Interested in Selling This Work?
+        </Text>
+      }
+      content={
+        <Text variant="xs" color="white100">
+          Submit for sale and let our experts find the best selling option for you.
+        </Text>
+      }
     >
-      <Popover
-        visible={!!displayToolTip && isActive}
-        onDismiss={handleDismissPopover}
-        onPressOutside={handleDismissPopover}
-        onCloseComplete={clearActivePopover}
-        placement="top"
-        title={
-          <Text variant="xs" color="white100" fontWeight="500">
-            Interested in Selling This Work?
-          </Text>
-        }
-        content={
-          <Text variant="xs" color="white100">
-            Submit for sale and let our experts find the best selling option for you.
-          </Text>
-        }
+      <TouchableHighlight
+        underlayColor={color("white100")}
+        activeOpacity={0.8}
+        accessibilityLabel="Go to artwork details"
+        accessibilityRole="link"
+        onPress={() => {
+          if (!!artist) {
+            trackEvent(tracks.tappedCollectedArtwork(internalID, slug))
+            navigate("/my-collection/artwork/" + slug, {
+              passProps: {
+                medium,
+                category: mediumType?.name,
+                artistInternalID: artist.internalID,
+              },
+            })
+          } else {
+            console.warn("MyCollectionArtworkGridItem: Error: Missing artist.artistID")
+          }
+        }}
       >
         <View>
           <MyCollectionImageView
@@ -135,8 +136,8 @@ const MyCollectionArtworkGridItem: React.FC<MyCollectionArtworkGridItemProps> =
             ) : null}
           </Box>
         </View>
-      </Popover>
-    </TouchElement>
+      </TouchableHighlight>
+    </Popover>
   )
 }
 
@@ -183,15 +184,6 @@ export const MyCollectionArtworkGridItemFragmentContainer = createFragmentContai
   }
 )
 
-const TouchElement = styled.TouchableHighlight.attrs(() => ({
-  underlayColor: themeGet("colors.white100"),
-  activeOpacity: 0.8,
-}))``
-
-export const tests = {
-  TouchElement,
-}
-
 const tracks = {
   tappedCollectedArtwork: (targetID: string, targetSlug: string) => {
     return tappedCollectedArtwork({