feat: Replace Touchable with Routerlink for prefetching on artwork an…

…d artist rails (#11383) * feat: Prefetch home screen links * prefetch artist query * prefetch artist & artwork query * recently sold * tests * re * revert logger * comments
artsy · Jan 15, 2025 · aa6c47d · aa6c47d
1 parent dd255e5
commit aa6c47d
Show file tree

Hide file tree

Showing 29 changed files with 143 additions and 204 deletions.
diff --git a/src/app/Components/ArtworkRail/ArtworkRail.tsx b/src/app/Components/ArtworkRail/ArtworkRail.tsx
@@ -1,4 +1,5 @@
 import { Flex, SkeletonBox, SkeletonText, Spacer } from "@artsy/palette-mobile"
+import { FlashList } from "@shopify/flash-list"
 import {
   ArtworkRail_artworks$data,
   ArtworkRail_artworks$key,
@@ -9,8 +10,6 @@ import {
   ARTWORK_RAIL_CARD_MIN_WIDTH,
 } from "app/Components/ArtworkRail/ArtworkRailCardImage"
 import { BrowseMoreRailCard } from "app/Components/BrowseMoreRailCard"
-import { PrefetchFlashList } from "app/Components/PrefetchFlashList"
-import { PrefetchFlatList } from "app/Components/PrefetchFlatList"
 import { RandomWidthPlaceholderText } from "app/utils/placeholders"
 import { ArtworkActionTrackingProps } from "app/utils/track/ArtworkActions"
 import React, { memo, ReactElement, useCallback } from "react"
@@ -33,6 +32,7 @@ export interface ArtworkRailProps extends ArtworkActionTrackingProps {
   ListFooterComponent?: ReactElement | null
   ListHeaderComponent?: ReactElement | null
   listRef?: React.RefObject<FlatList<any>>
+  itemHref?(artwork: Artwork): string
   onEndReached?: () => void
   onEndReachedThreshold?: number
   onMorePress?: () => void
@@ -50,6 +50,7 @@ export const ArtworkRail: React.FC<ArtworkRailProps> = memo(
     ListHeaderComponent = <Spacer x={2} />,
     ListFooterComponent = <Spacer x={2} />,
     hideArtistName = false,
+    itemHref,
     showPartnerName = true,
     dark = false,
     showSaveIcon = false,
@@ -68,6 +69,7 @@ export const ArtworkRail: React.FC<ArtworkRailProps> = memo(
           <ArtworkRailCard
             testID={`artwork-${item.slug}`}
             artwork={item}
+            href={itemHref?.(item)}
             showPartnerName={showPartnerName}
             hideArtistName={hideArtistName}
             dark={dark}
@@ -86,18 +88,16 @@ export const ArtworkRail: React.FC<ArtworkRailProps> = memo(
 
     // On android we are using a flatlist to fix some image issues
     // Context https://github.com/artsy/eigen/pull/11207
-    const Wrapper =
+    const ListComponent =
       Platform.OS === "ios"
-        ? (props: any) => (
-            <PrefetchFlashList estimatedItemSize={ARTWORK_RAIL_CARD_MIN_WIDTH} {...props} />
-          )
-        : PrefetchFlatList
+        ? (props: any) => <FlashList estimatedItemSize={ARTWORK_RAIL_CARD_MIN_WIDTH} {...props} />
+        : FlatList
 
     return (
-      <Wrapper
+      <ListComponent
         data={artworks}
         horizontal
-        keyExtractor={(item) => item.internalID}
+        keyExtractor={(item: Artwork) => item.internalID}
         ListFooterComponent={
           <>
             {!!onMorePress && (
@@ -110,8 +110,6 @@ export const ArtworkRail: React.FC<ArtworkRailProps> = memo(
         listRef={listRef}
         onEndReached={onEndReached}
         onEndReachedThreshold={onEndReachedThreshold}
-        onViewableItemsChanged={onViewableItemsChanged}
-        prefetchUrlExtractor={(item) => item?.href || undefined}
         renderItem={renderItem}
         showsHorizontalScrollIndicator={false}
         viewabilityConfig={viewabilityConfig}

diff --git a/src/app/Components/ArtworkRail/ArtworkRailCard.tsx b/src/app/Components/ArtworkRail/ArtworkRailCard.tsx
@@ -16,10 +16,11 @@ import { Disappearable, DissapearableArtwork } from "app/Components/Disappearabl
 import { ArtworkItemCTAs } from "app/Scenes/Artwork/Components/ArtworkItemCTAs"
 import { useGetNewSaveAndFollowOnArtworkCardExperimentVariant } from "app/Scenes/Artwork/utils/useGetNewSaveAndFollowOnArtworkCardExperimentVariant"
 import { AnalyticsContextProvider } from "app/system/analytics/AnalyticsContext"
+import { RouterLink } from "app/system/navigation/RouterLink"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { ArtworkActionTrackingProps } from "app/utils/track/ArtworkActions"
 import { useState } from "react"
-import { GestureResponderEvent, PixelRatio, TouchableHighlight } from "react-native"
+import { GestureResponderEvent, PixelRatio } from "react-native"
 import { graphql, useFragment } from "react-relay"
 
 const fontScale = PixelRatio.getFontScale()
@@ -29,6 +30,7 @@ export interface ArtworkRailCardProps
   extends ArtworkActionTrackingProps,
     ArtworkRailCardCommonProps {
   artwork: ArtworkRailCard_artwork$key
+  href?: string | null
   onPress?: (event: GestureResponderEvent) => void
   testID?: string
 }
@@ -40,6 +42,7 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = ({
   contextScreenOwnerSlug,
   contextScreen,
   dark = false,
+  href,
   hideArtistName = false,
   hideIncreasedInterestSignal = false,
   hideCuratorsPickSignal = false,
@@ -104,7 +107,8 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = ({
           }}
         >
           <Box pr={2}>
-            <TouchableHighlight
+            <RouterLink
+              to={href || artwork.href}
               underlayColor={backgroundColor}
               activeOpacity={0.8}
               onPress={onPress}
@@ -157,7 +161,7 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = ({
                   contextScreenOwnerType={contextScreenOwnerType}
                 />
               </Flex>
-            </TouchableHighlight>
+            </RouterLink>
           </Box>
         </ContextMenuArtwork>
 
@@ -173,6 +177,7 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = ({
 
 const artworkFragment = graphql`
   fragment ArtworkRailCard_artwork on Artwork {
+    href
     internalID
     slug
     ...ArtworkRailCardImage_artwork

diff --git a/src/app/Components/ShowCard.tsx b/src/app/Components/ShowCard.tsx
@@ -1,8 +1,8 @@
-import { Spacer, Flex, Text, Touchable, SkeletonBox, SkeletonText } from "@artsy/palette-mobile"
+import { Flex, SkeletonBox, SkeletonText, Spacer, Text } from "@artsy/palette-mobile"
 import { toTitleCase } from "@artsy/to-title-case"
 import { ShowCard_show$data } from "__generated__/ShowCard_show.graphql"
 import { ImageWithFallback } from "app/Components/ImageWithFallback/ImageWithFallback"
-import { navigate } from "app/system/navigation/navigate"
+import { RouterLink } from "app/system/navigation/RouterLink"
 import { compact } from "lodash"
 import { GestureResponderEvent, ViewProps } from "react-native"
 import { createFragmentContainer, graphql } from "react-relay"
@@ -18,13 +18,6 @@ interface ShowCardProps extends ViewProps {
 export const ShowCard: React.FC<ShowCardProps> = ({ show, onPress }) => {
   const imageURL = show.metaImage?.url
 
-  const onTap = (event: GestureResponderEvent) => {
-    onPress?.(event)
-    if (show.href) {
-      navigate(show.href)
-    }
-  }
-
   const showCity = getShowCity({
     showName: show.name,
     showCity: show.city,
@@ -38,7 +31,7 @@ export const ShowCard: React.FC<ShowCardProps> = ({ show, onPress }) => {
 
   return (
     <Flex width={WIDTH}>
-      <Touchable haptic onPress={onTap}>
+      <RouterLink haptic onPress={onPress} to={show.href}>
         <Flex width={WIDTH} overflow="hidden">
           <ImageWithFallback src={imageURL} width={WIDTH} height={HEIGHT} />
           <Spacer y={1} />
@@ -50,7 +43,7 @@ export const ShowCard: React.FC<ShowCardProps> = ({ show, onPress }) => {
           </Text>
           <Text variant="xs">{formattedCityAndDate}</Text>
         </Flex>
-      </Touchable>
+      </RouterLink>
     </Flex>
   )
 }