made artwork card fill content area

artsy · Dec 17, 2024 · 03cba7b · 03cba7b
1 parent e718291
commit 03cba7b
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 68 deletions.
diff --git 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<Animated.ValueXY>(new Animated.ValueXY()).current
 
@@ -66,7 +72,7 @@ export const FancySwiper = ({ cards, onSwipeRight, onSwipeLeft }: FancySwiperPro
 
   return (
     <>
-      <Flex justifyContent="center" alignItems="center" flex={1}>
+      <Flex flex={1}>
         {remainingCards.map((card, index) => {
           const isTopCard = index === remainingCards.length - 1
 
@@ -84,7 +90,7 @@ export const FancySwiper = ({ cards, onSwipeRight, onSwipeLeft }: FancySwiperPro
           )
         })}
       </Flex>
-      <FancySwiperIcons swiper={swiper} OnPress={onSwipeHandler} />
+      {!hideActionButtons && <FancySwiperIcons swiper={swiper} OnPress={onSwipeHandler} />}
     </>
   )
 }
diff --git 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 (
       <Animated.View
-        style={[{ position: "absolute", zIndex: -1 }, isTopCard && animatedStyle]}
+        style={[
+          StyleSheet.absoluteFillObject,
+          { zIndex: -1, backgroundColor: "white" },
+          isTopCard && animatedStyle,
+        ]}
         {...rest}
       >
         {card.jsx}

diff --git 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 (
-    <Screen>
-      <Screen.Header
-        title="Discovery"
-        leftElements={
-          <Touchable onPress={handleBackPressed}>
-            <Text variant="xs">Back</Text>
-          </Touchable>
-        }
-        hideLeftElements={!canGoBack}
-        rightElements={
-          <Touchable onPress={handleExitPressed}>
-            <Text variant="xs">Exit</Text>
-          </Touchable>
-        }
-      />
-      <Screen.Body>
-        <FancySwiper
-          cards={artworkCards(artworks)}
-          onSwipeRight={handleSwipedRight}
-          onSwipeLeft={handleSwipedLeft}
-        />
-      </Screen.Body>
-    </Screen>
-  )
-}
-
-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: (
-        <Flex width={width - space(4)} height={500} backgroundColor="white">
+        <>
           <Flex flexDirection="row" justifyContent="space-between" testID="artist-header">
             <Text variant="sm-display">Artist Name</Text>
             <Button variant="outlineGray">Follow</Button>
           </Flex>
-          <Flex
-            backgroundColor={color(artwork)}
-            height={250}
-            testID="image-frame"
-            width={250}
-          ></Flex>
-          <Flex testID="multi-image-tabs" />
+          <Flex alignItems="center">
+            <Image src="https://d32dm0rphc51dk.cloudfront.net/Wor_U4FSvsAmEAEFj1iyVg/medium.jpg" />
+          </Flex>
           <Flex flexDirection="row" justifyContent="space-between" testID="artwork-info">
             <Flex>
               <Flex flexDirection="row">
@@ -107,9 +68,36 @@ const artworkCards = (artworks: Color[]) => {
             </Flex>
             <Button variant="fillGray">Save</Button>
           </Flex>
-        </Flex>
+        </>
       ),
       id: artwork,
     }
   })
+
+  return (
+    <Screen>
+      <Screen.Header
+        title="Discovery"
+        leftElements={
+          <Touchable onPress={handleBackPressed}>
+            <Text variant="xs">Back</Text>
+          </Touchable>
+        }
+        hideLeftElements={!canGoBack}
+        rightElements={
+          <Touchable onPress={handleExitPressed}>
+            <Text variant="xs">Exit</Text>
+          </Touchable>
+        }
+      />
+      <Screen.Body fullwidth>
+        <FancySwiper
+          cards={artworkCards}
+          hideActionButtons
+          onSwipeRight={handleSwipedRight}
+          onSwipeLeft={handleSwipedLeft}
+        />
+      </Screen.Body>
+    </Screen>
+  )
 }
diff --git 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