fix(DIA-168): onboarding quiz crash (#9305)

* fix: activeIndex race condition

* chore: refactor again

* refact: better fix and a comment

* chore: address review comment

src/app/Components/FancySwiper/FancySwiper.tsx

@@ -8,17 +8,11 @@ export const OFFSET_X = 100
 
 interface FancySwiperProps {
   cards: Card[]
-  activeIndex: number
-  onSwipeRight: (index: number) => void
-  onSwipeLeft: (index: number) => void
+  onSwipeRight: () => void
+  onSwipeLeft: () => void
 }
 
-export const FancySwiper = ({
-  cards,
-  activeIndex,
-  onSwipeRight,
-  onSwipeLeft,
-}: FancySwiperProps) => {
+export const FancySwiper = ({ cards, onSwipeRight, onSwipeLeft }: FancySwiperProps) => {
   const remainingCards = cards.reverse()
   const swiper = useRef<Animated.ValueXY>(new Animated.ValueXY()).current
 
@@ -28,12 +22,12 @@ export const FancySwiper = ({
       swiper.setValue({ x: 0, y: 0 })
 
       if (swipeDirection === "right") {
-        onSwipeRight(activeIndex)
+        onSwipeRight()
       } else {
-        onSwipeLeft(activeIndex)
+        onSwipeLeft()
       }
     },
-    [remainingCards, activeIndex, swiper]
+    [remainingCards, swiper]
   )
 
   const panResponder = PanResponder.create({

src/app/Scenes/ArtQuiz/ArtQuizArtworks.tsx

@@ -10,6 +10,7 @@ import { ArtQuizLoader } from "app/Scenes/ArtQuiz/ArtQuizLoader"
 import { GlobalStore } from "app/store/GlobalStore"
 import { goBack, navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
+import { isEmpty } from "lodash"
 import { Suspense, useEffect, useState } from "react"
 import { Image } from "react-native"
 
@@ -21,6 +22,7 @@ const ArtQuizArtworksScreen = () => {
   const { width } = useScreenDimensions()
   const space = useSpace()
   const artworks = extractNodes(queryResult.me?.quiz.quizArtworkConnection)
+
   const lastInteractedArtworkIndex = queryResult.me?.quiz.quizArtworkConnection?.edges?.findIndex(
     (edge) => edge?.interactedAt === null
   )
@@ -43,16 +45,24 @@ const ArtQuizArtworksScreen = () => {
     }
   }, [])
 
-  const handleSwipe = (swipeDirection: "left" | "right", activeIndex: number) => {
-    setActiveCardIndex(activeIndex + 1)
-    handleNext(swipeDirection === "right" ? "Like" : "Dislike", activeIndex)
+  const handleSwipe = (swipeDirection: "left" | "right") => {
+    handleNext(swipeDirection === "right" ? "Like" : "Dislike", activeCardIndex)
+
+    // No need to swipe through the last card, just navigate to the results screen
+    if (activeCardIndex + 1 < artworks.length) {
+      setActiveCardIndex(activeCardIndex + 1)
+    }
   }
 
   const handleNext = (action: "Like" | "Dislike", activeIndex: number) => {
     popoverMessage.hide()
 
     const currentArtwork = artworks[activeIndex]
 
+    if (isEmpty(currentArtwork)) {
+      return
+    }
+
     if (action === "Like") {
       submitSave({
         variables: {
@@ -176,9 +186,8 @@ const ArtQuizArtworksScreen = () => {
       <Screen.Body>
         <FancySwiper
           cards={artworkCards}
-          activeIndex={activeCardIndex}
-          onSwipeRight={(index) => handleSwipe("right", index)}
-          onSwipeLeft={(index) => handleSwipe("left", index)}
+          onSwipeRight={() => handleSwipe("right")}
+          onSwipeLeft={() => handleSwipe("left")}
         />
       </Screen.Body>
     </Screen>