fix(DIA-1068): prevent artwork cards from freezing (#11520)

* fix(DIA-1068): prevent artwork cards from freezing * update art quiz and tests * fixed the key of cards i art quiz
artsy · Feb 8, 2025 · 6b57456 · 6b57456
1 parent ce1a95f
commit 6b57456
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/src/app/Components/FancySwiper/FancySwiper.tsx b/src/app/Components/FancySwiper/FancySwiper.tsx
@@ -7,8 +7,13 @@ import { FancySwiperCard } from "./FancySwiperCard"
 // the amount of swiping that is considered a full swipe
 export const SWIPE_MAGNITUDE = 100
 
+export type FancySwiperArtworkCard = {
+  content: React.ReactNode
+  artworkId: string
+}
+
 interface FancySwiperProps {
-  cards: React.ReactNode[]
+  cards: FancySwiperArtworkCard[]
   hideActionButtons?: boolean
   onSwipeAnywhere?: () => void
   onSwipeLeft?: () => void
@@ -117,8 +122,8 @@ export const FancySwiper = ({
 
           return (
             <FancySwiperCard
-              card={card}
-              key={index}
+              card={card.content}
+              key={card.artworkId}
               swiper={swiper}
               isTopCard={isTopCard}
               isSecondCard={isSecondCard}

diff --git a/src/app/Components/FancySwiper/__tests__/FancySwiper.tests.tsx b/src/app/Components/FancySwiper/__tests__/FancySwiper.tests.tsx
@@ -1,5 +1,5 @@
 import { waitFor } from "@testing-library/react-native"
-import { FancySwiper } from "app/Components/FancySwiper/FancySwiper"
+import { FancySwiper, FancySwiperArtworkCard } from "app/Components/FancySwiper/FancySwiper"
 import { swipeLeft, swipeRight } from "app/Components/FancySwiper/__tests__/utils"
 import { renderWithWrappers } from "app/utils/tests/renderWithWrappers"
 
@@ -19,4 +19,7 @@ describe("FancySwiper", () => {
   })
 })
 
-const cards: React.ReactNode[] = [<></>, <></>]
+const cards: FancySwiperArtworkCard[] = [
+  { content: <></>, artworkId: "artwork-id-1" },
+  { content: <></>, artworkId: "artwork-id-2" },
+]
diff --git a/src/app/Scenes/ArtQuiz/ArtQuizArtworks.tsx b/src/app/Scenes/ArtQuiz/ArtQuizArtworks.tsx
@@ -6,7 +6,7 @@ import {
 } from "__generated__/ArtQuizArtworksQuery.graphql"
 import { ArtQuizArtworksSaveMutation } from "__generated__/ArtQuizArtworksSaveMutation.graphql"
 import { ArtQuizArtworksUpdateQuizMutation } from "__generated__/ArtQuizArtworksUpdateQuizMutation.graphql"
-import { FancySwiper } from "app/Components/FancySwiper/FancySwiper"
+import { FancySwiper, FancySwiperArtworkCard } from "app/Components/FancySwiper/FancySwiper"
 import { usePopoverMessage } from "app/Components/PopoverMessage/popoverMessageHooks"
 import { ArtQuizLoader } from "app/Scenes/ArtQuiz/ArtQuizLoader"
 import { GlobalStore } from "app/store/GlobalStore"
@@ -156,12 +156,14 @@ const ArtQuizArtworksScreen = () => {
     })
   }
 
-  const artworkCards: React.ReactNode[] = useMemo(
-    () => artworks.map((artwork, index) => <ArtQuizArtworkCard artwork={artwork} key={index} />),
-    [artworks]
-  )
+  const artworkCards: FancySwiperArtworkCard[] = useMemo(() => {
+    return artworks.map((artwork) => ({
+      content: <ArtQuizArtworkCard artwork={artwork} key={artwork.internalID} />,
+      artworkId: artwork.internalID,
+    }))
+  }, [artworks])
 
-  const unswipedCards: React.ReactNode[] = artworkCards.slice(activeCardIndex)
+  const unswipedCards: FancySwiperArtworkCard[] = artworkCards.slice(activeCardIndex)
 
   return (
     <Screen>

diff --git a/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx b/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx
@@ -7,7 +7,7 @@ import {
   Spinner,
   Touchable,
 } from "@artsy/palette-mobile"
-import { FancySwiper } from "app/Components/FancySwiper/FancySwiper"
+import { FancySwiper, FancySwiperArtworkCard } from "app/Components/FancySwiper/FancySwiper"
 import { useToast } from "app/Components/Toast/toastHook"
 import { InfiniteDiscoveryArtworkCard } from "app/Scenes/InfiniteDiscovery/Components/InfiniteDiscoveryArtworkCard"
 import { InfiniteDiscoveryBottomSheet } from "app/Scenes/InfiniteDiscovery/Components/InfiniteDiscoveryBottomSheet"
@@ -64,11 +64,14 @@ export const InfiniteDiscovery: React.FC<InfiniteDiscoveryProps> = ({
     setArtworks((previousArtworks) => previousArtworks.concat(newArtworks))
   }, [data, extractNodes, setArtworks])
 
-  const artworkCards: React.ReactNode[] = useMemo(() => {
-    return artworks.map((artwork, i) => <InfiniteDiscoveryArtworkCard artwork={artwork} key={i} />)
+  const artworkCards: FancySwiperArtworkCard[] = useMemo(() => {
+    return artworks.map((artwork) => ({
+      content: <InfiniteDiscoveryArtworkCard artwork={artwork} key={artwork.internalID} />,
+      artworkId: artwork.internalID,
+    }))
   }, [artworks])
 
-  const unswipedCards: React.ReactNode[] = artworkCards.slice(index)
+  const unswipedCards: FancySwiperArtworkCard[] = artworkCards.slice(index)
 
   const handleBackPressed = () => {
     if (index > 0) {