diff --git a/src/app/Components/FancySwiper/FancySwiper.tsx b/src/app/Components/FancySwiper/FancySwiper.tsx index b5d9ddd8195..4a759912c92 100644 --- a/src/app/Components/FancySwiper/FancySwiper.tsx +++ b/src/app/Components/FancySwiper/FancySwiper.tsx @@ -8,11 +8,17 @@ export const OFFSET_X = 100 interface FancySwiperProps { cards: Card[] - onSwipeRight: () => void + hideActionButtons?: boolean onSwipeLeft: () => void + onSwipeRight: () => void } -export const FancySwiper = ({ cards, onSwipeRight, onSwipeLeft }: FancySwiperProps) => { +export const FancySwiper = ({ + cards, + hideActionButtons = false, + onSwipeLeft, + onSwipeRight, +}: FancySwiperProps) => { const remainingCards = cards.reverse() const swiper = useRef(new Animated.ValueXY()).current @@ -66,7 +72,7 @@ export const FancySwiper = ({ cards, onSwipeRight, onSwipeLeft }: FancySwiperPro return ( <> - + {remainingCards.map((card, index) => { const isTopCard = index === remainingCards.length - 1 @@ -84,7 +90,7 @@ export const FancySwiper = ({ cards, onSwipeRight, onSwipeLeft }: FancySwiperPro ) })} - + {!hideActionButtons && } ) } diff --git a/src/app/Components/FancySwiper/FancySwiperCard.tsx b/src/app/Components/FancySwiper/FancySwiperCard.tsx index acda89d8239..a9ec1f0ae49 100644 --- a/src/app/Components/FancySwiper/FancySwiperCard.tsx +++ b/src/app/Components/FancySwiper/FancySwiperCard.tsx @@ -1,5 +1,5 @@ import { memo } from "react" -import { Animated, GestureResponderHandlers } from "react-native" +import { Animated, GestureResponderHandlers, StyleSheet } from "react-native" import { OFFSET_X } from "./FancySwiper" export interface Card { @@ -26,7 +26,11 @@ export const FancySwiperCard = memo( return ( {card.jsx} diff --git a/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx b/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx index c8407d7de85..78b51ebe5e3 100644 --- a/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx +++ b/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx @@ -1,14 +1,6 @@ -import { - Button, - Color, - Flex, - Screen, - Text, - Touchable, - useScreenDimensions, - useTheme, -} from "@artsy/palette-mobile" +import { Button, Flex, Image, Screen, Text, Touchable, useTheme } from "@artsy/palette-mobile" import { FancySwiper } from "app/Components/FancySwiper/FancySwiper" +import { Card } from "app/Components/FancySwiper/FancySwiperCard" import { InfiniteDiscoveryContext } from "app/Scenes/InfiniteDiscovery/InfiniteDiscoveryContext" import { navigate } from "app/system/navigation/navigate" @@ -21,6 +13,8 @@ export const InfiniteDiscoveryView: React.FC = () => { } export const InfiniteDiscovery: React.FC = () => { + const { color } = useTheme() + const artworks = InfiniteDiscoveryContext.useStoreState((state) => state.artworks) const currentArtwork = InfiniteDiscoveryContext.useStoreState((state) => state.currentArtwork) const goToPreviousArtwork = InfiniteDiscoveryContext.useStoreActions( @@ -30,7 +24,8 @@ export const InfiniteDiscovery: React.FC = () => { (actions) => actions.goToNextArtwork ) - const canGoBack = artworks.length && currentArtwork !== artworks[0] + const currentArtworkIndex = artworks.indexOf(currentArtwork) + const canGoBack = currentArtworkIndex > 0 const handleBackPressed = () => { goToPreviousArtwork() @@ -48,51 +43,17 @@ export const InfiniteDiscovery: React.FC = () => { goToNextArtwork() } - return ( - - - Back - - } - hideLeftElements={!canGoBack} - rightElements={ - - Exit - - } - /> - - - - - ) -} - -const artworkCards = (artworks: Color[]) => { - return artworks.map((artwork) => { - const { color, space } = useTheme() - const { width } = useScreenDimensions() + const artworkCards: Card[] = artworks.slice(currentArtworkIndex).map((artwork) => { return { jsx: ( - + <> Artist Name - - + + + @@ -107,9 +68,36 @@ const artworkCards = (artworks: Color[]) => { - + ), id: artwork, } }) + + return ( + + + Back + + } + hideLeftElements={!canGoBack} + rightElements={ + + Exit + + } + /> + + + + + ) } diff --git a/src/app/Scenes/InfiniteDiscovery/InfiniteDiscoveryContext.ts b/src/app/Scenes/InfiniteDiscovery/InfiniteDiscoveryContext.ts index 201f5568cf7..a9e02591847 100644 --- a/src/app/Scenes/InfiniteDiscovery/InfiniteDiscoveryContext.ts +++ b/src/app/Scenes/InfiniteDiscovery/InfiniteDiscoveryContext.ts @@ -9,17 +9,8 @@ export interface InfiniteDiscoveryContextModel { } export const initialModel: InfiniteDiscoveryContextModel = { - artworks: [ - "black100", - "white100", - "green100", - "yellow100", - "orange100", - "red100", - "purple100", - "blue100", - ], - currentArtwork: "black100", + artworks: ["red100", "green100", "blue100"], + currentArtwork: "red100", goToPreviousArtwork: action((state) => { const currentIndex = state.artworks.indexOf(state.currentArtwork) if (currentIndex - 1 < 0) return