diff --git a/src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResultItem.tsx b/src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResultItem.tsx index d6d0a34c26..727b558297 100644 --- a/src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResultItem.tsx +++ b/src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResultItem.tsx @@ -1,4 +1,4 @@ -import { Intent, ContextModule } from "@artsy/cohesion" +import { ContextModule, Intent } from "@artsy/cohesion" import { ArrowDownIcon, ArrowUpIcon, @@ -33,6 +33,8 @@ export interface Props extends SystemContextProps { index: number mediator?: Mediator lastChild: boolean + filtersAtDefault: boolean + paginated: boolean } const FullWidthBorderBox = styled(BorderBox)` @@ -83,7 +85,12 @@ export const ArtistAuctionResultItem: SFC = props => { /> - {renderSmallCollapse({ ...props, expanded }, user, mediator)} + {renderSmallCollapse( + { ...props, expanded }, + user, + mediator, + props.filtersAtDefault + )} @@ -101,7 +108,12 @@ export const ArtistAuctionResultItem: SFC = props => { - {renderLargeCollapse({ ...props, expanded }, user, mediator)} + {renderLargeCollapse( + { ...props, expanded }, + user, + mediator, + props.filtersAtDefault + )} @@ -183,7 +195,9 @@ const LargeAuctionItem: SFC = props => { saleDate, props.user, props.mediator, - "lg" + "lg", + props.filtersAtDefault, + props.paginated )} @@ -221,7 +235,15 @@ const ExtraSmallAuctionItem: SFC = props => { )} - {renderPricing(salePrice, saleDate, props.user, props.mediator, "xs")} + {renderPricing( + salePrice, + saleDate, + props.user, + props.mediator, + "xs", + props.filtersAtDefault, + props.paginated + )} {title} {title && date_text && ", "} @@ -298,9 +320,22 @@ const getProps = (props: Props) => { } } -const renderPricing = (salePrice, saleDate, user, mediator, size) => { +const renderPricing = ( + salePrice, + saleDate, + user, + mediator, + size, + filtersAtDefault, + paginated +) => { const textSize = size === "xs" ? "2" : "3t" - if (user) { + + // If user is logged in we show prices. Otherwise we show prices only for the default view - on page 1 and filters not changed. + // Ideally we get current page number from filter context 'page' property but somehow it is always '1'. + // So we resort to pagination detection. If user has paginated at all, prices will be hidden. even if user comes back to page 1. + // TODO: Fix filter context so its 'page' property has the current page number, then change this code. + if (user || (filtersAtDefault && !paginated)) { const textAlign = size === "xs" ? "left" : "right" const dateOfSale = DateTime.fromISO(saleDate) const now = DateTime.local() @@ -396,9 +431,17 @@ const renderEstimate = (estimatedPrice, user, mediator, size) => { } } -const renderRealizedPrice = (estimatedPrice, user, mediator, size) => { +const renderRealizedPrice = ( + estimatedPrice, + user, + mediator, + size, + filtersAtDefault, + paginated +) => { const justifyContent = size === "xs" ? "flex-start" : "flex-end" - if (user) { + // Show prices if user is logged in. Otherwise, show prices only on default view - filters at default and no pagination has happened. + if (user || (filtersAtDefault && !paginated)) { return ( {estimatedPrice && ( @@ -432,7 +475,7 @@ const renderRealizedPrice = (estimatedPrice, user, mediator, size) => { } } -const renderLargeCollapse = (props, user, mediator) => { +const renderLargeCollapse = (props, user, mediator, filtersAtDefault) => { const { expanded, auctionResult: { @@ -503,7 +546,14 @@ const renderLargeCollapse = (props, user, mediator) => { - {renderRealizedPrice(salePrice, user, mediator, "lg")} + {renderRealizedPrice( + salePrice, + user, + mediator, + "lg", + filtersAtDefault, + props.paginated + )} @@ -526,7 +576,7 @@ const renderLargeCollapse = (props, user, mediator) => { ) } -const renderSmallCollapse = (props, user, mediator) => { +const renderSmallCollapse = (props, user, mediator, filtersAtDefault) => { const { expanded, auctionResult: { @@ -583,7 +633,14 @@ const renderSmallCollapse = (props, user, mediator) => { - {renderRealizedPrice(salePrice, user, mediator, "xs")} + {renderRealizedPrice( + salePrice, + user, + mediator, + "xs", + filtersAtDefault, + props.paginated + )} diff --git a/src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResults.tsx b/src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResults.tsx index a859c73e4f..8c96a83957 100644 --- a/src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResults.tsx +++ b/src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResults.tsx @@ -2,7 +2,7 @@ import { Col, Row } from "@artsy/palette" import { ArtistAuctionResults_artist } from "__generated__/ArtistAuctionResults_artist.graphql" import { PaginationFragmentContainer as Pagination } from "Components/Pagination" import React, { useState } from "react" -import { createRefetchContainer, graphql, RelayRefetchProp } from "react-relay" +import { RelayRefetchProp, createRefetchContainer, graphql } from "react-relay" import useDeepCompareEffect from "use-deep-compare-effect" import { AuctionResultItemFragmentContainer as AuctionResultItem } from "./ArtistAuctionResultItem" import { TableSidebar } from "./Components/TableSidebar" @@ -24,6 +24,7 @@ import { AuctionFilterMobileActionSheet } from "./Components/AuctionFilterMobile import { AuctionFilters } from "./Components/AuctionFilters" import { AuctionResultHeaderFragmentContainer as AuctionResultHeader } from "./Components/AuctionResultHeader" import { AuctionResultsControls } from "./Components/AuctionResultsControls" +import { auctionResultsFilterResetState } from "./AuctionResultsFilterContext" const logger = createLogger("ArtistAuctionResults.tsx") @@ -50,6 +51,9 @@ const AuctionResultsContainer: React.FC = ({ allowEmptyCreatedDates, } = filterContext.filters + // Detect whether user has paginated at all. + const [paginated, togglePaginated] = useState(false) + const loadNext = () => { const { hasNextPage, endCursor } = pageInfo @@ -60,6 +64,7 @@ const AuctionResultsContainer: React.FC = ({ const loadAfter = cursor => { setIsLoading(true) + togglePaginated(true) relay.refetch( { @@ -91,6 +96,12 @@ const AuctionResultsContainer: React.FC = ({ const [showMobileActionSheet, toggleMobileActionSheet] = useState(false) const tracking = useTracking() + // Is current filter state different from the default (reset) state? + const filtersAtDefault = isEqual( + filterContext.filters, + auctionResultsFilterResetState + ) + const previousFilters = usePrevious(filterContext.filters) // TODO: move this and artwork copy to util? @@ -154,6 +165,8 @@ const AuctionResultsContainer: React.FC = ({ index={index} auctionResult={node} lastChild={index === auctionResultsLength - 1} + filtersAtDefault={filtersAtDefault} + paginated={paginated} /> ) diff --git a/src/Apps/Artist/Routes/AuctionResults/AuctionResultsFilterContext.tsx b/src/Apps/Artist/Routes/AuctionResults/AuctionResultsFilterContext.tsx index cf96ba6cb6..d39f65b958 100644 --- a/src/Apps/Artist/Routes/AuctionResults/AuctionResultsFilterContext.tsx +++ b/src/Apps/Artist/Routes/AuctionResults/AuctionResultsFilterContext.tsx @@ -71,7 +71,7 @@ export type SharedAuctionResultsFilterContextProps = Pick< onChange?: (filterState) => void } -let auctionResultsFilterResetState: AuctionResultsFilters = initialAuctionResultsFilterState +export let auctionResultsFilterResetState: AuctionResultsFilters = initialAuctionResultsFilterState export const AuctionResultsFilterContextProvider: React.FC { expect(wrapper.html()).toContain("Showing 830 results") }) + it("renders either realized price or price not avail", () => { + expect(wrapper.html()).toContain( + "Price not available" || "Realized price" + ) + }) + it("renders proper select options", () => { const html = wrapper.find("SelectSmall").html() expect(html).toContain("Most recent") @@ -117,10 +123,21 @@ describe("AuctionResults", () => { }) ) }) + + it("re-shows sign up to see price", () => { + const pagination = wrapper.find("Pagination") + pagination + .find("button") + .at(2) + .simulate("click") + wrapper.update() + const html = wrapper.html() + expect(html).toContain("Sign up to see price") + }) }) describe("filters", () => { describe("medium filter", () => { - it("triggers relay refetch with medium list", done => { + it("triggers relay refetch with medium list, and re-shows sign up to see price", done => { const filter = wrapper.find("MediumFilter") const checkboxes = filter.find("Checkbox") @@ -171,13 +188,17 @@ describe("AuctionResults", () => { allowEmptyCreatedDates: true, }, }) + + wrapper.update() + const html = wrapper.html() + expect(html).toContain("Sign up to see price") + done() }) }) }) describe("auction house filter", () => { - // TODO: Re-enable once we uncollapse auction house filters - it.skip("triggers relay refetch with organization list", done => { + it("triggers relay refetch with organization list, and re-shows sign up to see price", done => { const filter = wrapper.find("AuctionHouseFilter") const checkboxes = filter.find("Checkbox") @@ -209,12 +230,17 @@ describe("AuctionResults", () => { organizations: ["Phillips"], }) ) + + wrapper.update() + const html = wrapper.html() + expect(html).toContain("Sign up to see price") + done() }) }) }) describe("size filter", () => { - it("triggers relay refetch with size list and tracks events", done => { + it("triggers relay refetch with size list and tracks events, and re-shows sign up to see price", done => { const filter = wrapper.find("SizeFilter") const checkboxes = filter.find("Checkbox") @@ -266,13 +292,17 @@ describe("AuctionResults", () => { }, }) + wrapper.update() + const html = wrapper.html() + expect(html).toContain("Sign up to see price") + done() }) }) }) describe("year created filter", () => { const value = v => ({ target: { value: `${v}` } }) - it("triggers relay refetch with created years and tracks events", () => { + it("triggers relay refetch with created years and tracks events, and re-shows sign up to see price", () => { const filter = wrapper.find("YearCreated") const selects = filter.find("select") @@ -292,12 +322,16 @@ describe("AuctionResults", () => { latestCreatedYear: 1973, }) ) + + wrapper.update() + const html = wrapper.html() + expect(html).toContain("Sign up to see price") }) }) }) describe("sort", () => { - it("triggers relay refetch with correct params", done => { + it("triggers relay refetch with correct params, and re-shows sign up to see price", done => { const sort = wrapper.find("SortSelect SelectSmall") sort @@ -313,6 +347,11 @@ describe("AuctionResults", () => { sort: "ESTIMATE_AND_DATE_DESC", }) ) + + wrapper.update() + const html = wrapper.html() + expect(html).toContain("Sign up to see price") + done() }) })