chore: Retire PrefetchFlatList (and replace with FlatList and RouterL…

…ink) (#11545) * chore: Retire PrefetchFlatList * InfiniteScrollFlashList
artsy · Feb 13, 2025 · db5ec8b · db5ec8b
1 parent fdf062e
commit db5ec8b
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 226 deletions.
diff --git a/src/app/Components/AboveTheFoldFlatList.tsx b/src/app/Components/AboveTheFoldFlatList.tsx
@@ -1,18 +1,23 @@
-import { useState } from "react"
-import { PrefetchFlatList, PrefetchFlatListProps } from "./PrefetchFlatList"
+import { Ref, useState } from "react"
+import { FlatList, FlatListProps } from "react-native"
 
 export type AboveTheFoldFlatListProps<ItemType> = {
   initialNumToRender?: number
-} & PrefetchFlatListProps<ItemType>
+} & FlatListProps<ItemType>
 
-export function AboveTheFoldFlatList<ItemType>(props: AboveTheFoldFlatListProps<ItemType>) {
+export function AboveTheFoldFlatList<ItemType>(
+  props: {
+    initialNumToRender: number
+    listRef?: Ref<FlatList<ItemType | any>>
+  } & FlatListProps<ItemType>
+) {
   const { listRef, onScrollBeginDrag, ...restProps } = props
   const [userHasScrolled, setUserHasScrolled] = useState(false)
 
   return (
-    <PrefetchFlatList<ItemType>
+    <FlatList<ItemType>
       {...restProps}
-      listRef={listRef}
+      ref={listRef}
       onScrollBeginDrag={(event) => {
         if (onScrollBeginDrag) {
           onScrollBeginDrag(event)

diff --git a/src/app/Components/CardRail/CardRailFlatList.tsx b/src/app/Components/CardRail/CardRailFlatList.tsx
@@ -4,17 +4,17 @@ import {
   AboveTheFoldFlatListProps,
 } from "app/Components/AboveTheFoldFlatList"
 import Spinner from "app/Components/Spinner"
-import { View } from "react-native"
+import { Ref } from "react"
+import { FlatListProps, View } from "react-native"
 
 export const INTER_CARD_PADDING = 15
 
 type CardRailFlatList<ItemType> = AboveTheFoldFlatListProps<ItemType>
 
-export function CardRailFlatList<ItemType>({
-  initialNumToRender: initialNumToRenderProp,
-  ...restProps
-}: CardRailFlatList<ItemType>) {
-  const initialNumToRender = initialNumToRenderProp || 2
+export function CardRailFlatList<ItemType>(
+  props: { listRef?: Ref<ItemType | any> } & FlatListProps<ItemType>
+) {
+  const initialNumToRender = props.initialNumToRender || 2
 
   return (
     <AboveTheFoldFlatList<ItemType>
@@ -26,7 +26,7 @@ export function CardRailFlatList<ItemType>({
       showsHorizontalScrollIndicator={false}
       scrollsToTop={false}
       initialNumToRender={initialNumToRender}
-      {...restProps}
+      {...props}
     />
   )
 }
diff --git a/src/app/Components/InfiniteScrollFlashList.tsx b/src/app/Components/InfiniteScrollFlashList.tsx
@@ -1,19 +1,22 @@
 import { Flex } from "@artsy/palette-mobile"
-import { PrefetchFlashList, PrefetchFlashListProps } from "app/Components/PrefetchFlashList"
+import { FlashList, FlashListProps } from "@shopify/flash-list"
+import { Ref } from "react"
 
 export type InfiniteScrollFlashListProps<ItemType> = {
+  listRef?: Ref<ItemType | any>
   initialNumToRender?: number
-} & PrefetchFlashListProps<ItemType>
+} & FlashListProps<ItemType>
 
 const ESTIMATED_ITEM_SIZE = 60
 
 export function InfiniteScrollFlashList<ItemType>(props: InfiniteScrollFlashListProps<ItemType>) {
   const { listRef, onScrollBeginDrag, ...restProps } = props
+
   return (
     <Flex flex={1}>
-      <PrefetchFlashList<ItemType>
+      <FlashList<ItemType>
         {...restProps}
-        listRef={listRef}
+        ref={listRef}
         estimatedItemSize={ESTIMATED_ITEM_SIZE}
         onScrollBeginDrag={(event) => {
           if (onScrollBeginDrag) {

diff --git a/src/app/Components/PrefetchFlashList.tsx b/src/app/Components/PrefetchFlashList.tsx
diff --git a/src/app/Components/PrefetchFlatList.tsx b/src/app/Components/PrefetchFlatList.tsx
diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionFairs.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionFairs.tsx
@@ -68,14 +68,6 @@ export const HomeViewSectionFairs: React.FC<HomeViewSectionFairsProps> = ({
       <CardRailFlatList<FairItem>
         data={fairs}
         initialNumToRender={HORIZONTAL_FLATLIST_INTIAL_NUMBER_TO_RENDER_DEFAULT}
-        prefetchUrlExtractor={(fair) => {
-          return `/fair/${fair?.slug}`
-        }}
-        prefetchVariablesExtractor={(item) => {
-          return {
-            fairID: item?.slug,
-          }
-        }}
         renderItem={({ item, index }) => {
           return (
             <HomeViewSectionFairsFairItem

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionFairsFairItem.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionFairsFairItem.tsx
@@ -5,7 +5,7 @@ import {
 } from "__generated__/HomeViewSectionFairsFairItem_fair.graphql"
 import { CardRailCard, CardRailMetadataContainer } from "app/Components/CardRail/CardRailCard"
 import { ThreeUpImageLayout } from "app/Components/ThreeUpImageLayout"
-import { navigate } from "app/system/navigation/navigate"
+import { RouterLink } from "app/system/navigation/RouterLink"
 import { extractNodes } from "app/utils/extractNodes"
 import { compact, concat, take } from "lodash"
 import { FC } from "react"
@@ -39,32 +39,33 @@ export const HomeViewSectionFairsFairItem: FC<HomeViewSectionFairsFairItemProps>
   const location = fair.location?.city || fair.location?.country
 
   return (
-    <CardRailCard
-      key={fair.slug}
-      onPress={() => {
-        onPress?.(fair)
-        navigate(`/fair/${fair.slug}`)
-      }}
-    >
-      <Flex>
-        <ThreeUpImageLayout imageURLs={artworkImageURLs} />
-        <CardRailMetadataContainer>
-          <Text numberOfLines={1} lineHeight="20px" variant="sm">
-            {fair.name}
-          </Text>
-          <Text
-            numberOfLines={1}
-            lineHeight="20px"
-            color="black60"
-            variant="sm"
-            testID="card-subtitle"
-            ellipsizeMode="middle"
-          >
-            {fair.exhibitionPeriod}
-            {Boolean(location) && `  ${bullet}  ${location}`}
-          </Text>
-        </CardRailMetadataContainer>
-      </Flex>
+    <CardRailCard key={fair.slug}>
+      <RouterLink
+        to={`/fair/${fair.slug}`}
+        onPress={() => {
+          onPress?.(fair)
+        }}
+      >
+        <Flex>
+          <ThreeUpImageLayout imageURLs={artworkImageURLs} />
+          <CardRailMetadataContainer>
+            <Text numberOfLines={1} lineHeight="20px" variant="sm">
+              {fair.name}
+            </Text>
+            <Text
+              numberOfLines={1}
+              lineHeight="20px"
+              color="black60"
+              variant="sm"
+              testID="card-subtitle"
+              ellipsizeMode="middle"
+            >
+              {fair.exhibitionPeriod}
+              {Boolean(location) && `  ${bullet}  ${location}`}
+            </Text>
+          </CardRailMetadataContainer>
+        </Flex>
+      </RouterLink>
     </CardRailCard>
   )
 }

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionSales.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionSales.tsx
@@ -82,8 +82,6 @@ export const HomeViewSectionSales: React.FC<HomeViewSectionSalesProps> = ({
       </Flex>
 
       <CardRailFlatList
-        prefetchUrlExtractor={(item) => item?.href}
-        prefetchVariablesExtractor={(item) => ({ saleSlug: item?.slug })}
         listRef={listRef}
         data={sales}
         initialNumToRender={HORIZONTAL_FLATLIST_INTIAL_NUMBER_TO_RENDER_DEFAULT}

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionSalesItem.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionSalesItem.tsx
@@ -9,12 +9,11 @@ import {
   CardRailMetadataContainer as MetadataContainer,
 } from "app/Components/CardRail/CardRailCard"
 import { ThreeUpImageLayout } from "app/Components/ThreeUpImageLayout"
-import { navigate } from "app/system/navigation/navigate"
+import { RouterLink } from "app/system/navigation/RouterLink"
 import { extractNodes } from "app/utils/extractNodes"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { compact } from "lodash"
 import { FC } from "react"
-import { View } from "react-native"
 import { graphql, useFragment } from "react-relay"
 
 interface HomeViewSectionSalesItemProps {
@@ -41,20 +40,11 @@ export const HomeViewSectionSalesItem: FC<HomeViewSectionSalesItemProps> = ({
   // still be cautious to avoid crashes if this assumption is broken.
   const availableArtworkImageURLs = compact(imageURLs)
 
-  return (
-    <CardRailCard
-      key={sale.href}
-      onPress={() => {
-        const url = sale.liveURLIfOpen ?? sale.href
-
-        onPress?.(sale)
+  const url = sale.liveURLIfOpen ?? sale.href
 
-        if (url) {
-          navigate(url)
-        }
-      }}
-    >
-      <View>
+  return (
+    <CardRailCard key={sale.href}>
+      <RouterLink to={url} onPress={() => onPress?.(sale)}>
         <ThreeUpImageLayout imageURLs={availableArtworkImageURLs} />
         <MetadataContainer>
           <Text numberOfLines={2} lineHeight="20px" variant="sm">
@@ -70,7 +60,7 @@ export const HomeViewSectionSalesItem: FC<HomeViewSectionSalesItemProps> = ({
             {sale.formattedStartDateTime}
           </Text>
         </MetadataContainer>
-      </View>
+      </RouterLink>
     </CardRailCard>
   )
 }