From c6a6224cab9d4223fa25faaf77a6ca536f578d3c Mon Sep 17 00:00:00 2001 From: Ole Date: Mon, 20 Jan 2025 17:41:30 +0100 Subject: [PATCH] feat(ONYX-1486): Section title prefetching and refactoring (#11405) * feat: Section title prefetching and refactoring * code * more * fixes * fix more * simplify passProps * section path ID * RightButtonContent fix * tests --- src/app/Components/EmbeddedCarousel.tsx | 9 +- src/app/Components/SectionTitle.tsx | 92 +++++++------ src/app/Navigation/routes.tsx | 8 +- .../HomeView/Components/ActivityRail.tsx | 6 +- .../HomeView/Components/ArticlesRail.tsx | 126 +++++++----------- .../Components/ArtistRails/ArtistRail.tsx | 5 +- .../ArtistRails/RecommendedArtistsRail.tsx | 5 +- .../HomeView/Components/ArtworkModuleRail.tsx | 49 ++++--- .../Components/ArtworkRecommendationsRail.tsx | 20 ++- .../Scenes/HomeView/Components/ShowsRail.tsx | 57 ++++---- .../Sections/HomeViewSectionActivity.tsx | 34 +++-- .../Sections/HomeViewSectionArticles.tsx | 17 +-- .../Sections/HomeViewSectionArticlesCards.tsx | 4 +- .../Sections/HomeViewSectionArtists.tsx | 4 +- .../Sections/HomeViewSectionArtworks.tsx | 46 +++---- .../HomeViewSectionAuctionResults.tsx | 35 ++--- .../Sections/HomeViewSectionCardsChips.tsx | 8 +- .../Sections/HomeViewSectionFairs.tsx | 45 +++---- .../HomeViewSectionFeaturedCollection.tsx | 42 +++--- .../HomeViewSectionMarketingCollections.tsx | 38 ++---- .../Sections/HomeViewSectionSales.tsx | 42 +++--- .../Sections/HomeViewSectionViewingRooms.tsx | 36 ++--- .../HomeViewSectionAuctionResults.tests.tsx | 35 ----- .../helpers/getHomeViewSectionHref.ts | 6 + .../HomeViewSectionScreen.tsx | 6 +- src/app/Scenes/MyAccount/MyAccount.tests.tsx | 2 +- src/app/Scenes/MyAccount/MyAccount.tsx | 6 +- .../MyCollectionArtworkComparableWorks.tsx | 1 + .../Sale/Components/BuyNowArtworksRail.tsx | 5 +- .../Sale/Components/NewBuyNowArtworksRail.tsx | 5 +- .../Sale/Components/SaleArtworksRail.tsx | 5 +- src/app/Scenes/Sales/Components/SaleList.tsx | 1 + src/app/Scenes/Search/CuratedCollections.tsx | 4 +- src/app/Scenes/Search/RecentSearches.tsx | 1 + src/app/Scenes/Search/TrendingArtists.tsx | 4 +- .../Scenes/ViewingRoom/ViewingRoomsList.tsx | 12 +- src/app/utils/queryPrefetching.ts | 23 +--- 37 files changed, 364 insertions(+), 480 deletions(-) create mode 100644 src/app/Scenes/HomeView/helpers/getHomeViewSectionHref.ts diff --git a/src/app/Components/EmbeddedCarousel.tsx b/src/app/Components/EmbeddedCarousel.tsx index f7dd6b141a3..70dbae29873 100644 --- a/src/app/Components/EmbeddedCarousel.tsx +++ b/src/app/Components/EmbeddedCarousel.tsx @@ -1,4 +1,4 @@ -import { Spacer, Flex, Touchable } from "@artsy/palette-mobile" +import { Flex, Spacer, Touchable } from "@artsy/palette-mobile" import { SectionTitle } from "app/Components/SectionTitle" import React from "react" import { FlatList, FlatListProps } from "react-native" @@ -20,11 +20,8 @@ export const EmbeddedCarousel: React.FC - {!!title && ( - - - - )} + {!!title && } + = ({ - children, - href, - onPress, -}) => { - if (onPress) { - return ( - - {children} - - ) - } else { - return <>{children} - } -} - -export const SectionTitle: React.FC<{ - href?: string | null - title: React.ReactNode - titleVariant?: TextProps["variant"] - subtitle?: React.ReactNode - onPress?: () => any - RightButtonContent?: React.FC - mb?: SpacingUnit - capitalized?: boolean -}> = ({ +export const SectionTitle: React.FC< + { + href?: string | null + title: React.ReactNode + titleVariant?: TextProps["variant"] + subtitle?: React.ReactNode + navigationProps?: object + onPress?: () => any + RightButtonContent?: React.FC + mb?: SpacingUnit + capitalized?: boolean + } & FlexProps +> = ({ href, + navigationProps, title, titleVariant = "sm-display", subtitle, onPress, RightButtonContent = RightButton, - mb = 2, capitalized = true, + ...flexProps }) => { const { color } = useTheme() let titleText @@ -51,19 +41,21 @@ export const SectionTitle: React.FC<{ } return ( - - + + {typeof title === "string" ? titleText : title} - {Boolean(subtitle) && ( + + {!!subtitle && ( {subtitle} )} - {!!onPress && ( + + {(!!href || !!onPress) && ( @@ -73,6 +65,30 @@ export const SectionTitle: React.FC<{ ) } +const Wrapper: React.FC<{ onPress?(): void; href?: string | null; navigationProps?: object }> = ({ + children, + href, + navigationProps, + onPress, +}) => { + if (onPress) { + return ( + + {children} + + ) + } else { + return <>{children} + } +} + const RightButton = () => ( diff --git a/src/app/Navigation/routes.tsx b/src/app/Navigation/routes.tsx index 5adbea6a3a7..96655b07112 100644 --- a/src/app/Navigation/routes.tsx +++ b/src/app/Navigation/routes.tsx @@ -65,7 +65,10 @@ import { FeatureQueryRenderer } from "app/Scenes/Feature/Feature" import { GalleriesForYouScreen } from "app/Scenes/GalleriesForYou/GalleriesForYouScreen" import { GeneQueryRenderer } from "app/Scenes/Gene/Gene" import { HomeViewScreen, homeViewScreenQuery } from "app/Scenes/HomeView/HomeView" -import { HomeViewSectionScreenQueryRenderer } from "app/Scenes/HomeViewSectionScreen/HomeViewSectionScreen" +import { + HOME_SECTION_SCREEN_QUERY, + HomeViewSectionScreenQueryRenderer, +} from "app/Scenes/HomeViewSectionScreen/HomeViewSectionScreen" import { MakeOfferModalQueryRenderer } from "app/Scenes/Inbox/Components/Conversations/MakeOfferModal" import { PurchaseModalQueryRenderer } from "app/Scenes/Inbox/Components/Conversations/PurchaseModal" import { ConversationQueryRenderer } from "app/Scenes/Inbox/Screens/Conversation" @@ -785,7 +788,7 @@ export const artsyDotNetRoutes = defineRoutes([ }, }, { - path: "/home-view/sections/:sectionID", + path: "/home-view/sections/:id", name: "HomeViewSectionScreen", Component: HomeViewSectionScreenQueryRenderer, options: { @@ -793,6 +796,7 @@ export const artsyDotNetRoutes = defineRoutes([ headerShown: false, }, }, + queries: [HOME_SECTION_SCREEN_QUERY], }, { path: "/inbox", diff --git a/src/app/Scenes/HomeView/Components/ActivityRail.tsx b/src/app/Scenes/HomeView/Components/ActivityRail.tsx index ba9b641502d..1267b87c417 100644 --- a/src/app/Scenes/HomeView/Components/ActivityRail.tsx +++ b/src/app/Scenes/HomeView/Components/ActivityRail.tsx @@ -31,8 +31,6 @@ export const ActivityRail: React.FC = ({ title, viewer }) => const handleHeaderPress = () => { trackEvent(HomeAnalytics.activityHeaderTapEvent()) - - navigate("/notifications") } const handleMorePress = () => { @@ -43,9 +41,7 @@ export const ActivityRail: React.FC = ({ title, viewer }) => return ( - - - + , index: number) => void - onSectionTitlePress?: () => void + articlesConnection: ArticlesRail_articlesConnection$key + onTitlePress?: () => void + onPress?: (article: ExtractNodeType, index: number) => void title: string + titleHref?: string | null } -export const ArticlesRail: React.FC = ({ - articlesConnection, - onTrack, - onSectionTitlePress, - title, -}) => { - const articles = extractNodes(articlesConnection) - const tracking = useTracking() +export const ArticlesRail: React.FC = memo( + ({ onTitlePress, onPress, title, titleHref, ...restProps }) => { + const articlesConnection = useFragment(articlesConnectionFragment, restProps.articlesConnection) - if (!articles.length) { - return null - } + const articles = extractNodes(articlesConnection) - const onTitlePress = () => { - if (onSectionTitlePress) { - onSectionTitlePress() - } else { - tracking.trackEvent(HomeAnalytics.articlesHeaderTapEvent()) - navigate("/articles") + if (!articles.length) { + return null } - } - return ( - - - - + return ( - } - ListFooterComponent={() => } - ItemSeparatorComponent={() => } - initialNumToRender={HORIZONTAL_FLATLIST_INTIAL_NUMBER_TO_RENDER_DEFAULT} - windowSize={HORIZONTAL_FLATLIST_WINDOW_SIZE} - data={articles} - keyExtractor={(item) => `${item.internalID}`} - renderItem={({ item, index }) => ( - { - if (onTrack) { - return onTrack(item, index) - } + - const tapEvent = HomeAnalytics.articleThumbnailTapEvent( - item.internalID, - item.slug || "", - index - ) - tracking.trackEvent(tapEvent) - }} - article={item} - /> - )} - /> + + } + ListFooterComponent={() => } + ItemSeparatorComponent={() => } + initialNumToRender={HORIZONTAL_FLATLIST_INTIAL_NUMBER_TO_RENDER_DEFAULT} + windowSize={HORIZONTAL_FLATLIST_WINDOW_SIZE} + data={articles} + keyExtractor={(item) => `${item.internalID}`} + renderItem={({ item, index }) => ( + { + onPress?.(item, index) + }} + article={item} + /> + )} + /> + - - ) -} + ) + } +) -export const ArticlesRailFragmentContainer = memo( - createFragmentContainer(ArticlesRail, { - articlesConnection: graphql` - fragment ArticlesRail_articlesConnection on ArticleConnection { - edges { - node { - internalID - slug - ...ArticleCard_article - } - } +const articlesConnectionFragment = graphql` + fragment ArticlesRail_articlesConnection on ArticleConnection { + edges { + node { + internalID + slug + ...ArticleCard_article } - `, - }) -) + } + } +` diff --git a/src/app/Scenes/HomeView/Components/ArtistRails/ArtistRail.tsx b/src/app/Scenes/HomeView/Components/ArtistRails/ArtistRail.tsx index dcf29b58c24..5cca4fda31f 100644 --- a/src/app/Scenes/HomeView/Components/ArtistRails/ArtistRail.tsx +++ b/src/app/Scenes/HomeView/Components/ArtistRails/ArtistRail.tsx @@ -105,9 +105,8 @@ const ArtistRail: React.FC = (props) => { return ( - - - + + listRef={listRef} data={artists} diff --git a/src/app/Scenes/HomeView/Components/ArtistRails/RecommendedArtistsRail.tsx b/src/app/Scenes/HomeView/Components/ArtistRails/RecommendedArtistsRail.tsx index 90042b4a996..308a064cc71 100644 --- a/src/app/Scenes/HomeView/Components/ArtistRails/RecommendedArtistsRail.tsx +++ b/src/app/Scenes/HomeView/Components/ArtistRails/RecommendedArtistsRail.tsx @@ -79,9 +79,8 @@ export const RecommendedArtistsRail: React.FC - - - + + listRef={listRef} data={artists as any} diff --git a/src/app/Scenes/HomeView/Components/ArtworkModuleRail.tsx b/src/app/Scenes/HomeView/Components/ArtworkModuleRail.tsx index c957609572c..c0ead77da6e 100644 --- a/src/app/Scenes/HomeView/Components/ArtworkModuleRail.tsx +++ b/src/app/Scenes/HomeView/Components/ArtworkModuleRail.tsx @@ -82,25 +82,27 @@ const ArtworkModuleRail: React.FC = ({ return null } - const handleTitlePress = viewAllUrl - ? () => { - const tapEvent = HomeAnalytics.artworkHeaderTapEvent(rail.key ?? "") - if (tapEvent) { - tracking.trackEvent(tapEvent) - } - navigate(viewAllUrl) - } - : undefined + const handleTitlePress = () => { + const tapEvent = HomeAnalytics.artworkHeaderTapEvent(rail.key ?? "") - const handlePressMore = viewAllUrl - ? () => { - const tapEvent = HomeAnalytics.artworkShowMoreCardTapEvent(rail.key ?? "") - if (tapEvent) { - tracking.trackEvent(tapEvent) - } - navigate(viewAllUrl) - } - : undefined + if (!viewAllUrl) return + if (!tapEvent) return + + tracking.trackEvent(tapEvent) + } + + const handlePressMore = () => { + const tapEvent = HomeAnalytics.artworkShowMoreCardTapEvent(rail.key ?? "") + + if (!viewAllUrl) return + if (!tapEvent) return + + if (tapEvent) { + tracking.trackEvent(tapEvent) + } + + navigate(viewAllUrl) + } if (artworks.length === 0) { return null @@ -108,9 +110,14 @@ const ArtworkModuleRail: React.FC = ({ return ( - - - + + { - trackEvent(tracks.tappedMore(type)) + const handleMorePress = () => { + trackEvent(tracks.tappedMore("viewAll")) navigate("/artwork-recommendations") } + const handleHeaderPress = () => { + trackEvent(tracks.tappedMore("header")) + } + return ( - - handleMorePress("header")} /> - + + handleMorePress("viewAll")} + onMorePress={handleMorePress} onViewableItemsChanged={onViewableItemsChanged} viewabilityConfig={viewabilityConfig} showSaveIcon diff --git a/src/app/Scenes/HomeView/Components/ShowsRail.tsx b/src/app/Scenes/HomeView/Components/ShowsRail.tsx index 54d568850d5..7267958f1c8 100644 --- a/src/app/Scenes/HomeView/Components/ShowsRail.tsx +++ b/src/app/Scenes/HomeView/Components/ShowsRail.tsx @@ -57,36 +57,33 @@ export const ShowsRail: React.FC = memo( return ( - - - - - } - ListFooterComponent={() => } - ItemSeparatorComponent={() => } - data={shows.slice(0, NUMBER_OF_SHOWS)} - keyExtractor={(item) => `${item.internalID}`} - renderItem={({ item, index }) => ( - { - if (onTrack) { - return onTrack(item, index) - } - - tracking.trackEvent( - tracks.tappedThumbnail(item.internalID, item.slug || "", index, contextModule) - ) - }} - /> - )} - /> - + + + } + ListFooterComponent={() => } + ItemSeparatorComponent={() => } + data={shows.slice(0, NUMBER_OF_SHOWS)} + keyExtractor={(item) => `${item.internalID}`} + renderItem={({ item, index }) => ( + { + if (onTrack) { + return onTrack(item, index) + } + + tracking.trackEvent( + tracks.tappedThumbnail(item.internalID, item.slug || "", index, contextModule) + ) + }} + /> + )} + /> ) } diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionActivity.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionActivity.tsx index 4637de3aeb6..4cf99e9e0dc 100644 --- a/src/app/Scenes/HomeView/Sections/HomeViewSectionActivity.tsx +++ b/src/app/Scenes/HomeView/Sections/HomeViewSectionActivity.tsx @@ -48,32 +48,28 @@ export const HomeViewSectionActivity: React.FC = ( return null } - const onSectionViewAll = () => { - if (viewAll?.href) { - tracking.tappedActivityGroupViewAll( - section.contextModule as ContextModule, - viewAll?.ownerType as ScreenOwnerType - ) + const href = viewAll?.href || "/notifications" - navigate(viewAll.href) - } else { - tracking.tappedActivityGroupViewAll( - section.contextModule as ContextModule, - OwnerType.activities - ) + const onHeaderPress = () => { + tracking.tappedActivityGroupViewAll( + section.contextModule as ContextModule, + (viewAll?.ownerType || OwnerType.activities) as ScreenOwnerType + ) + } - navigate("/notifications") - } + const onSectionViewAll = () => { + tracking.tappedActivityGroupViewAll( + section.contextModule as ContextModule, + (viewAll?.ownerType || OwnerType.activities) as ScreenOwnerType + ) + + navigate(href) } return ( - + = ( return null } - const onSectionViewAll = () => { + const handleTitlePress = () => { if (viewAll?.href) { tracking.tappedArticleGroupViewAll( section.contextModule as ContextModule, viewAll?.ownerType as ScreenOwnerType ) - - navigate(viewAll.href) } } return ( - { + onTitlePress={handleTitlePress} + onPress={(article, index) => { tracking.tappedArticleGroup( article.internalID, article.slug, @@ -57,7 +53,8 @@ export const HomeViewSectionArticles: React.FC = ( index ) }} - onSectionTitlePress={viewAll ? onSectionViewAll : undefined} + title={section.component?.title ?? ""} + titleHref={viewAll?.href} /> { + const onViewAllPress = () => { if (viewAll?.href) { tracking.tappedArticleGroupViewAll( section.contextModule as ContextModule, @@ -89,7 +89,7 @@ export const HomeViewSectionArticlesCards: React.FC ))} {!!viewAll && ( - + {viewAll.buttonText} diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionArtists.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionArtists.tsx index 31129c43649..e89a67f998f 100644 --- a/src/app/Scenes/HomeView/Sections/HomeViewSectionArtists.tsx +++ b/src/app/Scenes/HomeView/Sections/HomeViewSectionArtists.tsx @@ -26,7 +26,6 @@ import { HORIZONTAL_FLATLIST_WINDOW_SIZE, } from "app/Scenes/HomeView/helpers/constants" import { useHomeViewTracking } from "app/Scenes/HomeView/hooks/useHomeViewTracking" -import { navigate } from "app/system/navigation/navigate" import { extractNodes } from "app/utils/extractNodes" import { NoFallback, withSuspense } from "app/utils/hooks/withSuspense" import { useMemoizedRandom } from "app/utils/placeholders" @@ -83,8 +82,6 @@ export const HomeViewSectionArtists: React.FC = ({ section.contextModule as ContextModule, viewAll?.ownerType as ScreenOwnerType ) - - navigate(viewAll.href) } } @@ -92,6 +89,7 @@ export const HomeViewSectionArtists: React.FC = ({ diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionArtworks.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionArtworks.tsx index 78785ad91be..62362db2ca9 100644 --- a/src/app/Scenes/HomeView/Sections/HomeViewSectionArtworks.tsx +++ b/src/app/Scenes/HomeView/Sections/HomeViewSectionArtworks.tsx @@ -19,6 +19,7 @@ import { import { SectionTitle } from "app/Components/SectionTitle" import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel" import { SectionSharedProps } from "app/Scenes/HomeView/Sections/Section" +import { getHomeViewSectionHref } from "app/Scenes/HomeView/helpers/getHomeViewSectionHref" import { useHomeViewTracking } from "app/Scenes/HomeView/hooks/useHomeViewTracking" import { navigate } from "app/system/navigation/navigate" import { extractNodes } from "app/utils/extractNodes" @@ -61,42 +62,39 @@ export const HomeViewSectionArtworks: React.FC = ( ) } + const href = getHomeViewSectionHref(viewAll?.href, section) + const onSectionViewAll = () => { - if (viewAll?.href) { - tracking.tappedArtworkGroupViewAll( - section.contextModule as ContextModule, - viewAll?.ownerType as ScreenOwnerType - ) + tracking.tappedArtworkGroupViewAll( + section.contextModule as ContextModule, + (viewAll?.ownerType || section.ownerType) as ScreenOwnerType + ) + } - navigate(viewAll.href) - } else { - tracking.tappedArtworkGroupViewAll( - section.contextModule as ContextModule, - section.ownerType as ScreenOwnerType - ) + const onMorePress = () => { + tracking.tappedArtworkGroupViewAll( + section.contextModule as ContextModule, + (viewAll?.ownerType || section.ownerType) as ScreenOwnerType + ) - navigate(`/home-view/sections/${section.internalID}`, { - passProps: { - sectionType: section.__typename, - }, - }) - } + navigate(href) } return ( - - - + + { - if (viewAll?.href) { + const href = viewAll?.href || "/auction-results-for-artists-you-follow" + + const onHeaderPress = () => { + if (href) { tracking.tappedAuctionResultGroupViewAll( section.contextModule as ContextModule, viewAll?.ownerType as ScreenOwnerType ) + } + } - navigate(viewAll.href) - } else { - // TODO: This default view all behavior navigates to the existing Auction - // "Results From Artists You Follow" screen. This should eventually be - // updated to navigate to a HomeViewSectionAuctionResults screen and we can - // use the `component > behaviors > viewAll > ownerType` value. + const onViewAllPress = () => { + if (href) { tracking.tappedAuctionResultGroupViewAll( section.contextModule as ContextModule, - OwnerType.auctionResultsForArtistsYouFollow + (viewAll?.ownerType || OwnerType.auctionResultsForArtistsYouFollow) as ScreenOwnerType ) - navigate("/auction-results-for-artists-you-follow") + navigate(href) } } return ( - - - + + item.internalID} ListFooterComponent={ viewAll ? ( - + ) : undefined } /> diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionCardsChips.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionCardsChips.tsx index 0fc1060f317..6283ddd00b3 100644 --- a/src/app/Scenes/HomeView/Sections/HomeViewSectionCardsChips.tsx +++ b/src/app/Scenes/HomeView/Sections/HomeViewSectionCardsChips.tsx @@ -54,9 +54,7 @@ export const HomeViewSectionCardsChips: React.FC return ( - - - + { return ( - - - + = ({ const viewAll = section.component?.behaviors?.viewAll const fairs = extractNodes(section.fairsConnection) - if (!fairs || fairs.length === 0) return null + const href = getHomeViewSectionHref(viewAll?.href, section) - const onSectionViewAll = () => { - if (viewAll?.href) { - tracking.tappedFairGroupViewAll( - section.contextModule as ContextModule, - viewAll?.ownerType as ScreenOwnerType - ) - - navigate(viewAll.href) - } else { - tracking.tappedFairGroupViewAll( - section.contextModule as ContextModule, - section.ownerType as ScreenOwnerType - ) - - navigate(`/home-view/sections/${section.internalID}`, { - passProps: { - sectionType: section.__typename, - }, - }) - } + const onViewAllPress = () => { + tracking.tappedFairGroupViewAll( + section.contextModule as ContextModule, + (viewAll?.ownerType || section.ownerType) as ScreenOwnerType + ) } + if (!fairs?.length) return null + return ( - - - + data={fairs} diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionFeaturedCollection.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionFeaturedCollection.tsx index 1165a34804b..ca97f9f4c2e 100644 --- a/src/app/Scenes/HomeView/Sections/HomeViewSectionFeaturedCollection.tsx +++ b/src/app/Scenes/HomeView/Sections/HomeViewSectionFeaturedCollection.tsx @@ -20,12 +20,14 @@ import { } from "app/Components/ArtworkRail/ArtworkRailCardImage" import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel" import { SectionSharedProps } from "app/Scenes/HomeView/Sections/Section" +import { getHomeViewSectionHref } from "app/Scenes/HomeView/helpers/getHomeViewSectionHref" import { useHomeViewTracking } from "app/Scenes/HomeView/hooks/useHomeViewTracking" +import { RouterLink } from "app/system/navigation/RouterLink" import { navigate } from "app/system/navigation/navigate" import { extractNodes } from "app/utils/extractNodes" import { NoFallback, withSuspense } from "app/utils/hooks/withSuspense" import { memo } from "react" -import { TouchableOpacity, useWindowDimensions } from "react-native" +import { useWindowDimensions } from "react-native" import { graphql, useFragment, useLazyLoadQuery } from "react-relay" interface HomeViewSectionFeaturedCollectionProps { @@ -47,28 +49,22 @@ export const HomeViewSectionFeaturedCollection: React.FC< if (!component) return null const artworks = extractNodes(section.artworksConnection) - if (!artworks || artworks.length === 0) return null + const href = getHomeViewSectionHref(viewAll?.href, section) - const onSectionViewAll = () => { - if (viewAll?.href) { - tracking.tappedArtworkGroupViewAll( - section.contextModule as ContextModule, - viewAll?.ownerType as ScreenOwnerType - ) + const onHeaderPress = () => { + tracking.tappedArtworkGroupViewAll( + section.contextModule as ContextModule, + (viewAll?.ownerType || section.ownerType) as ScreenOwnerType + ) + } - navigate(viewAll.href) - } else { - tracking.tappedArtworkGroupViewAll( - section.contextModule as ContextModule, - section.ownerType as ScreenOwnerType - ) + const onSectionViewAll = () => { + tracking.tappedArtworkGroupViewAll( + section.contextModule as ContextModule, + (viewAll?.ownerType || section.ownerType) as ScreenOwnerType + ) - navigate(`/home-view/sections/${section.internalID}`, { - passProps: { - sectionType: section.__typename, - }, - }) - } + navigate(href) } const handleOnArtworkPress = (artwork: ArtworkRail_artworks$data[0], index: number) => { @@ -81,10 +77,12 @@ export const HomeViewSectionFeaturedCollection: React.FC< ) } + if (!artworks || artworks.length === 0) return null + return ( - + {!!component.backgroundImageURL && ( - + diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionMarketingCollections.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionMarketingCollections.tsx index ec6587661fb..b269e42c978 100644 --- a/src/app/Scenes/HomeView/Sections/HomeViewSectionMarketingCollections.tsx +++ b/src/app/Scenes/HomeView/Sections/HomeViewSectionMarketingCollections.tsx @@ -31,8 +31,8 @@ import { HORIZONTAL_FLATLIST_INTIAL_NUMBER_TO_RENDER_DEFAULT, HORIZONTAL_FLATLIST_WINDOW_SIZE, } from "app/Scenes/HomeView/helpers/constants" +import { getHomeViewSectionHref } from "app/Scenes/HomeView/helpers/getHomeViewSectionHref" import { useHomeViewTracking } from "app/Scenes/HomeView/hooks/useHomeViewTracking" -import { navigate } from "app/system/navigation/navigate" import { extractNodes } from "app/utils/extractNodes" import { NoFallback, withSuspense } from "app/utils/hooks/withSuspense" import { useMemoizedRandom } from "app/utils/placeholders" @@ -54,39 +54,23 @@ export const HomeViewSectionMarketingCollections: React.FC< const section = useFragment(fragment, sectionProp) const component = section.component - if (!component) return null - const marketingCollections = extractNodes(section.marketingCollectionsConnection) - if (!marketingCollections || marketingCollections.length === 0) return null - const viewAll = section.component.behaviors?.viewAll + const viewAll = component?.behaviors?.viewAll + const href = getHomeViewSectionHref(viewAll?.href, section) const onSectionViewAll = () => { - if (viewAll?.href) { - tracking.tappedMarketingCollectionGroupViewAll( - section.contextModule as ContextModule, - viewAll?.ownerType as ScreenOwnerType - ) - - navigate(viewAll.href) - } else { - tracking.tappedMarketingCollectionGroupViewAll( - section.contextModule as ContextModule, - section.ownerType as ScreenOwnerType - ) - - navigate(`/home-view/sections/${section.internalID}`, { - passProps: { - sectionType: section.__typename, - }, - }) - } + tracking.tappedMarketingCollectionGroupViewAll( + section.contextModule as ContextModule, + (viewAll?.ownerType || section.ownerType) as ScreenOwnerType + ) } + if (!component) return null + if (!marketingCollections || marketingCollections.length === 0) return null + return ( - - - + = ({ const section = useFragment(fragment, sectionProp) const sales = extractNodes(section.salesConnection) - if (sales.length === 0) return null const viewAll = section.component?.behaviors?.viewAll + const href = getHomeViewSectionHref(viewAll?.href, section) - const onSectionViewAll = () => { - if (viewAll?.href) { - tracking.tappedAuctionResultGroupViewAll( - section.contextModule as ContextModule, - viewAll?.ownerType as ScreenOwnerType - ) + const onHeaderPress = () => { + tracking.tappedAuctionResultGroupViewAll( + section.contextModule as ContextModule, + viewAll?.ownerType as ScreenOwnerType + ) + } - navigate(viewAll.href) - } else { - tracking.tappedAuctionResultGroupViewAll( - section.contextModule as ContextModule, - section.ownerType as ScreenOwnerType - ) + const onViewAllPress = () => { + tracking.tappedAuctionResultGroupViewAll( + section.contextModule as ContextModule, + (viewAll?.ownerType || section.ownerType) as ScreenOwnerType + ) - navigate(`/home-view/sections/${section.internalID}`, { - passProps: { - sectionType: section.__typename, - }, - }) - } + navigate(href) } + if (sales.length === 0) return null + return ( - + item?.href} @@ -107,7 +101,7 @@ export const HomeViewSectionSales: React.FC = ({ ListFooterComponent={ viewAll ? ( ) : undefined diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionViewingRooms.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionViewingRooms.tsx index 493aa941197..a650334a4f2 100644 --- a/src/app/Scenes/HomeView/Sections/HomeViewSectionViewingRooms.tsx +++ b/src/app/Scenes/HomeView/Sections/HomeViewSectionViewingRooms.tsx @@ -40,36 +40,20 @@ export const HomeViewSectionViewingRooms: React.FC { - if (viewAll?.href) { - tracking.tappedViewingRoomGroupViewAll( - section.contextModule as ContextModule, - viewAll?.ownerType as ScreenOwnerType - ) - - navigate(viewAll.href) - } else { - tracking.tappedViewingRoomGroupViewAll( - section.contextModule as ContextModule, - section.ownerType as ScreenOwnerType - ) - - navigate(`/home-view/sections/${section.internalID}`, { - passProps: { - sectionType: section.__typename, - }, - }) - } + const onHeaderPress = () => { + tracking.tappedViewingRoomGroupViewAll( + section.contextModule as ContextModule, + viewAll?.ownerType as ScreenOwnerType + ) } + const href = + viewAll?.href || `home-view/sections/${section.internalID}?sectionType=${section.__typename}` + return ( - - - + + }> { diff --git a/src/app/Scenes/HomeView/Sections/__tests__/HomeViewSectionAuctionResults.tests.tsx b/src/app/Scenes/HomeView/Sections/__tests__/HomeViewSectionAuctionResults.tests.tsx index 3119c9ae9ff..d5651ab465f 100644 --- a/src/app/Scenes/HomeView/Sections/__tests__/HomeViewSectionAuctionResults.tests.tsx +++ b/src/app/Scenes/HomeView/Sections/__tests__/HomeViewSectionAuctionResults.tests.tsx @@ -132,39 +132,4 @@ describe("HomeViewSectionAuctionResults", () => { expect(navigate).toHaveBeenCalledWith("/example-href") }) - - it("navigates to default View All implementation when `href` is unspecified and the user taps the 'View All' button", () => { - renderWithRelay({ - HomeViewSectionAuctionResults: () => ({ - internalID: "home-view-section-latest-auction-results", - component: { - title: "Latest Auction Results", - href: "/auction-results-for-artists-you-follow-href", - behaviors: { - viewAll: { - buttonText: "View All", - href: null, - }, - }, - auctionResultsConnection: {}, - }, - }), - }) - - expect(screen.getByText("View All")).toBeOnTheScreen() - fireEvent.press(screen.getByText("View All")) - - expect(mockTrackEvent.mock.calls[0]).toMatchInlineSnapshot(` - [ - { - "action": "tappedAuctionResultGroup", - "context_module": "", - "context_screen_owner_type": "home", - "destination_screen_owner_type": "auctionResultsForArtistsYouFollow", - "type": "viewAll", - }, - ] - `) - expect(navigate).toHaveBeenCalledWith("/auction-results-for-artists-you-follow") - }) }) diff --git a/src/app/Scenes/HomeView/helpers/getHomeViewSectionHref.ts b/src/app/Scenes/HomeView/helpers/getHomeViewSectionHref.ts new file mode 100644 index 00000000000..73e4be87b2b --- /dev/null +++ b/src/app/Scenes/HomeView/helpers/getHomeViewSectionHref.ts @@ -0,0 +1,6 @@ +export const getHomeViewSectionHref = ( + href: string | undefined | null, + section: { internalID: string; __typename: string } +) => { + return href || `home-view/sections/${section.internalID}?sectionType=${section.__typename}` +} diff --git a/src/app/Scenes/HomeViewSectionScreen/HomeViewSectionScreen.tsx b/src/app/Scenes/HomeViewSectionScreen/HomeViewSectionScreen.tsx index 28bb0df0554..fdcf73b2f48 100644 --- a/src/app/Scenes/HomeViewSectionScreen/HomeViewSectionScreen.tsx +++ b/src/app/Scenes/HomeViewSectionScreen/HomeViewSectionScreen.tsx @@ -33,7 +33,7 @@ export const HomeViewSectionScreen: React.FC = ({ sectio ) } -const HOME_SECTION_SCREEN_QUERY = graphql` +export const HOME_SECTION_SCREEN_QUERY = graphql` query HomeViewSectionScreenQuery($id: String!) { homeView { section(id: $id) { @@ -54,14 +54,14 @@ const HOME_SECTION_SCREEN_QUERY = graphql` ` interface HomeViewSectionScreenQueryRendererProps { - sectionID: string + id: string sectionType: string } export const HomeViewSectionScreenQueryRenderer = withSuspense({ Component: (props: HomeViewSectionScreenQueryRendererProps) => { const data = useLazyLoadQuery(HOME_SECTION_SCREEN_QUERY, { - id: props.sectionID, + id: props.id, }) if (!data.homeView.section) { diff --git a/src/app/Scenes/MyAccount/MyAccount.tests.tsx b/src/app/Scenes/MyAccount/MyAccount.tests.tsx index 69484d71040..47b5c41c7a9 100644 --- a/src/app/Scenes/MyAccount/MyAccount.tests.tsx +++ b/src/app/Scenes/MyAccount/MyAccount.tests.tsx @@ -98,7 +98,7 @@ describe(MyAccountQueryRenderer, () => { }) return result }) - expect(extractText(tree.root)).toContain("LINKED ACCOUNTS") + expect(extractText(tree.root)).toContain("Linked Accounts") }) describe("Link Accounts Menu Items", () => { diff --git a/src/app/Scenes/MyAccount/MyAccount.tsx b/src/app/Scenes/MyAccount/MyAccount.tsx index 50acd401024..f070a96a00d 100644 --- a/src/app/Scenes/MyAccount/MyAccount.tsx +++ b/src/app/Scenes/MyAccount/MyAccount.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Flex, Spacer, Text } from "@artsy/palette-mobile" +import { Button, Flex, Spacer, Text } from "@artsy/palette-mobile" import { MyAccountQuery } from "__generated__/MyAccountQuery.graphql" import { MyAccount_me$data } from "__generated__/MyAccount_me.graphql" import { MenuItem } from "app/Components/MenuItem" @@ -98,9 +98,7 @@ const MyAccount: React.FC<{ me: MyAccount_me$data; relay: RelayProp }> = ({ me, {!!me.paddleNumber && } {!!showLinkedAccounts && ( - - - + + {comparableWorks.map((item) => ( = ({ sale }) return ( - - - + + ) diff --git a/src/app/Scenes/Sale/Components/NewBuyNowArtworksRail.tsx b/src/app/Scenes/Sale/Components/NewBuyNowArtworksRail.tsx index ed191202058..6b662c9f304 100644 --- a/src/app/Scenes/Sale/Components/NewBuyNowArtworksRail.tsx +++ b/src/app/Scenes/Sale/Components/NewBuyNowArtworksRail.tsx @@ -19,9 +19,8 @@ export const NewBuyNowArtworksRail: React.FC = ({ sa return ( - - - + + ) diff --git a/src/app/Scenes/Sale/Components/SaleArtworksRail.tsx b/src/app/Scenes/Sale/Components/SaleArtworksRail.tsx index 267ef917f3f..b291e4c27e0 100644 --- a/src/app/Scenes/Sale/Components/SaleArtworksRail.tsx +++ b/src/app/Scenes/Sale/Components/SaleArtworksRail.tsx @@ -23,9 +23,8 @@ export const SaleArtworksRail: React.FC = ({ me }) => { return ( - - - + + + = ({ return ( - - - + { return ( <> + {recentSearches.length ? ( ( diff --git a/src/app/Scenes/Search/TrendingArtists.tsx b/src/app/Scenes/Search/TrendingArtists.tsx index 2c5b287da41..3a336702d61 100644 --- a/src/app/Scenes/Search/TrendingArtists.tsx +++ b/src/app/Scenes/Search/TrendingArtists.tsx @@ -43,9 +43,7 @@ export const TrendingArtists: React.FC = ({ data, ...boxPr return ( - - - + { const queryData = useLazyLoadQuery(viewingRoomsListScreenQuery, { count: PAGE_SIZE, - after: null, }) const { data, isLoadingNext, hasNext, loadNext, refetch } = usePaginationFragment< @@ -104,16 +103,13 @@ export const ViewingRoomsList = () => { <> {featuredLength > 0 && ( <> - - - + + )} - - - + )} data={viewingRooms} diff --git a/src/app/utils/queryPrefetching.ts b/src/app/utils/queryPrefetching.ts index cbcee67511f..374ff90da5d 100644 --- a/src/app/utils/queryPrefetching.ts +++ b/src/app/utils/queryPrefetching.ts @@ -38,19 +38,14 @@ const prefetchRoute = async ( const queries = module.queries if (!queries) { - if (logPrefetching) - console.error(`[queryPrefetching] Cannot not find queries for route ${route}.`) + if (logPrefetching) console.error(`[queryPrefetching] Cannot not find queries for ${route}.`) + return } return queries.map((query, index) => { const allVariables = { ...module.queryVariables?.[index], ...result.params, ...variables } - if (logPrefetching) - console.log("[queryPrefetching] Prefetching:", route, { - variables: JSON.stringify(allVariables), - }) - return prefetchQuery({ query, variables: allVariables, route }) }) } @@ -72,18 +67,14 @@ const prefetchQuery = async ({ force: false, }, }).subscribe({ - start: () => { - if (logPrefetching) { - console.log("[queryPrefetching] Starting prefetch:", route) - } - }, complete: () => { - if (logPrefetching) { - console.log("[queryPrefetching] Completed:", route) - } + if (logPrefetching) + console.log("[queryPrefetching] Completed prefetching", route, { + variables, + }) }, error: () => { - console.error("[queryPrefetching] Error prefetching:", route) + console.error("[queryPrefetching] Error prefetching", route, { variables }) }, }) }