chore: Clean up artwork rail and extact sub components

src/app/Components/ArtworkGrids/ArtworkGridItem.tsx

@@ -533,6 +533,7 @@ export default createFragmentContainer(Artwork, {
       width: { type: "Int" }
     ) {
       ...CreateArtworkAlertModal_artwork
+      ...ContextMenuArtwork_artwork @arguments(width: $width)
       availability
       title
       date

src/app/Components/ArtworkRail/ArtworkRail.tsx

@@ -3,10 +3,8 @@ import {
   ArtworkRail_artworks$data,
   ArtworkRail_artworks$key,
 } from "__generated__/ArtworkRail_artworks.graphql"
-import {
-  ARTWORK_RAIL_CARD_IMAGE_HEIGHT,
-  ArtworkRailCard,
-} from "app/Components/ArtworkRail/ArtworkRailCard"
+import { ArtworkRailCard } from "app/Components/ArtworkRail/ArtworkRailCard"
+import { ARTWORK_RAIL_CARD_IMAGE_HEIGHT } from "app/Components/ArtworkRail/LegacyArtworkRailCardImage"
 import { BrowseMoreRailCard } from "app/Components/BrowseMoreRailCard"
 import { Disappearable, DissapearableArtwork } from "app/Components/Disappearable"
 import { PrefetchFlatList } from "app/Components/PrefetchFlatList"
@@ -135,7 +133,7 @@ export const ArtworkRail: React.FC<ArtworkRailProps> = ({
 
 const artworksFragment = graphql`
   fragment ArtworkRail_artworks on Artwork @relay(plural: true) {
-    ...ArtworkRailCard_artwork @arguments(width: 590)
+    ...ArtworkRailCard_artwork
     internalID
     href
     slug

src/app/Components/ArtworkRail/ArtworkRailCard.tests.tsx

@@ -42,20 +42,6 @@ describe("ArtworkRailCard", () => {
       expect(screen.getByText("Some Kind of Dinosaur, 2015")).toBeOnTheScreen()
     })
 
-    it("renders without throwing an error when an auction is about to open, but not closed or finished", () => {
-      renderWithRelay({
-        Artwork: () => ({
-          title: "Some Kind of Dinosaur",
-          sale: { isClosed: false, isAuction: true },
-          saleArtwork: { currentBid: { display: "$200" }, counts: { bidderPositions: 1 } },
-          realizedPrice: null,
-          collectorSignals: { auction: { bidCount: 1 } },
-        }),
-      })
-
-      expect(screen.getByText("$200 (1 bid)")).toBeOnTheScreen()
-    })
-
     it("shows the partner name if showPartnerName is set to true", () => {
       renderWithRelay(
         { Artwork: () => ({ partner: { name: "partner" } }) },
@@ -290,20 +276,6 @@ describe("ArtworkRailCard", () => {
           expect(screen.getByText("Extended, 59s left to bid")).toBeOnTheScreen()
         })
       })
-
-      it("shows number of bids", () => {
-        renderWithRelay({
-          Artwork: () => ({
-            ...artwork,
-            sale: { ...artwork.sale, isClosed: false },
-            saleArtwork: { currentBid: { display: "$3,700" } },
-            realizedPrice: null,
-            collectorSignals: { auction: { bidCount: 7 } },
-          }),
-        })
-
-        expect(screen.getByText("$3,700 (7 bids)")).toBeOnTheScreen()
-      })
     })
 
     describe("social signal", () => {

src/app/Components/ArtworkRail/ArtworkRailCard.tsx

@@ -1,43 +1,28 @@
-import {
-  Box,
-  Flex,
-  HeartFillIcon,
-  HeartIcon,
-  Image,
-  Text,
-  Touchable,
-  useColor,
-} from "@artsy/palette-mobile"
-import {
-  ArtworkRailCard_artwork$data,
-  ArtworkRailCard_artwork$key,
-} from "__generated__/ArtworkRailCard_artwork.graphql"
+import { Box, Flex, HeartFillIcon, HeartIcon, Text, Touchable } from "@artsy/palette-mobile"
+import { ArtworkRailCard_artwork$key } from "__generated__/ArtworkRailCard_artwork.graphql"
 import { CreateArtworkAlertModal } from "app/Components/Artist/ArtistArtworks/CreateArtworkAlertModal"
 import { ArtworkAuctionTimer } from "app/Components/ArtworkGrids/ArtworkAuctionTimer"
 import { ArtworkSocialSignal } from "app/Components/ArtworkGrids/ArtworkSocialSignal"
 import { useSaveArtworkToArtworkLists } from "app/Components/ArtworkLists/useSaveArtworkToArtworkLists"
-import { ARTWORK_RAIL_IMAGE_WIDTH } from "app/Components/ArtworkRail/ArtworkRail"
+import { ArtworkRailCardImage } from "app/Components/ArtworkRail/ArtworkRailCardImage"
+import { LegacyArtworkRailCardImage } from "app/Components/ArtworkRail/LegacyArtworkRailCardImage"
 import { ContextMenuArtwork } from "app/Components/ContextMenu/ContextMenuArtwork"
 import { HEART_ICON_SIZE } from "app/Components/constants"
 import { formattedTimeLeft } from "app/Scenes/Activity/utils/formattedTimeLeft"
 import { AnalyticsContextProvider } from "app/system/analytics/AnalyticsContext"
 import { saleMessageOrBidInfo as defaultSaleMessageOrBidInfo } from "app/utils/getSaleMessgeOrBidInfo"
 import { getTimer } from "app/utils/getTimer"
-import { getUrgencyTag } from "app/utils/getUrgencyTag"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import {
   ArtworkActionTrackingProps,
   tracks as artworkActionTracks,
 } from "app/utils/track/ArtworkActions"
-import { sizeToFit } from "app/utils/useSizeToFit"
-import { useMemo, useState } from "react"
+import { useState } from "react"
 import { GestureResponderEvent, PixelRatio, TouchableHighlight } from "react-native"
 import { graphql, useFragment } from "react-relay"
 import { useTracking } from "react-tracking"
 
 export const ARTWORK_RAIL_TEXT_CONTAINER_HEIGHT = 90
-export const ARTWORK_RAIL_CARD_IMAGE_HEIGHT = 320
-const ARTWORK_LARGE_RAIL_CARD_IMAGE_WIDTH = 295
 
 export interface ArtworkRailCardProps extends ArtworkActionTrackingProps {
   artwork: ArtworkRailCard_artwork$key
@@ -84,21 +69,14 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = ({
   const AREnableCuratorsPicksAndInterestSignals = useFeatureFlag(
     "AREnableCuratorsPicksAndInterestSignals"
   )
+  const enableArtworkRailRedesignImageAspectRatio = useFeatureFlag(
+    "AREnableArtworkRailRedesignImageAspectRatio"
+  )
 
   const [showCreateArtworkAlertModal, setShowCreateArtworkAlertModal] = useState(false)
 
   const artwork = useFragment(artworkFragment, restProps.artwork)
-  const {
-    artistNames,
-    date,
-    image,
-    partner,
-    title,
-    sale,
-    saleArtwork,
-    isUnlisted,
-    collectorSignals,
-  } = artwork
+  const { artistNames, date, partner, title, sale, isUnlisted, collectorSignals } = artwork
 
   const saleMessage = defaultSaleMessageOrBidInfo({
     artwork,
@@ -110,10 +88,6 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = ({
   const partnerOfferEndAt = collectorSignals?.partnerOffer?.endAt
     ? formattedTimeLeft(getTimer(collectorSignals.partnerOffer.endAt).time).timerCopy
     : ""
-  const extendedBiddingEndAt = saleArtwork?.extendedBiddingEndAt
-  const lotEndAt = saleArtwork?.endAt
-  const endAt = extendedBiddingEndAt ?? lotEndAt ?? sale?.endAt
-  const urgencyTag = sale?.isAuction && !sale?.isClosed ? getUrgencyTag(endAt) : null
 
   const primaryTextColor = dark ? "white100" : "black100"
   const secondaryTextColor = dark ? "black15" : "black60"
@@ -127,29 +101,6 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = ({
     contextScreen,
   } = restProps
 
-  const containerWidth = useMemo(() => {
-    const imageDimensions = sizeToFit(
-      {
-        width: image?.resized?.width ?? 0,
-        height: image?.resized?.height ?? 0,
-      },
-      {
-        width: ARTWORK_LARGE_RAIL_CARD_IMAGE_WIDTH,
-        height: ARTWORK_RAIL_CARD_IMAGE_HEIGHT,
-      }
-    )
-
-    const SMALL_RAIL_IMAGE_WIDTH = 155
-
-    if (imageDimensions.width <= SMALL_RAIL_IMAGE_WIDTH) {
-      return SMALL_RAIL_IMAGE_WIDTH
-    } else if (imageDimensions.width >= ARTWORK_RAIL_IMAGE_WIDTH) {
-      return ARTWORK_RAIL_IMAGE_WIDTH
-    } else {
-      return imageDimensions.width
-    }
-  }, [image?.resized?.height, image?.resized?.width])
-
   const onArtworkSavedOrUnSaved = (saved: boolean) => {
     const { availability, isAcquireable, isBiddable, isInquireable, isOfferable } = artwork
     const params = {
@@ -216,14 +167,14 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = ({
           testID={testID}
         >
           <Flex backgroundColor={backgroundColor}>
-            <ArtworkRailCardImage
-              containerWidth={containerWidth}
-              image={image}
-              urgencyTag={!displayAuctionSignal ? urgencyTag : null}
-            />
+            {enableArtworkRailRedesignImageAspectRatio ? (
+              <ArtworkRailCardImage artwork={artwork} />
+            ) : (
+              <LegacyArtworkRailCardImage artwork={artwork} />
+            )}
+
             <Flex
               my={1}
-              width={containerWidth}
               style={{
                 height: fontScale * ARTWORK_RAIL_TEXT_CONTAINER_HEIGHT,
                 ...metaContainerStyles,
@@ -379,85 +330,13 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = ({
   )
 }
 
-export interface ArtworkRailCardImageProps {
-  image: ArtworkRailCard_artwork$data["image"]
-  urgencyTag?: string | null
-  containerWidth?: number | null
-}
-
-const ArtworkRailCardImage: React.FC<ArtworkRailCardImageProps> = ({
-  image,
-  urgencyTag = null,
-  containerWidth,
-}) => {
-  const color = useColor()
-  const showBlurhash = useFeatureFlag("ARShowBlurhashImagePlaceholder")
-
-  if (!containerWidth) {
-    return null
-  }
-
-  const { width, height, src } = image?.resized || {}
-
-  if (!src) {
-    return (
-      <Flex
-        bg={color("black30")}
-        width={width}
-        height={ARTWORK_RAIL_CARD_IMAGE_HEIGHT}
-        style={{ borderRadius: 2 }}
-      />
-    )
-  }
-
-  const containerDimensions = {
-    width: ARTWORK_LARGE_RAIL_CARD_IMAGE_WIDTH,
-    height: ARTWORK_RAIL_CARD_IMAGE_HEIGHT,
-  }
-
-  const imageDimensions = sizeToFit(
-    {
-      width: width ?? 0,
-      height: height ?? 0,
-    },
-    containerDimensions
-  )
-
-  const imageHeight = imageDimensions.height || ARTWORK_RAIL_CARD_IMAGE_HEIGHT
-
-  return (
-    <Flex>
-      <Image
-        src={src}
-        width={containerWidth}
-        height={imageHeight}
-        blurhash={showBlurhash ? image?.blurhash : undefined}
-      />
-
-      {!!urgencyTag && (
-        <Flex
-          testID="auction-urgency-tag"
-          backgroundColor={color("white100")}
-          position="absolute"
-          px="5px"
-          py="3px"
-          bottom="5px"
-          left="5px"
-          borderRadius={2}
-          alignSelf="flex-start"
-        >
-          <Text variant="xs" color={color("black100")} numberOfLines={1}>
-            {urgencyTag}
-          </Text>
-        </Flex>
-      )}
-    </Flex>
-  )
-}
-
 const artworkFragment = graphql`
-  fragment ArtworkRailCard_artwork on Artwork @argumentDefinitions(width: { type: "Int" }) {
+  fragment ArtworkRailCard_artwork on Artwork {
     ...CreateArtworkAlertModal_artwork
+    ...ArtworkRailCardImage_artwork
+    ...LegacyArtworkRailCardImage_artwork
+    ...ContextMenuArtwork_artwork
+
     id
     internalID
     availability
@@ -471,38 +350,20 @@ const artworkFragment = graphql`
     artists(shallow: true) {
       name
     }
+    image(includeAll: false) {
+      url(version: "large")
+    }
     widthCm
     heightCm
     isHangable
     date
-    image {
-      blurhash
-      url(version: "large")
-      resized(width: $width) {
-        src
-        srcSet
-        width
-        height
-      }
-      aspectRatio
-    }
     isUnlisted
     sale {
       isAuction
       isClosed
       endAt
     }
     saleMessage
-    saleArtwork {
-      counts {
-        bidderPositions
-      }
-      currentBid {
-        display
-      }
-      endAt
-      extendedBiddingEndAt
-    }
     partner {
       name
     }

src/app/Components/ArtworkRail/ArtworkRailCardImage.tsx

@@ -0,0 +1,24 @@
+import { Text } from "@artsy/palette-mobile"
+import { ArtworkRailCardImage_artwork$key } from "__generated__/ArtworkRailCardImage_artwork.graphql"
+import { graphql, useFragment } from "react-relay"
+
+export interface ArtworkRailCardImageProps {
+  artwork: ArtworkRailCardImage_artwork$key
+}
+
+export const ArtworkRailCardImage: React.FC<ArtworkRailCardImageProps> = ({ ...restProps }) => {
+  const artwork = useFragment(artworkFragment, restProps.artwork)
+  // TODO: Extract urgency tags (see LegacyArtworkRailCardImage)
+  // TODO: Implement new image component
+
+  return <Text>{artwork?.image?.url}</Text>
+}
+
+const artworkFragment = graphql`
+  fragment ArtworkRailCardImage_artwork on Artwork {
+    image(includeAll: false) {
+      blurhash
+      url(version: "large")
+    }
+  }
+`