Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor consign pages to use artworksConnection and add realized / estimate price multiplier to /consign recently sold artworks #6775

Merged
merged 4 commits into from
Dec 14, 2020
Merged

Refactor consign pages to use artworksConnection and add realized / estimate price multiplier to /consign recently sold artworks #6775

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8ab3ab4
WIP
williardx Dec 8, 2020
b774054
fix: update test
damassi Dec 9, 2020
e374a26
Only show works in recently sold rail if they have realizedToEstimate…
williardx Dec 10, 2020
11a0aaf
Update tests for SoldRecently
williardx Dec 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 1 addition & 16 deletions data/schema.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1196,17 +1196,6 @@ type ArtistTargetSupply {
}

type ArtistTargetSupplyMicrofunnel {
artworks(
# Randomize the order of artworks for display purposes.
randomize: Boolean

# Number of artworks to return
size: Int
): [ArtistTargetSupplyMicrofunnelArtwork]
@deprecated(
reason: "Prefer to use `artworksConnection`. [Will be removed in v2]"
)

# A list of recently sold artworks.
artworksConnection(
after: String
Expand All @@ -1220,11 +1209,6 @@ type ArtistTargetSupplyMicrofunnel {
metadata: TargetSupplyMicrofunnelMetadata
}

type ArtistTargetSupplyMicrofunnelArtwork {
artwork: Artwork
realizedPrice: String
}

type Artwork implements Node & Searchable & Sellable {
additionalInformation(format: Format): String
articles(size: Int): [Article]
Expand Down Expand Up @@ -1403,6 +1387,7 @@ type Artwork implements Node & Searchable & Sellable {
# in the target supply microfunnel and (currently) queries against hardcoded
# spreadsheet data.
realizedPrice: String
realizedToEstimate: String
related(size: Int): [Artwork]
sale: Sale
saleArtwork(saleID: String = null): SaleArtwork
Expand Down
2 changes: 1 addition & 1 deletion src/v2/Apps/Artist/Components/ArtistCollectionsRail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ export const ArtistCollectionsRailContent: React.SFC<Props> = passedProps => {
<QueryRenderer<ArtistCollectionsRailQuery>
environment={relayEnvironment}
variables={{
artistID: passedProps.artistID,
isFeaturedArtistContent: true,
size: 16,
artistID: passedProps.artistID,
}}
query={graphql`
query ArtistCollectionsRailQuery(
Expand Down
56 changes: 18 additions & 38 deletions ...2/Apps/Artist/Routes/Consign/Components/ArtistConsignHeader/ArtistConsignHeaderImages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,22 @@ import React from "react"
import { createFragmentContainer, graphql } from "react-relay"
import styled from "styled-components"

type Artworks = ArtistConsignHeaderImages_artist["targetSupply"]["microfunnel"]["artworks"]
type Artworks = ArtistConsignHeaderImages_artist["targetSupply"]["microfunnel"]["artworksConnection"]["edges"]

interface HeaderImageProps {
artist: ArtistConsignHeaderImages_artist
}

export const ArtistConsignHeaderImages: React.FC<HeaderImageProps> = props => {
const { error, leftImage, rightImage } = getImages(
props.artist.targetSupply.microfunnel.artworks
)
const leftImage =
props.artist.targetSupply.microfunnel?.artworksConnection?.edges?.[0]?.node
const rightImage = last(
props.artist.targetSupply.microfunnel?.artworksConnection?.edges
)?.node
const error = !(leftImage && rightImage)
if (error) {
return null
}

return (
<HeaderImageContainer>
<Flex width="100%" justifyContent="space-between" m="auto">
Expand All @@ -40,16 +42,18 @@ export const ArtistConsignHeaderImagesFragmentContainer = createFragmentContaine
fragment ArtistConsignHeaderImages_artist on Artist {
targetSupply {
microfunnel {
artworks {
artwork {
image {
resized(height: 395) {
width
height
url
artworksConnection {
edges {
node {
image {
resized(height: 395) {
width
height
url
}
}
...FillwidthItem_artwork
}
...FillwidthItem_artwork
}
}
}
Expand All @@ -58,32 +62,8 @@ export const ArtistConsignHeaderImagesFragmentContainer = createFragmentContaine
`,
}
)

export const getImages = (artworks: Artworks) => {
try {
const leftImage = last(artworks)
const rightImage = artworks[1]
const foundImages = leftImage && rightImage

if (!foundImages) {
return {
error: true,
}
}

return {
leftImage: leftImage.artwork,
rightImage: rightImage.artwork,
}
} catch {
return {
error: true,
}
}
}

interface ImageProps {
image: Artworks[0]["artwork"]["image"]
image: Artworks[0]["node"]["image"]
}
const LeftImagePhoto: React.FC<ImageProps> = ({ image }) => {
return (
Expand Down
12 changes: 7 additions & 5 deletions src/v2/Apps/Artist/Routes/Consign/Components/ArtistConsignMeta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const ArtistConsignMeta: React.FC<ArtistConsignMeta> = props => {

const imageURL = get(
targetSupply,
p => p.microfunnel.artworks[0].artwork.image.imageURL
p => p.microfunnel.artworksConnection.edges[0].node.image.imageURL
)

const appURL = getENV("APP_URL")
Expand Down Expand Up @@ -50,10 +50,12 @@ export const ArtistConsignMetaFragmentContainer = createFragmentContainer(
href
targetSupply {
microfunnel {
artworks {
artwork {
image {
imageURL: url(version: "medium")
artworksConnection {
edges {
node {
image {
imageURL: url(version: "medium")
}
}
}
}
Expand Down
23 changes: 12 additions & 11 deletions src/v2/Apps/Artist/Routes/Consign/Components/ArtistConsignRecentlySold.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ interface ArtistConsignRecentlySoldProps {
export const ArtistConsignRecentlySold: React.FC<ArtistConsignRecentlySoldProps> = ({
artist,
}) => {
if (!artist.targetSupply.microfunnel.artworks) {
if (artist.targetSupply.microfunnel.artworksConnection.edges.length === 0) {
return null
}

Expand All @@ -29,8 +29,8 @@ export const ArtistConsignRecentlySold: React.FC<ArtistConsignRecentlySoldProps>
<Spacer my={4} />

<Flex justifyContent={["center", "center"]} flexWrap="wrap">
{artist.targetSupply.microfunnel.artworks.map(
({ artwork, realizedPrice }, key) => {
{artist.targetSupply.microfunnel.artworksConnection.edges.map(
({ node }, key) => {
return (
<Flex
p={2}
Expand All @@ -39,14 +39,14 @@ export const ArtistConsignRecentlySold: React.FC<ArtistConsignRecentlySoldProps>
style={{ textAlign: "left" }}
>
<FillwidthItem
artwork={artwork}
artwork={node}
imageHeight={150}
showExtended={false}
contextModule={ContextModule.artistRecentlySold}
/>
{realizedPrice && (
{node.realizedPrice && (
<Sans size="2" weight="medium">
Sold for {realizedPrice}
Sold for {node.realizedPrice}
</Sans>
)}
</Flex>
Expand All @@ -67,15 +67,16 @@ export const ArtistConsignRecentlySoldFragmentContainer = createFragmentContaine
fragment ArtistConsignRecentlySold_artist on Artist {
targetSupply {
microfunnel {
artworks {
artwork {
...FillwidthItem_artwork
artworksConnection {
edges {
node {
...FillwidthItem_artwork
realizedPrice
}
}
realizedPrice
}
}
}

name
}
`,
Expand Down
34 changes: 19 additions & 15 deletions src/v2/Apps/Artist/Routes/Consign/Components/__tests__/ArtistConsignMeta.jest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,21 @@ jest.mock("v2/Utils/getENV", () => ({
describe("ArtistConsignMeta", () => {
const props = {
artist: {
name: "Alex Katz",
href: "/artist/alex-katz",
name: "Alex Katz",
targetSupply: {
microfunnel: {
artworks: [
{
artwork: {
image: {
imageURL: "path/to/image.jpg",
artworksConnection: {
edges: [
{
node: {
image: {
imageURL: "path/to/image.jpg",
},
},
},
},
],
],
},
},
},
},
Expand Down Expand Up @@ -107,15 +109,17 @@ describe("ArtistConsignMeta", () => {
artist: {
targetSupply: {
microfunnel: {
artworks: [
{
artwork: {
image: {
imageURL: null,
artworksConnection: {
edges: [
{
node: {
image: {
imageURL: null,
},
},
},
},
],
],
},
},
},
},
Expand Down
75 changes: 50 additions & 25 deletions src/v2/Apps/Consign/Routes/MarketingLanding/Components/SoldRecently.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { SectionContainer } from "./SectionContainer"
import { Media } from "v2/Utils/Responsive"
import { useTracking } from "react-tracking"
import { ContextModule, OwnerType, clickedArtworkGroup } from "@artsy/cohesion"
import { flatten, shuffle } from "lodash"

const HEIGHT = 300

Expand All @@ -25,9 +26,16 @@ const SoldRecently: React.FC<SoldRecentlyProps> = ({ targetSupply }) => {
return null
}

const recentlySoldArtworks = targetSupply.microfunnel.map(microfunnel => {
return extractNodes(microfunnel.artworksConnection)
})
const recentlySoldArtworks = shuffle(
flatten(
targetSupply.microfunnel.map(microfunnel => {
const artworks = extractNodes(microfunnel.artworksConnection)
return artworks.filter(
artwork => artwork.realizedPrice && artwork.realizedToEstimate
)
})
)
)

const trackArtworkItemClick = (artwork, horizontalSlidePosition) => () => {
tracking.trackEvent(
Expand All @@ -48,7 +56,7 @@ const SoldRecently: React.FC<SoldRecentlyProps> = ({ targetSupply }) => {
</Text>
<Flex flexDirection="column">
<Carousel arrowHeight={HEIGHT}>
{recentlySoldArtworks.map(([artwork, _], index) => {
{recentlySoldArtworks.map((artwork, index) => {
return (
<Flex
key={index}
Expand All @@ -63,31 +71,47 @@ const SoldRecently: React.FC<SoldRecentlyProps> = ({ targetSupply }) => {
showExtended={false}
onClick={trackArtworkItemClick(artwork, index)}
/>
{artwork.realizedPrice && (
<>
<Media greaterThanOrEqual="sm">
<>
<Media greaterThanOrEqual="sm">
<Flex flexDirection="row" alignItems="baseline">
<Text variant="largeTitle">{artwork.realizedPrice}</Text>
<Spacer ml={0.5} />
<Text variant="caption" color="black60">
Realized price
</Text>
</Flex>
<Flex flexDirection="row" alignItems="baseline">
<Text variant="caption" fontWeight="bold" color="#00A03E">
{artwork.realizedToEstimate + "x"}
</Text>
<Spacer ml={0.3} />
<Text variant="caption" color="black60">
estimate
</Text>
</Flex>
</Media>
<Media lessThan="sm">
<Flex flexDirection="column">
<Text variant="caption" color="black60" mt={0.5}>
Realized price
</Text>
<Text variant="largeTitle">{artwork.realizedPrice}</Text>
<Flex flexDirection="row" alignItems="baseline">
<Text variant="caption" color="black60">
Realized price
</Text>
<Spacer ml={0.5} />
<Text variant="largeTitle">
{artwork.realizedPrice}
<Text
variant="caption"
fontWeight="bold"
color="#00A03E"
>
{artwork.realizedToEstimate + "x"}
</Text>
</Flex>
</Media>
<Media lessThan="sm">
<Flex flexDirection="column">
<Spacer ml={0.3} />
<Text variant="caption" color="black60">
Realized price
</Text>
<Text variant="largeTitle">
{artwork.realizedPrice}
estimate
</Text>
</Flex>
</Media>
</>
)}
</Flex>
</Media>
</>
</Flex>
)
})}
Expand All @@ -101,11 +125,12 @@ const SoldRecentlyFragmentContainer = createFragmentContainer(SoldRecently, {
targetSupply: graphql`
fragment SoldRecently_targetSupply on TargetSupply {
microfunnel {
artworksConnection(first: 1) {
artworksConnection {
edges {
node {
...FillwidthItem_artwork
realizedPrice
realizedToEstimate
}
}
}
Expand Down
Loading