loaded artworks from the curator's pick collection

artsy · Dec 19, 2024 · 8c0dcd3 · 8c0dcd3
1 parent c5dfb08
commit 8c0dcd3
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 25 deletions.
diff --git a/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx b/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx
@@ -1,4 +1,5 @@
 import {
+  Avatar,
   Button,
   Flex,
   Image,
@@ -8,10 +9,13 @@ import {
   useScreenDimensions,
   useTheme,
 } from "@artsy/palette-mobile"
+import { InfiniteDiscoveryQuery } from "__generated__/InfiniteDiscoveryQuery.graphql"
 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"
+import { useEffect } from "react"
+import { graphql, useLazyLoadQuery } from "react-relay"
 
 export const InfiniteDiscoveryView: React.FC = () => {
   return (
@@ -25,16 +29,26 @@ export const InfiniteDiscovery: React.FC = () => {
   const { color } = useTheme()
   const { width: screenWidth } = useScreenDimensions()
 
+  const data = useLazyLoadQuery<InfiniteDiscoveryQuery>(infiniteDiscoveryQuery, {})
+
   const artworks = InfiniteDiscoveryContext.useStoreState((state) => state.artworks)
-  const currentArtwork = InfiniteDiscoveryContext.useStoreState((state) => state.currentArtwork)
+  const currentArtworkIndex = InfiniteDiscoveryContext.useStoreState(
+    (state) => state.currentArtworkIndex
+  )
   const goToPreviousArtwork = InfiniteDiscoveryContext.useStoreActions(
     (action) => action.goToPreviousArtwork
   )
   const goToNextArtwork = InfiniteDiscoveryContext.useStoreActions(
     (actions) => actions.goToNextArtwork
   )
+  const setArtworks = InfiniteDiscoveryContext.useStoreActions((actions) => actions.setArtworks)
+
+  useEffect(() => {
+    setArtworks(
+      (data.marketingCollection?.artworksConnection?.edges?.map((edge) => edge?.node) as any) || []
+    )
+  }, [data])
 
-  const currentArtworkIndex = artworks.indexOf(currentArtwork)
   const canGoBack = currentArtworkIndex > 0
 
   const handleBackPressed = () => {
@@ -58,33 +72,41 @@ export const InfiniteDiscovery: React.FC = () => {
       jsx: (
         <Flex backgroundColor={color("white100")}>
           <Flex flexDirection="row" justifyContent="space-between" testID="artist-header">
-            <Text variant="sm-display">Artist Name</Text>
+            <Flex flexDirection="row">
+              <Avatar
+                initials={artwork.artists[0].initials || undefined}
+                src={artwork.artists[0].coverArtwork?.image?.cropped?.url || undefined}
+                size="xs"
+              />
+              <Flex>
+                <Text variant="sm-display">{artwork.artistNames}</Text>
+                <Text variant="xs" color={color("black60")}>
+                  {artwork.artists[0].formattedNationalityAndBirthday}
+                </Text>
+              </Flex>
+            </Flex>
             <Button variant="outlineGray">Follow</Button>
           </Flex>
           <Flex alignItems="center">
-            <Image
-              src="https://d32dm0rphc51dk.cloudfront.net/Wor_U4FSvsAmEAEFj1iyVg/medium.jpg"
-              width={screenWidth}
-              aspectRatio={0.79}
-            />
+            <Image src={artwork.images[0].url} width={screenWidth} aspectRatio={0.79} />
           </Flex>
           <Flex flexDirection="row" justifyContent="space-between" testID="artwork-info">
             <Flex>
               <Flex flexDirection="row">
                 <Text color={color("black60")} italic variant="sm-display">
-                  Artwork Title,
+                  {artwork.title}
                 </Text>
                 <Text color={color("black60")} variant="sm-display">
-                  2024
+                  , {artwork.date}
                 </Text>
               </Flex>
-              <Text variant="sm-display">$1,234</Text>
+              <Text variant="sm-display">{artwork.saleMessage}</Text>
             </Flex>
             <Button variant="fillGray">Save</Button>
           </Flex>
         </Flex>
       ),
-      id: artwork,
+      id: artwork.internalID,
     }
   })
 
@@ -117,3 +139,35 @@ export const InfiniteDiscovery: React.FC = () => {
     </Screen>
   )
 }
+
+const infiniteDiscoveryQuery = graphql`
+  query InfiniteDiscoveryQuery {
+    marketingCollection(slug: "curators-picks") {
+      artworksConnection(first: 10) {
+        edges {
+          node {
+            artistNames
+            artists(shallow: true) {
+              initials
+              formattedNationalityAndBirthday
+              coverArtwork {
+                image {
+                  cropped(height: 45, width: 45) {
+                    url
+                  }
+                }
+              }
+            }
+            date
+            internalID
+            images {
+              url(version: "large")
+            }
+            saleMessage
+            title
+          }
+        }
+      }
+    }
+  }
+`
diff --git a/src/app/Scenes/InfiniteDiscovery/InfiniteDiscoveryContext.ts b/src/app/Scenes/InfiniteDiscovery/InfiniteDiscoveryContext.ts
@@ -1,27 +1,28 @@
-import { Color } from "@artsy/palette-mobile"
 import { action, Action, createContextStore } from "easy-peasy"
 
 export interface InfiniteDiscoveryContextModel {
-  artworks: Color[]
-  currentArtwork: Color
+  artworks: any[]
+  currentArtworkIndex: number
   goToPreviousArtwork: Action<this>
   goToNextArtwork: Action<this>
+  setArtworks: Action<this, any[]>
 }
 
 export const initialModel: InfiniteDiscoveryContextModel = {
-  artworks: ["red100", "green100", "blue100"],
-  currentArtwork: "red100",
+  artworks: [],
+  currentArtworkIndex: 0,
   goToPreviousArtwork: action((state) => {
-    const currentIndex = state.artworks.indexOf(state.currentArtwork)
-    if (currentIndex - 1 < 0) return
-    const previousIndex = currentIndex - 1
-    state.currentArtwork = state.artworks[previousIndex]
+    if (state.currentArtworkIndex > 0) {
+      state.currentArtworkIndex--
+    }
   }),
   goToNextArtwork: action((state) => {
-    const currentIndex = state.artworks.indexOf(state.currentArtwork)
-    if (currentIndex + 1 === state.artworks.length) return
-    const nextIndex = currentIndex + 1
-    state.currentArtwork = state.artworks[nextIndex]
+    if (state.currentArtworkIndex < state.artworks.length - 1) {
+      state.currentArtworkIndex++
+    }
+  }),
+  setArtworks: action((state, artworks) => {
+    state.artworks = artworks
   }),
 }