diff --git a/src/app/Components/FancySwiper/FancySwiper.tsx b/src/app/Components/FancySwiper/FancySwiper.tsx index 090acdd8eba..b5d9ddd8195 100644 --- a/src/app/Components/FancySwiper/FancySwiper.tsx +++ b/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(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({ diff --git a/src/app/Scenes/ArtQuiz/ArtQuizArtworks.tsx b/src/app/Scenes/ArtQuiz/ArtQuizArtworks.tsx index 6d5d1abd30e..f9955c29f5b 100644 --- a/src/app/Scenes/ArtQuiz/ArtQuizArtworks.tsx +++ b/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,9 +45,13 @@ 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) => { @@ -53,6 +59,10 @@ const ArtQuizArtworksScreen = () => { const currentArtwork = artworks[activeIndex] + if (isEmpty(currentArtwork)) { + return + } + if (action === "Like") { submitSave({ variables: { @@ -176,9 +186,8 @@ const ArtQuizArtworksScreen = () => { handleSwipe("right", index)} - onSwipeLeft={(index) => handleSwipe("left", index)} + onSwipeRight={() => handleSwipe("right")} + onSwipeLeft={() => handleSwipe("left")} />