feat: adjust whiffing the card into the deck

Author: araujobarret

src/app/Components/FancySwiper/FancySwiper.tsx

@@ -34,19 +34,18 @@ export const FancySwiper = ({
 }: FancySwiperProps) => {
   const remainingCards = useMemo(() => cards.reverse(), [cards.length])
   const swiper = useRef<Animated.ValueXY>(new Animated.ValueXY()).current
+  const swiperSwipedCard = useRef<Animated.ValueXY>(new Animated.ValueXY()).current
 
   const panResponder = PanResponder.create({
     onStartShouldSetPanResponder: () => true,
     onPanResponderMove: (_, { dx, dy, x0 }) => {
       // if we're 25% left of the screen when swiping then we update normally
       if (x0 <= whiffHitSlop) {
-        swiper.setValue({ x: dx, y: dy })
-        // otherwise we clamp the dragging to avoid up/down/right movement
+        swiperSwipedCard.setValue({ x: dx, y: dy })
       } else {
+        // otherwise we clamp the dragging to avoid up/down/right movement
         swiper.setValue({ x: Math.min(dx, 0), y: 0 })
       }
-      // works but not allows a nice whiff
-      // swiper.setValue({ x: Math.min(dx, 0), y: 0 })
     },
     onPanResponderRelease: (_, { dx, dy, x0 }) => {
       const isFullSwipe = Math.abs(dx) > SWIPE_MAGNITUDE
@@ -84,6 +83,7 @@ export const FancySwiper = ({
     }).start(() => {
       // revert the pan responder to its initial position
       swiper.setValue({ x: 0, y: 0 })
+      swiperSwipedCard.setValue({ x: -width, y: 0 })
       onSwipeLeft()
     })
   }
@@ -102,8 +102,21 @@ export const FancySwiper = ({
   }
 
   const handleRightWhiff = () => {
-    swiper.setValue({ x: 0, y: 0 })
+    // swiper.setValue({ x: 0, y: 0 })
+    swiperSwipedCard.setValue({ x: 0, y: 0 })
     onWhiffRight?.()
+    // Animated.timing(swiperSwipedCard, {
+    //   easing: Easing.cubic,
+    //   toValue: { x: 0, y: 0 },
+    //   duration: 300,
+    //   useNativeDriver: true,
+    // }).start(() => {
+    //   swiper.setValue({ x: 0, y: 0 })
+    //   swiperSwipedCard.setValue({ x: 0, y: 0 })
+    //   onWhiffRight?.()
+    // })
+    // swiper.setValue({ x: 0, y: 0 })
+    // onWhiffRight?.()
   }
 
   return (
@@ -126,6 +139,7 @@ export const FancySwiper = ({
               key={card.artworkId}
               artworkId={card.artworkId}
               swiper={swiper}
+              swiperSwipedCard={swiperSwipedCard}
               isTopCard={isTopCard}
               isSecondCard={isSecondCard}
               isSwipedCard={isSwipedCard}

src/app/Components/FancySwiper/FancySwiperCard.tsx

@@ -11,13 +11,14 @@ interface FancySwiperCardProps extends GestureResponderHandlers {
   isSwipedCard: boolean
   isLastSwipedCard: boolean
   swiper: Animated.ValueXY
+  swiperSwipedCard: Animated.ValueXY
 }
 
 export const FancySwiperCard = memo(
   ({
-    artworkId,
     card,
     swiper,
+    swiperSwipedCard,
     isTopCard,
     isSecondCard,
     isSwipedCard,
@@ -33,7 +34,6 @@ export const FancySwiperCard = memo(
     let swipedCardTransform = undefined
 
     if (isTopCard) {
-      console.log("cb::isTopCard", artworkId)
       // tilt the top card as it is being swiped away
       const rotate = swiper.x.interpolate({
         inputRange: [-SWIPE_MAGNITUDE, 0],
@@ -80,14 +80,13 @@ export const FancySwiperCard = memo(
         transform: [{ scale }],
       }
     } else if (isLastSwipedCard) {
-      console.log("cb::isLastSwiperCard", artworkId)
-      const rotate = swiper.x.interpolate({
+      const rotate = swiperSwipedCard.x.interpolate({
         inputRange: [0, SWIPE_MAGNITUDE],
         outputRange: ["-5deg", "0deg"],
         extrapolate: "clamp",
       })
 
-      const translateX = swiper.x.interpolate({
+      const translateX = swiperSwipedCard.x.interpolate({
         inputRange: [0, SWIPE_MAGNITUDE],
         outputRange: [-screenWidth, 0],
         extrapolate: "clamp",
@@ -96,8 +95,11 @@ export const FancySwiperCard = memo(
       swipedCardTransform = {
         transform: [{ translateX }, { rotate }],
       }
+
+      // swipedCardTransform = {
+      //   transform: [...swiperSwipedCard.getTranslateTransform(), { rotate }],
+      // }
     } else if (isSwipedCard) {
-      console.log("cb::isSwipedCard", artworkId)
       swipedCardTransform = {
         transform: [{ translateX: -screenWidth }, { translateY: 0 }],
       }

src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx

@@ -91,7 +91,7 @@ export const InfiniteDiscovery: React.FC<InfiniteDiscoveryProps> = ({
     if (currentIndex < artworks.length - 1) {
       const dismissedArtworkId = artworks[currentIndex].internalID
 
-      setCurrentIndex(currentIndex + 1)
+      setCurrentIndex((prev) => prev + 1)
       addDisoveredArtworkId(dismissedArtworkId)
 
       trackEvent({
@@ -114,8 +114,6 @@ export const InfiniteDiscovery: React.FC<InfiniteDiscoveryProps> = ({
         })
       }
       setMaxIndexReached(newMaxIndexReached)
-
-      setCurrentIndex((prev) => prev + 1)
     }
 
     // fetch more artworks when the user is about to reach the end of the list