From 9af6a811677b7e7d1252ecdf47961be301e04de6 Mon Sep 17 00:00:00 2001 From: Christopher Pappas Date: Fri, 14 Aug 2020 14:43:18 -0700 Subject: [PATCH 1/3] [Lib] Add relay-hooks --- package.json | 1 + .../Artist/Components/ArtistConsignButton.tsx | 79 ++++++++++--------- .../__stories__/ArtistConsignButton.story.tsx | 14 ++-- .../__tests__/ArtistConsignButton.jest.tsx | 4 +- src/v2/Apps/Artist/Routes/Overview/index.tsx | 2 +- src/v2/Artsy/Router/Boot.tsx | 45 ++++++----- src/v2/Artsy/Router/__tests__/Boot.jest.tsx | 6 ++ yarn.lock | 16 ++++ 8 files changed, 99 insertions(+), 68 deletions(-) diff --git a/package.json b/package.json index ee46a7a11a9..52e4b1a42bf 100644 --- a/package.json +++ b/package.json @@ -183,6 +183,7 @@ "redux-mock-store": "1.2.3", "redux-thunk": "2.2.0", "referer-parser": "0.0.3", + "relay-hooks": "^3.5.2", "relay-mock-network-layer": "2.0.0", "relay-runtime": "9.1.0", "require-control": "2.1.1", diff --git a/src/v2/Apps/Artist/Components/ArtistConsignButton.tsx b/src/v2/Apps/Artist/Components/ArtistConsignButton.tsx index 5f3d034d060..ef63cd952fd 100644 --- a/src/v2/Apps/Artist/Components/ArtistConsignButton.tsx +++ b/src/v2/Apps/Artist/Components/ArtistConsignButton.tsx @@ -1,7 +1,10 @@ import React from "react" -import { createFragmentContainer, graphql } from "react-relay" +import { graphql } from "react-relay" -import { ArtistConsignButton_artist } from "v2/__generated__/ArtistConsignButton_artist.graphql" +import { + ArtistConsignButton_artist, + ArtistConsignButton_artist$key, +} from "v2/__generated__/ArtistConsignButton_artist.graphql" import { RouterLink } from "v2/Artsy/Router/RouterLink" import { Media } from "v2/Utils/Responsive" @@ -15,14 +18,33 @@ import { color, } from "@artsy/palette" import { AnalyticsSchema, useTracking } from "v2/Artsy" +import { useFragment } from "relay-hooks" + +const ArtistConsignButtonFragment = graphql` + fragment ArtistConsignButton_artist on Artist { + targetSupply { + isInMicrofunnel + isTargetSupply + } + + internalID + slug + name + href + image { + cropped(width: 66, height: 66) { + url + } + } + } +` export interface ArtistConsignButtonProps { - artist: ArtistConsignButton_artist + artist: ArtistConsignButton_artist$key } -export const ArtistConsignButton: React.FC = ({ - artist, -}) => { +export const ArtistConsignButton: React.FC = props => { + const artist = useFragment(ArtistConsignButtonFragment, props.artist) const tracking = useTracking() const trackGetStartedClick = ({ destinationPath }) => { @@ -38,15 +60,18 @@ export const ArtistConsignButton: React.FC = ({ }) } - const props = { artist, trackGetStartedClick } + const passedProps = { + artist, + trackGetStartedClick, + } return ( <> - + - + ) @@ -56,9 +81,11 @@ interface Tracking { trackGetStartedClick: (props: { destinationPath: string }) => void } -export const ArtistConsignButtonLarge: React.FC< - ArtistConsignButtonProps & Tracking -> = props => { +interface Props extends Tracking { + artist: ArtistConsignButton_artist +} + +export const ArtistConsignButtonLarge: React.FC = props => { const { showImage, imageURL, headline, consignURL } = getData(props) return ( @@ -105,9 +132,7 @@ export const ArtistConsignButtonLarge: React.FC< ) } -export const ArtistConsignButtonSmall: React.FC< - ArtistConsignButtonProps & Tracking -> = props => { +export const ArtistConsignButtonSmall: React.FC = props => { const { showImage, imageURL, headline, consignURL } = getData(props) return ( @@ -169,27 +194,3 @@ function getData(props) { consignURL, } } - -export const ArtistConsignButtonFragmentContainer = createFragmentContainer( - ArtistConsignButton, - { - artist: graphql` - fragment ArtistConsignButton_artist on Artist { - targetSupply { - isInMicrofunnel - isTargetSupply - } - - internalID - slug - name - href - image { - cropped(width: 66, height: 66) { - url - } - } - } - `, - } -) diff --git a/src/v2/Apps/Artist/Components/__stories__/ArtistConsignButton.story.tsx b/src/v2/Apps/Artist/Components/__stories__/ArtistConsignButton.story.tsx index 7b6812966bd..01bb34be7ca 100644 --- a/src/v2/Apps/Artist/Components/__stories__/ArtistConsignButton.story.tsx +++ b/src/v2/Apps/Artist/Components/__stories__/ArtistConsignButton.story.tsx @@ -7,17 +7,17 @@ import { useSystemContext } from "v2/Artsy" import { renderWithLoadProgress } from "v2/Artsy/Relay/renderWithLoadProgress" import { - ArtistConsignButtonFragmentContainer, + ArtistConsignButton, ArtistConsignButtonLarge, ArtistConsignButtonProps, ArtistConsignButtonSmall, } from "v2/Apps/Artist/Components/ArtistConsignButton" -export const ArtistConsignButtonQueryRenderer: React.FC & { - artistID: string -}> = ({ artistID }) => { +export const ArtistConsignButtonQueryRenderer: React.FC< + Partial & { + artistID: string + } +> = ({ artistID }) => { const { relayEnvironment } = useSystemContext() return ( @@ -32,7 +32,7 @@ export const ArtistConsignButtonQueryRenderer: React.FC ) } diff --git a/src/v2/Apps/Artist/Components/__tests__/ArtistConsignButton.jest.tsx b/src/v2/Apps/Artist/Components/__tests__/ArtistConsignButton.jest.tsx index 753d6560e35..7d3efe284f0 100644 --- a/src/v2/Apps/Artist/Components/__tests__/ArtistConsignButton.jest.tsx +++ b/src/v2/Apps/Artist/Components/__tests__/ArtistConsignButton.jest.tsx @@ -5,7 +5,7 @@ import { MockBoot, renderRelayTree } from "v2/DevTools" import { cloneDeep } from "lodash" import React from "react" import { graphql } from "react-relay" -import { ArtistConsignButtonFragmentContainer } from "../ArtistConsignButton" +import { ArtistConsignButton } from "../ArtistConsignButton" jest.unmock("react-relay") jest.mock("v2/Artsy/Analytics/useTracking") @@ -24,7 +24,7 @@ describe("ArtistConsignButton", () => { Component: ({ artist }) => { return ( - + ) }, diff --git a/src/v2/Apps/Artist/Routes/Overview/index.tsx b/src/v2/Apps/Artist/Routes/Overview/index.tsx index 9bcb2f9731c..17e1f023be8 100644 --- a/src/v2/Apps/Artist/Routes/Overview/index.tsx +++ b/src/v2/Apps/Artist/Routes/Overview/index.tsx @@ -24,7 +24,7 @@ import { ArtistBioFragmentContainer as ArtistBio } from "v2/Components/ArtistBio import { Carousel } from "v2/Components/Carousel" import { SelectedCareerAchievementsFragmentContainer as SelectedCareerAchievements } from "v2/Components/SelectedCareerAchievements" -import { ArtistConsignButtonFragmentContainer as ArtistConsignButton } from "v2/Apps/Artist/Components/ArtistConsignButton" +import { ArtistConsignButton } from "v2/Apps/Artist/Components/ArtistConsignButton" import { StyledLink } from "v2/Apps/Artist/Components/StyledLink" import { WorksForSaleRailQueryRenderer as WorksForSaleRail } from "v2/Apps/Artist/Routes/Overview/Components/WorksForSaleRail" import { pMedia } from "v2/Components/Helpers" diff --git a/src/v2/Artsy/Router/Boot.tsx b/src/v2/Artsy/Router/Boot.tsx index 81cda748301..fa70da6f033 100644 --- a/src/v2/Artsy/Router/Boot.tsx +++ b/src/v2/Artsy/Router/Boot.tsx @@ -12,6 +12,7 @@ import Events from "v2/Utils/Events" import { getENV } from "v2/Utils/getENV" import { ErrorBoundary } from "./ErrorBoundary" import { FocusVisible } from "v2/Components/FocusVisible" +import { RelayEnvironmentProvider } from "relay-hooks" import { MatchingMediaQueries, @@ -63,27 +64,33 @@ export const Boot = track(null, { - - - - - - - - {children} - {process.env.NODE_ENV === "development" && ( - - )} - - - - - + + + + + + + + + {children} + {process.env.NODE_ENV === "development" && ( + + )} + + + + + + ) }) + +// TODO: PR display name change upstream. Added for tests +// @ts-ignore +RelayEnvironmentProvider.displayName = "RelayEnvironmentProvider" diff --git a/src/v2/Artsy/Router/__tests__/Boot.jest.tsx b/src/v2/Artsy/Router/__tests__/Boot.jest.tsx index 404d8ded77a..323c5263008 100644 --- a/src/v2/Artsy/Router/__tests__/Boot.jest.tsx +++ b/src/v2/Artsy/Router/__tests__/Boot.jest.tsx @@ -55,4 +55,10 @@ describe("Boot", () => { it("injects Grid", () => { expect(mount().find("Grid").length).toEqual(1) }) + + it("injects RelayEnvironmentProvider", () => { + expect( + mount().find("RelayEnvironmentProvider").length + ).toEqual(1) + }) }) diff --git a/yarn.lock b/yarn.lock index 6dbe16834d3..5cd6e88679c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3011,6 +3011,14 @@ resolved "https://registry.yarnpkg.com/@restart/context/-/context-2.1.4.tgz#a99d87c299a34c28bd85bb489cb07bfd23149c02" integrity sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q== +"@restart/hooks@^0.3.1": + version "0.3.25" + resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.25.tgz#11004139ad1c70d2f5965a8939dcb5aeb96aa652" + integrity sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w== + dependencies: + lodash "^4.17.15" + lodash-es "^4.17.15" + "@samverschueren/stream-to-observable@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f" @@ -18942,6 +18950,14 @@ relay-config@9.1.0: dependencies: cosmiconfig "^5.0.5" +relay-hooks@^3.5.2: + version "3.5.2" + resolved "https://registry.yarnpkg.com/relay-hooks/-/relay-hooks-3.5.2.tgz#98035099988e8f87a3369f3a8a4531068d59bafe" + integrity sha512-zqtSajxbNCLRQV9t5mBu1LcLbVjTpdNhhxzCWPVtWYvwiXFgx/8tuC3hFYP8EF7l3ogwlqt5rcswK6xmONC81Q== + dependencies: + "@restart/hooks" "^0.3.1" + fbjs "^1.0.0" + relay-mock-network-layer@2.0.0, relay-mock-network-layer@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/relay-mock-network-layer/-/relay-mock-network-layer-2.0.0.tgz#70cad7c11f76822980196486a42258f68e5c7910" From c69fca75d6970f259fc0777c27a288d3aced93a1 Mon Sep 17 00:00:00 2001 From: Christopher Pappas Date: Fri, 14 Aug 2020 17:49:58 -0700 Subject: [PATCH 2/3] Fix tests --- src/v2/Artsy/Router/Boot.tsx | 42 ++++++++++++++++++------------------ src/v2/DevTools/MockBoot.tsx | 31 +++++++++++++++----------- 2 files changed, 39 insertions(+), 34 deletions(-) diff --git a/src/v2/Artsy/Router/Boot.tsx b/src/v2/Artsy/Router/Boot.tsx index fa70da6f033..5e301837806 100644 --- a/src/v2/Artsy/Router/Boot.tsx +++ b/src/v2/Artsy/Router/Boot.tsx @@ -64,27 +64,27 @@ export const Boot = track(null, { - - - - - - - - - {children} - {process.env.NODE_ENV === "development" && ( - - )} - - - - - - + {/* */} + + + + + + + + {children} + {process.env.NODE_ENV === "development" && ( + + )} + + + + + + {/* */} diff --git a/src/v2/DevTools/MockBoot.tsx b/src/v2/DevTools/MockBoot.tsx index d2c1fc9eae2..2a7ec50d16c 100644 --- a/src/v2/DevTools/MockBoot.tsx +++ b/src/v2/DevTools/MockBoot.tsx @@ -1,6 +1,7 @@ import { Boot } from "v2/Artsy/Router" import React from "react" import { Breakpoint } from "v2/Utils/Responsive" +import { Environment, Network, RecordSource, Store } from "relay-runtime" export const MockBoot: React.SFC<{ breakpoint?: Breakpoint @@ -14,16 +15,20 @@ export const MockBoot: React.SFC<{ user = null, context = null, }) => { - return ( - - {children} - - ) - } + const mockRelayEnvironment = new Environment({ + network: Network.create(x => x as any), + store: new Store(new RecordSource()), + }) + return ( + + {children} + + ) +} From 3562535c5c5a691ec49dc054893a006d0888a765 Mon Sep 17 00:00:00 2001 From: Christopher Pappas Date: Sun, 16 Aug 2020 11:50:57 -0700 Subject: [PATCH 3/3] wip --- package.json | 2 +- .../Routes/Overview/__tests__/index.jest.tsx | 9 ++-- src/v2/Artsy/Router/Boot.tsx | 42 +++++++++---------- src/v2/DevTools/MockBoot.tsx | 14 ++++--- yarn.lock | 8 ++-- 5 files changed, 40 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index 52e4b1a42bf..b32236c0c3d 100644 --- a/package.json +++ b/package.json @@ -183,7 +183,7 @@ "redux-mock-store": "1.2.3", "redux-thunk": "2.2.0", "referer-parser": "0.0.3", - "relay-hooks": "^3.5.2", + "relay-hooks": "3.5.1", "relay-mock-network-layer": "2.0.0", "relay-runtime": "9.1.0", "require-control": "2.1.1", diff --git a/src/v2/Apps/Artist/Routes/Overview/__tests__/index.jest.tsx b/src/v2/Apps/Artist/Routes/Overview/__tests__/index.jest.tsx index 33eed2a1754..5dbcb92a6c2 100644 --- a/src/v2/Apps/Artist/Routes/Overview/__tests__/index.jest.tsx +++ b/src/v2/Apps/Artist/Routes/Overview/__tests__/index.jest.tsx @@ -8,6 +8,7 @@ import React from "react" import { ArtistRecommendationsQueryRenderer as ArtistRecommendations } from "../Components/ArtistRecommendations" import { ArtistTopWorksRailFragmentContainer as ArtistTopWorksRail } from "v2/Apps/Artist/Components/ArtistTopWorksRail/ArtistTopWorksRail" import { FeaturedArticlesItem, OverviewRoute } from "../index" +import { MockBoot } from "v2/DevTools" jest.mock("v2/Artsy/Analytics/useTracking") @@ -15,9 +16,11 @@ describe("OverviewRoute", () => { function getWrapper(artistData, user: User = {}) { return mount( - - - + + + + + ) } diff --git a/src/v2/Artsy/Router/Boot.tsx b/src/v2/Artsy/Router/Boot.tsx index 5e301837806..fa70da6f033 100644 --- a/src/v2/Artsy/Router/Boot.tsx +++ b/src/v2/Artsy/Router/Boot.tsx @@ -64,27 +64,27 @@ export const Boot = track(null, { - {/* */} - - - - - - - - {children} - {process.env.NODE_ENV === "development" && ( - - )} - - - - - - {/* */} + + + + + + + + + {children} + {process.env.NODE_ENV === "development" && ( + + )} + + + + + + diff --git a/src/v2/DevTools/MockBoot.tsx b/src/v2/DevTools/MockBoot.tsx index 2a7ec50d16c..74e6257189e 100644 --- a/src/v2/DevTools/MockBoot.tsx +++ b/src/v2/DevTools/MockBoot.tsx @@ -1,7 +1,8 @@ import { Boot } from "v2/Artsy/Router" import React from "react" import { Breakpoint } from "v2/Utils/Responsive" -import { Environment, Network, RecordSource, Store } from "relay-runtime" +// import { Environment, Network, RecordSource, Store } from "relay-runtime" +import { createRelaySSREnvironment } from "v2/Artsy/Relay/createRelaySSREnvironment" export const MockBoot: React.SFC<{ breakpoint?: Breakpoint @@ -15,17 +16,18 @@ export const MockBoot: React.SFC<{ user = null, context = null, }) => { - const mockRelayEnvironment = new Environment({ - network: Network.create(x => x as any), - store: new Store(new RecordSource()), - }) + // const mockRelayEnvironment = new Environment({ + // network: Network.create(x => x as any), + // store: new Store(new RecordSource()), + // }) + const environment = createRelaySSREnvironment() return ( {children} diff --git a/yarn.lock b/yarn.lock index 5cd6e88679c..62104bfa4d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18950,10 +18950,10 @@ relay-config@9.1.0: dependencies: cosmiconfig "^5.0.5" -relay-hooks@^3.5.2: - version "3.5.2" - resolved "https://registry.yarnpkg.com/relay-hooks/-/relay-hooks-3.5.2.tgz#98035099988e8f87a3369f3a8a4531068d59bafe" - integrity sha512-zqtSajxbNCLRQV9t5mBu1LcLbVjTpdNhhxzCWPVtWYvwiXFgx/8tuC3hFYP8EF7l3ogwlqt5rcswK6xmONC81Q== +relay-hooks@3.5.1: + version "3.5.1" + resolved "https://registry.yarnpkg.com/relay-hooks/-/relay-hooks-3.5.1.tgz#d22d5da896999c276d1db8529e66b5bdc2bc2835" + integrity sha512-A7ytAEtItvOJSteleGbCDpVqnixTjTG807eDo3sdEI8qy9aIta58pWeM0RU+UUDOObnwPFNdY5w4HILJ6YUYyg== dependencies: "@restart/hooks" "^0.3.1" fbjs "^1.0.0"