diff --git a/src/app/Components/ArtistListItem.tests.tsx b/src/app/Components/ArtistListItem.tests.tsx index d17a805ec03..1161594d3c6 100644 --- a/src/app/Components/ArtistListItem.tests.tsx +++ b/src/app/Components/ArtistListItem.tests.tsx @@ -1,5 +1,5 @@ -import { Touchable } from "@artsy/palette-mobile" import { ArtistListItemTestsQuery } from "__generated__/ArtistListItemTestsQuery.graphql" +import { RouterLink } from "app/system/navigation/RouterLink" import { renderWithWrappers, renderWithWrappersLEGACY } from "app/utils/tests/renderWithWrappers" import { resolveMostRecentRelayOperation } from "app/utils/tests/resolveMostRecentRelayOperation" import { graphql, QueryRenderer } from "react-relay" @@ -45,13 +45,13 @@ describe("ArtistListItem", () => { it("renders without feedback without throwing an error", () => { const tree = renderWithWrappersLEGACY().root resolveMostRecentRelayOperation(mockEnvironment) - expect(tree.findByType(Touchable).props.noFeedback).toBe(true) + expect(tree.findByType(RouterLink).props.noFeedback).toBe(true) }) it("renders with feedback without throwing an error", () => { const tree = renderWithWrappersLEGACY().root resolveMostRecentRelayOperation(mockEnvironment) - expect(tree.findByType(Touchable).props.noFeedback).toBe(false) + expect(tree.findByType(RouterLink).props.noFeedback).toBe(false) }) it("shows uploaded artworks counts when specified", () => { diff --git a/src/app/Components/ArtistListItem.tsx b/src/app/Components/ArtistListItem.tsx index 2333c6158fe..fa001c83f70 100644 --- a/src/app/Components/ArtistListItem.tsx +++ b/src/app/Components/ArtistListItem.tsx @@ -1,15 +1,7 @@ -import { - AvatarSize, - EntityHeader, - Flex, - FollowButton, - Text, - Touchable, - useColor, -} from "@artsy/palette-mobile" +import { AvatarSize, EntityHeader, Flex, FollowButton, Text, useColor } from "@artsy/palette-mobile" import { ArtistListItemFollowArtistMutation } from "__generated__/ArtistListItemFollowArtistMutation.graphql" import { ArtistListItem_artist$data } from "__generated__/ArtistListItem_artist.graphql" -import { navigate } from "app/system/navigation/navigate" +import { RouterLink } from "app/system/navigation/RouterLink" import { PlaceholderBox, PlaceholderText } from "app/utils/placeholders" import { pluralize } from "app/utils/pluralize" import { Schema } from "app/utils/track" @@ -107,11 +99,6 @@ const ArtistListItem: React.FC = ({ ) } - const handleTap = (href: string) => { - tracks.tapArtistGroup(artist) - navigate(href) - } - let meta if (includeTombstone) { @@ -155,9 +142,12 @@ const ArtistListItem: React.FC = ({ return null } + const navigateOnPress = !disableNavigation && !onPress + return ( - { if (onPress) { onPress() @@ -165,13 +155,13 @@ const ArtistListItem: React.FC = ({ } if (href && !disableNavigation) { - handleTap(href) + tracks.tapArtistGroup(artist) } }} underlayColor={color("black5")} style={containerStyle} > - + = ({ )} - + ) } diff --git a/src/app/Navigation/routes.tsx b/src/app/Navigation/routes.tsx index b69a2927f5d..b3553752db6 100644 --- a/src/app/Navigation/routes.tsx +++ b/src/app/Navigation/routes.tsx @@ -31,8 +31,14 @@ import { defaultArtistVariables, } from "app/Scenes/Artist/Artist" import { ArtistArticlesQueryRenderer } from "app/Scenes/ArtistArticles/ArtistArticles" -import { ArtistSeriesQueryRenderer } from "app/Scenes/ArtistSeries/ArtistSeries" -import { ArtistSeriesFullArtistSeriesListQueryRenderer } from "app/Scenes/ArtistSeries/ArtistSeriesFullArtistSeriesList" +import { + ArtistSeriesQueryRenderer, + ArtistSeriesScreenQuery, +} from "app/Scenes/ArtistSeries/ArtistSeries" +import { + ArtistSeriesFullArtistSeriesListQueryRenderer, + ArtistSeriesFullArtistSeriesListScreenQuery, +} from "app/Scenes/ArtistSeries/ArtistSeriesFullArtistSeriesList" import { ArtistShows2QueryRenderer } from "app/Scenes/ArtistShows/ArtistShows2" import { ArtworkScreen, ArtworkScreenQuery } from "app/Scenes/Artwork/Artwork" import { BrowseSimilarWorksQueryRenderer } from "app/Scenes/Artwork/Components/BrowseSimilarWorks/BrowseSimilarWorks" @@ -40,7 +46,10 @@ import { CertificateOfAuthenticity } from "app/Scenes/Artwork/Components/Certifi import { UnlistedArtworksFAQScreen } from "app/Scenes/Artwork/Components/UnlistedArtworksFAQScreen" import { ArtworkAttributionClassFAQQueryRenderer } from "app/Scenes/ArtworkAttributionClassFAQ/ArtworkAttributionClassFAQ" import { ArtworkListScreen } from "app/Scenes/ArtworkList/ArtworkList" -import { ArtworkMediumQueryRenderer } from "app/Scenes/ArtworkMedium/ArtworkMedium" +import { + ARTWORK_MEDIUM_QUERY, + ArtworkMediumQueryRenderer, +} from "app/Scenes/ArtworkMedium/ArtworkMedium" import { ArtworkRecommendationsScreen } from "app/Scenes/ArtworkRecommendations/ArtworkRecommendations" import { AuctionBuyersPremiumQueryRenderer } from "app/Scenes/AuctionBuyersPremium/AuctionBuyersPremium" import { AuctionResultQueryRenderer } from "app/Scenes/AuctionResult/AuctionResult" @@ -113,7 +122,7 @@ import { NewWorksForYouQueryRenderer } from "app/Scenes/NewWorksForYou/NewWorksF import { NewWorksFromGalleriesYouFollowScreen } from "app/Scenes/NewWorksFromGalleriesYouFollow/NewWorksFromGalleriesYouFollow" import { OrderDetailsQueryRender } from "app/Scenes/OrderHistory/OrderDetails/Components/OrderDetails" import { OrderHistoryQueryRender } from "app/Scenes/OrderHistory/OrderHistory" -import { PartnerQueryRenderer } from "app/Scenes/Partner/Partner" +import { PartnerQueryRenderer, PartnerScreenQuery } from "app/Scenes/Partner/Partner" import { PartnerLocationsQueryRenderer } from "app/Scenes/Partner/Screens/PartnerLocations" import { PartnerOfferContainer } from "app/Scenes/PartnerOffer/PartnerOfferContainer" import { PriceDatabase } from "app/Scenes/PriceDatabase/PriceDatabase" @@ -340,6 +349,7 @@ export const artsyDotNetRoutes = defineRoutes([ headerShown: false, }, }, + queries: [ArtistSeriesScreenQuery], }, { path: "/artist/:artistID", @@ -372,6 +382,7 @@ export const artsyDotNetRoutes = defineRoutes([ headerTitle: "Artist Series", }, }, + queries: [ArtistSeriesFullArtistSeriesListScreenQuery], }, { path: "/artist/:artistID/auction-result/:auctionResultInternalID", @@ -496,6 +507,7 @@ export const artsyDotNetRoutes = defineRoutes([ path: "/artwork/:artworkID/medium", name: "ArtworkMedium", Component: ArtworkMediumQueryRenderer, + queries: [ARTWORK_MEDIUM_QUERY], }, { path: "/artwork/:artworkID/browse-similar-works", @@ -1169,6 +1181,7 @@ export const artsyDotNetRoutes = defineRoutes([ headerShown: false, }, }, + queries: [PartnerScreenQuery], }, { path: "/partner/:partnerID/artists/:artistID", diff --git a/src/app/Scenes/ArtistSeries/ArtistSeries.tsx b/src/app/Scenes/ArtistSeries/ArtistSeries.tsx index 9b662ef57b2..db0e34d78e8 100644 --- a/src/app/Scenes/ArtistSeries/ArtistSeries.tsx +++ b/src/app/Scenes/ArtistSeries/ArtistSeries.tsx @@ -1,13 +1,13 @@ import { - Spacer, + Flex, Screen, - Tabs, - useScreenDimensions, + Separator, Skeleton, SkeletonBox, - Flex, SkeletonText, - Separator, + Spacer, + Tabs, + useScreenDimensions, } from "@artsy/palette-mobile" import { ArtistSeriesQuery } from "__generated__/ArtistSeriesQuery.graphql" import { ArtistSeries_artistSeries$key } from "__generated__/ArtistSeries_artistSeries.graphql" @@ -134,13 +134,7 @@ export const ArtistSeriesQueryRenderer: React.FC<{ artistSeriesID: string }> = ( environment={getRelayEnvironment()} - query={graphql` - query ArtistSeriesQuery($artistSeriesID: ID!) { - artistSeries(id: $artistSeriesID) { - ...ArtistSeries_artistSeries - } - } - `} + query={ArtistSeriesScreenQuery} cacheConfig={{ force: true }} variables={{ artistSeriesID, @@ -153,3 +147,11 @@ export const ArtistSeriesQueryRenderer: React.FC<{ artistSeriesID: string }> = ( ) } + +export const ArtistSeriesScreenQuery = graphql` + query ArtistSeriesQuery($artistSeriesID: ID!) { + artistSeries(id: $artistSeriesID) { + ...ArtistSeries_artistSeries + } + } +` diff --git a/src/app/Scenes/ArtistSeries/ArtistSeriesFullArtistSeriesList.tsx b/src/app/Scenes/ArtistSeries/ArtistSeriesFullArtistSeriesList.tsx index bcdb3898b8c..414ec05daf5 100644 --- a/src/app/Scenes/ArtistSeries/ArtistSeriesFullArtistSeriesList.tsx +++ b/src/app/Scenes/ArtistSeries/ArtistSeriesFullArtistSeriesList.tsx @@ -69,20 +69,21 @@ export const ArtistSeriesFullArtistSeriesListFragmentContainer = createFragmentC } ) +export const ArtistSeriesFullArtistSeriesListScreenQuery = graphql` + query ArtistSeriesFullArtistSeriesListQuery($artistID: String!) { + artist(id: $artistID) { + ...ArtistSeriesFullArtistSeriesList_artist + } + } +` + export const ArtistSeriesFullArtistSeriesListQueryRenderer: React.FC<{ artistID: string }> = ({ artistID, }) => { return ( environment={getRelayEnvironment()} - query={graphql` - query ArtistSeriesFullArtistSeriesListQuery($artistID: String!) { - artist(id: $artistID) { - ...ArtistSeriesFullArtistSeriesList_artist - } - } - `} - cacheConfig={{ force: true }} + query={ArtistSeriesFullArtistSeriesListScreenQuery} variables={{ artistID, }} diff --git a/src/app/Scenes/ArtistSeries/ArtistSeriesMoreSeries.tsx b/src/app/Scenes/ArtistSeries/ArtistSeriesMoreSeries.tsx index ecb90c2fa91..2bf25b86a72 100644 --- a/src/app/Scenes/ArtistSeries/ArtistSeriesMoreSeries.tsx +++ b/src/app/Scenes/ArtistSeries/ArtistSeriesMoreSeries.tsx @@ -2,9 +2,8 @@ import { ActionType, ContextModule, OwnerType, ScreenOwnerType } from "@artsy/co import { Flex, FlexProps, Text, TextProps } from "@artsy/palette-mobile" import { ArtistSeriesMoreSeries_artist$data } from "__generated__/ArtistSeriesMoreSeries_artist.graphql" import { ArtistSeriesListItem } from "app/Scenes/ArtistSeries/ArtistSeriesListItem" -import { navigate } from "app/system/navigation/navigate" +import { RouterLink } from "app/system/navigation/RouterLink" import React, { useEffect, useState } from "react" -import { TouchableOpacity } from "react-native" import { createFragmentContainer, graphql } from "react-relay" import { useTracking } from "react-tracking" @@ -59,16 +58,16 @@ export const ArtistSeriesMoreSeries: React.FC = ({ {artistSeriesHeader} {totalCount > 4 && ( - { if (artist.internalID) { trackEvent(tracks.tapViewAllArtistSeries(artist?.internalID, artist?.slug)) - navigate(`/artist/${artist?.internalID}/artist-series`) } }} > {`View All (${totalCount})`} - + )} {artistSeries.map((item, index) => { diff --git a/src/app/Scenes/Artwork/Components/ArtworkDetails.tsx b/src/app/Scenes/Artwork/Components/ArtworkDetails.tsx index e96e3bc9db1..abafb0b95d0 100644 --- a/src/app/Scenes/Artwork/Components/ArtworkDetails.tsx +++ b/src/app/Scenes/Artwork/Components/ArtworkDetails.tsx @@ -1,9 +1,8 @@ -import { Spacer, Flex, Box, Text, Join } from "@artsy/palette-mobile" +import { Box, Flex, Join, Spacer, Text } from "@artsy/palette-mobile" import { ArtworkDetails_artwork$key } from "__generated__/ArtworkDetails_artwork.graphql" -import { navigate } from "app/system/navigation/navigate" +import { RouterLink } from "app/system/navigation/RouterLink" import { Schema } from "app/utils/track" import React from "react" -import { TouchableWithoutFeedback } from "react-native" import { graphql, useFragment } from "react-relay" import { useTracking } from "react-tracking" import { ArtworkDetailsRow } from "./ArtworkDetailsRow" @@ -27,11 +26,11 @@ export const ArtworkDetails: React.FC = ({ { title: "Medium", value: artworkData?.mediumType?.name && ( - navigate(`/artwork/${artworkData.slug}/medium`)}> + {artworkData?.mediumType?.name} - + ), }, { diff --git a/src/app/Scenes/Artwork/Components/ArtworkMakerTitle.tsx b/src/app/Scenes/Artwork/Components/ArtworkMakerTitle.tsx index 4eda8d0f324..6b56e30dda9 100644 --- a/src/app/Scenes/Artwork/Components/ArtworkMakerTitle.tsx +++ b/src/app/Scenes/Artwork/Components/ArtworkMakerTitle.tsx @@ -1,6 +1,6 @@ import { Flex, Text } from "@artsy/palette-mobile" import { ArtworkMakerTitle_artwork$data } from "__generated__/ArtworkMakerTitle_artwork.graphql" -import { navigate } from "app/system/navigation/navigate" +import { RouterLink } from "app/system/navigation/RouterLink" import { Schema } from "app/utils/track" import React, { useState } from "react" import { TouchableWithoutFeedback } from "react-native" @@ -15,26 +15,26 @@ interface ArtworkMakerProps { const ArtworkMaker: React.FC = ({ artistName, href }) => { const { trackEvent } = useTracking() - const handleArtistTap = (artistHref?: string | null) => { - if (artistHref) { + const handleArtistTap = () => { + if (href) { trackEvent({ action_name: Schema.ActionNames.ArtistName, action_type: Schema.ActionTypes.Tap, context_module: Schema.ContextModules.ArtworkTombstone, }) - navigate(artistHref) } } return ( - handleArtistTap(href)} + to={href} + onPress={handleArtistTap} > {artistName} - + ) } diff --git a/src/app/Scenes/Artwork/Components/ArtworksInSeriesRail.tsx b/src/app/Scenes/Artwork/Components/ArtworksInSeriesRail.tsx index 0eec30a8cf1..ddf9397a323 100644 --- a/src/app/Scenes/Artwork/Components/ArtworksInSeriesRail.tsx +++ b/src/app/Scenes/Artwork/Components/ArtworksInSeriesRail.tsx @@ -6,7 +6,6 @@ import { } from "__generated__/ArtworksInSeriesRail_artwork.graphql" import { ArtworkRail } from "app/Components/ArtworkRail/ArtworkRail" import { SectionTitle } from "app/Components/SectionTitle" -import { navigate } from "app/system/navigation/navigate" import { extractNodes } from "app/utils/extractNodes" import { CollectorSignals, @@ -39,8 +38,8 @@ export const ArtworksInSeriesRail: React.FC = (props) titleVariant="md" onPress={() => { trackEvent(tracks.tappedHeader(artwork, firstArtistSeries)) - navigate(`/artist-series/${firstArtistSeries?.slug}`) }} + href={`/artist-series/${firstArtistSeries?.slug}`} /> = ({ artwork: { context } } - { - if (context.href) { - navigate(context.href) - } - }} - > + {!!imageUrl && ( @@ -42,7 +35,7 @@ export const ContextCard: React.FC = ({ artwork: { context } } {context.formattedStartDateTime} - + ) diff --git a/src/app/Scenes/Artwork/Components/OtherWorks/ContextGridCTA.tsx b/src/app/Scenes/Artwork/Components/OtherWorks/ContextGridCTA.tsx index 1464ce3ab78..8a4647e0582 100644 --- a/src/app/Scenes/Artwork/Components/OtherWorks/ContextGridCTA.tsx +++ b/src/app/Scenes/Artwork/Components/OtherWorks/ContextGridCTA.tsx @@ -1,8 +1,7 @@ import { ArrowRightIcon, Flex, Text } from "@artsy/palette-mobile" -import { navigate } from "app/system/navigation/navigate" +import { RouterLink } from "app/system/navigation/RouterLink" import { Schema, track } from "app/utils/track" import React from "react" -import { TouchableWithoutFeedback } from "react-native" interface ContextGridCTAProps { href?: string @@ -18,21 +17,12 @@ export class ContextGridCTA extends React.Component { flow: Schema.Flow.RecommendedArtworks, context_module: props.contextModule, })) - openLink() { - const { href } = this.props - // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏 - navigate(href) - } - render() { const { href, label } = this.props if (href && label) { return ( - this.openLink()} - accessibilityLabel="Context Grid CTA" - > + {label} @@ -41,7 +31,7 @@ export class ContextGridCTA extends React.Component { - + ) } else { return null diff --git a/src/app/Scenes/Artwork/Components/PartnerCard.tsx b/src/app/Scenes/Artwork/Components/PartnerCard.tsx index cfc224af40c..af93e828125 100644 --- a/src/app/Scenes/Artwork/Components/PartnerCard.tsx +++ b/src/app/Scenes/Artwork/Components/PartnerCard.tsx @@ -1,13 +1,13 @@ -import { Spacer, Flex, Text, EntityHeader } from "@artsy/palette-mobile" +import { EntityHeader, Flex, Spacer, Text } from "@artsy/palette-mobile" import { MyProfileEditModal_me$key } from "__generated__/MyProfileEditModal_me.graphql" import { PartnerCard_artwork$data } from "__generated__/PartnerCard_artwork.graphql" import { useSendInquiry_me$key } from "__generated__/useSendInquiry_me.graphql" import { ShortContactGallery } from "app/Scenes/Artwork/Components/ShortContactGallery" -import { navigateToPartner } from "app/system/navigation/navigate" +import { RouterLink } from "app/system/navigation/RouterLink" +import { PartnerNavigationProps } from "app/system/navigation/navigate" import { limitWithCount } from "app/utils/limitWithCount" import { compact } from "lodash" import React from "react" -import { TouchableWithoutFeedback } from "react-native" import { createFragmentContainer, graphql, RelayProp } from "react-relay" import { Questions } from "./Questions" @@ -25,8 +25,6 @@ export const PartnerCard: React.FC = ({ shouldShowQuestions, showShortContactGallery, }) => { - const handleTap = (href: string) => navigateToPartner(href) - const partner = artwork.partner const galleryOrBenefitAuction = artwork.sale?.isBenefit ?? artwork.sale?.isGalleryAuction @@ -74,21 +72,17 @@ export const PartnerCard: React.FC = ({ )} - { - if (partner.href) { - handleTap(partner.href) - } - }} - > + - + + + {!!shouldShowQuestions && } ) diff --git a/src/app/Scenes/Artwork/Components/ShortContactGallery.tsx b/src/app/Scenes/Artwork/Components/ShortContactGallery.tsx index 8c4ed5014e6..da86fbec12f 100644 --- a/src/app/Scenes/Artwork/Components/ShortContactGallery.tsx +++ b/src/app/Scenes/Artwork/Components/ShortContactGallery.tsx @@ -2,8 +2,8 @@ import { EntityHeader, EnvelopeIcon, Flex } from "@artsy/palette-mobile" import { MyProfileEditModal_me$key } from "__generated__/MyProfileEditModal_me.graphql" import { ShortContactGallery_artwork$key } from "__generated__/ShortContactGallery_artwork.graphql" import { useSendInquiry_me$key } from "__generated__/useSendInquiry_me.graphql" -import { navigateToPartner } from "app/system/navigation/navigate" -import { TouchableWithoutFeedback } from "react-native" +import { RouterLink } from "app/system/navigation/RouterLink" +import { PartnerNavigationProps } from "app/system/navigation/navigate" import { graphql, useFragment } from "react-relay" import { ContactGalleryButton } from "./CommercialButtons/ContactGalleryButton" @@ -21,19 +21,13 @@ export const ShortContactGallery: React.FC = (props) = return ( - { - if (props.partnerHref) { - navigateToPartner(props.partnerHref) - } - }} - > + - + = ({ partnerID, ...others }) => { - const { loading } = useClientQuery({ - environment: getRelayEnvironment(), - query: graphql` - query PartnerInitialQuery($partnerID: String!) { - partner(id: $partnerID) @principalField { - displayArtistsSection - } - } - `, - variables: { partnerID }, - }) - - if (loading) { - return - } - return ( environment={getRelayEnvironment()} - query={graphql` - query PartnerQuery($partnerID: String!) { - partner(id: $partnerID) { - ...Partner_partner - } - } - `} + query={PartnerScreenQuery} variables={{ partnerID, }} @@ -173,6 +149,14 @@ export const PartnerQueryRenderer: React.FC<{ ) } +export const PartnerScreenQuery = graphql` + query PartnerQuery($partnerID: String!) { + partner(id: $partnerID) { + ...Partner_partner + } + } +` + export const PartnerSkeleton: React.FC = () => { return ( diff --git a/src/app/system/navigation/navigate.ts b/src/app/system/navigation/navigate.ts index ff2126fc6d1..af591bfe5e9 100644 --- a/src/app/system/navigation/navigate.ts +++ b/src/app/system/navigation/navigate.ts @@ -151,9 +151,11 @@ export enum SlugType { FairID = "fairID", } +export const PartnerNavigationProps = { entity: EntityType.Partner, slugType: SlugType.ProfileID } + export function navigateToPartner(href: string) { navigate(href, { - passProps: { entity: EntityType.Partner, slugType: SlugType.ProfileID }, + passProps: PartnerNavigationProps, }) }