Skip to content

Commit b1983b7

Browse files
damassidamassi
committed
[Lib] Add relay-hooks
1 parent bf3134c commit b1983b7

File tree

8 files changed

+102
-68
lines changed

8 files changed

+102
-68
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@
183183
"redux-mock-store": "1.2.3",
184184
"redux-thunk": "2.2.0",
185185
"referer-parser": "0.0.3",
186+
"relay-hooks": "^3.5.2",
186187
"relay-mock-network-layer": "2.0.0",
187188
"relay-runtime": "9.1.0",
188189
"require-control": "2.1.1",

‎src/v2/Apps/Artist/Components/ArtistConsignButton.tsx

+42-39
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import React from "react"
2-
import { createFragmentContainer, graphql } from "react-relay"
2+
import { graphql } from "react-relay"
33

4-
import { ArtistConsignButton_artist } from "v2/__generated__/ArtistConsignButton_artist.graphql"
4+
import {
5+
ArtistConsignButton_artist,
6+
ArtistConsignButton_artist$key,
7+
} from "v2/__generated__/ArtistConsignButton_artist.graphql"
58
import { RouterLink } from "v2/Artsy/Router/RouterLink"
69
import { Media } from "v2/Utils/Responsive"
710

@@ -15,14 +18,35 @@ import {
1518
color,
1619
} from "@artsy/palette"
1720
import { AnalyticsSchema, useTracking } from "v2/Artsy"
21+
import { useFragment } from "relay-hooks"
1822

1923
export interface ArtistConsignButtonProps {
20-
artist: ArtistConsignButton_artist
24+
artist: ArtistConsignButton_artist$key
2125
}
2226

23-
export const ArtistConsignButton: React.FC<ArtistConsignButtonProps> = ({
24-
artist,
25-
}) => {
27+
export const ArtistConsignButton: React.FC<ArtistConsignButtonProps> = props => {
28+
const artist = useFragment<ArtistConsignButton_artist$key>(
29+
graphql`
30+
fragment ArtistConsignButton_artist on Artist {
31+
targetSupply {
32+
isInMicrofunnel
33+
isTargetSupply
34+
}
35+
36+
internalID
37+
slug
38+
name
39+
href
40+
image {
41+
cropped(width: 66, height: 66) {
42+
url
43+
}
44+
}
45+
}
46+
`,
47+
props.artist
48+
)
49+
2650
const tracking = useTracking()
2751

2852
const trackGetStartedClick = ({ destinationPath }) => {
@@ -38,15 +62,18 @@ export const ArtistConsignButton: React.FC<ArtistConsignButtonProps> = ({
3862
})
3963
}
4064

41-
const props = { artist, trackGetStartedClick }
65+
const passedProps = {
66+
artist,
67+
trackGetStartedClick,
68+
}
4269

4370
return (
4471
<>
4572
<Media at="xs">
46-
<ArtistConsignButtonSmall {...props} />
73+
<ArtistConsignButtonSmall {...passedProps} />
4774
</Media>
4875
<Media greaterThan="xs">
49-
<ArtistConsignButtonLarge {...props} />
76+
<ArtistConsignButtonLarge {...passedProps} />
5077
</Media>
5178
</>
5279
)
@@ -56,9 +83,11 @@ interface Tracking {
5683
trackGetStartedClick: (props: { destinationPath: string }) => void
5784
}
5885

59-
export const ArtistConsignButtonLarge: React.FC<
60-
ArtistConsignButtonProps & Tracking
61-
> = props => {
86+
interface Props extends Tracking {
87+
artist: ArtistConsignButton_artist
88+
}
89+
90+
export const ArtistConsignButtonLarge: React.FC<Props> = props => {
6291
const { showImage, imageURL, headline, consignURL } = getData(props)
6392

6493
return (
@@ -105,9 +134,7 @@ export const ArtistConsignButtonLarge: React.FC<
105134
)
106135
}
107136

108-
export const ArtistConsignButtonSmall: React.FC<
109-
ArtistConsignButtonProps & Tracking
110-
> = props => {
137+
export const ArtistConsignButtonSmall: React.FC<Props> = props => {
111138
const { showImage, imageURL, headline, consignURL } = getData(props)
112139

113140
return (
@@ -169,27 +196,3 @@ function getData(props) {
169196
consignURL,
170197
}
171198
}
172-
173-
export const ArtistConsignButtonFragmentContainer = createFragmentContainer(
174-
ArtistConsignButton,
175-
{
176-
artist: graphql`
177-
fragment ArtistConsignButton_artist on Artist {
178-
targetSupply {
179-
isInMicrofunnel
180-
isTargetSupply
181-
}
182-
183-
internalID
184-
slug
185-
name
186-
href
187-
image {
188-
cropped(width: 66, height: 66) {
189-
url
190-
}
191-
}
192-
}
193-
`,
194-
}
195-
)

‎src/v2/Apps/Artist/Components/__stories__/ArtistConsignButton.story.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ import { useSystemContext } from "v2/Artsy"
77
import { renderWithLoadProgress } from "v2/Artsy/Relay/renderWithLoadProgress"
88

99
import {
10-
ArtistConsignButtonFragmentContainer,
10+
ArtistConsignButton,
1111
ArtistConsignButtonLarge,
1212
ArtistConsignButtonProps,
1313
ArtistConsignButtonSmall,
1414
} from "v2/Apps/Artist/Components/ArtistConsignButton"
1515

16-
export const ArtistConsignButtonQueryRenderer: React.FC<Partial<
17-
ArtistConsignButtonProps
18-
> & {
19-
artistID: string
20-
}> = ({ artistID }) => {
16+
export const ArtistConsignButtonQueryRenderer: React.FC<
17+
Partial<ArtistConsignButtonProps> & {
18+
artistID: string
19+
}
20+
> = ({ artistID }) => {
2121
const { relayEnvironment } = useSystemContext()
2222
return (
2323
<QueryRenderer<ArtistConsignButtonQuery>
@@ -32,7 +32,7 @@ export const ArtistConsignButtonQueryRenderer: React.FC<Partial<
3232
variables={{
3333
artistID,
3434
}}
35-
render={renderWithLoadProgress(ArtistConsignButtonFragmentContainer)}
35+
render={renderWithLoadProgress(ArtistConsignButton)}
3636
/>
3737
)
3838
}

‎src/v2/Apps/Artist/Components/__tests__/ArtistConsignButton.jest.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { MockBoot, renderRelayTree } from "v2/DevTools"
55
import { cloneDeep } from "lodash"
66
import React from "react"
77
import { graphql } from "react-relay"
8-
import { ArtistConsignButtonFragmentContainer } from "../ArtistConsignButton"
8+
import { ArtistConsignButton } from "../ArtistConsignButton"
99

1010
jest.unmock("react-relay")
1111
jest.mock("v2/Artsy/Analytics/useTracking")
@@ -24,7 +24,7 @@ describe("ArtistConsignButton", () => {
2424
Component: ({ artist }) => {
2525
return (
2626
<MockBoot breakpoint={breakpoint}>
27-
<ArtistConsignButtonFragmentContainer artist={artist} />
27+
<ArtistConsignButton artist={artist} />
2828
</MockBoot>
2929
)
3030
},

‎src/v2/Apps/Artist/Routes/Overview/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { ArtistBioFragmentContainer as ArtistBio } from "v2/Components/ArtistBio
2424
import { Carousel } from "v2/Components/Carousel"
2525
import { SelectedCareerAchievementsFragmentContainer as SelectedCareerAchievements } from "v2/Components/SelectedCareerAchievements"
2626

27-
import { ArtistConsignButtonFragmentContainer as ArtistConsignButton } from "v2/Apps/Artist/Components/ArtistConsignButton"
27+
import { ArtistConsignButton } from "v2/Apps/Artist/Components/ArtistConsignButton"
2828
import { StyledLink } from "v2/Apps/Artist/Components/StyledLink"
2929
import { WorksForSaleRailQueryRenderer as WorksForSaleRail } from "v2/Apps/Artist/Routes/Overview/Components/WorksForSaleRail"
3030
import { pMedia } from "v2/Components/Helpers"

‎src/v2/Artsy/Router/Boot.tsx

+26-19
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Events from "v2/Utils/Events"
1212
import { getENV } from "v2/Utils/getENV"
1313
import { ErrorBoundary } from "./ErrorBoundary"
1414
import { FocusVisible } from "v2/Components/FocusVisible"
15+
import { RelayEnvironmentProvider } from "relay-hooks"
1516

1617
import {
1718
MatchingMediaQueries,
@@ -63,27 +64,33 @@ export const Boot = track(null, {
6364
<Theme>
6465
<HeadProvider headTags={headTags}>
6566
<StateProvider>
66-
<SystemContextProvider {...contextProps}>
67-
<ErrorBoundary>
68-
<MediaContextProvider onlyMatch={onlyMatchMediaQueries}>
69-
<ResponsiveProvider
70-
mediaQueries={themeProps.mediaQueries}
71-
initialMatchingMediaQueries={onlyMatchMediaQueries as any}
72-
>
73-
<Grid fluid maxWidth="100%">
74-
<GlobalStyles />
75-
<FocusVisible />
76-
{children}
77-
{process.env.NODE_ENV === "development" && (
78-
<BreakpointVisualizer />
79-
)}
80-
</Grid>
81-
</ResponsiveProvider>
82-
</MediaContextProvider>
83-
</ErrorBoundary>
84-
</SystemContextProvider>
67+
<RelayEnvironmentProvider environment={props.relayEnvironment}>
68+
<SystemContextProvider {...contextProps}>
69+
<ErrorBoundary>
70+
<MediaContextProvider onlyMatch={onlyMatchMediaQueries}>
71+
<ResponsiveProvider
72+
mediaQueries={themeProps.mediaQueries}
73+
initialMatchingMediaQueries={onlyMatchMediaQueries as any}
74+
>
75+
<Grid fluid maxWidth="100%">
76+
<GlobalStyles />
77+
<FocusVisible />
78+
{children}
79+
{process.env.NODE_ENV === "development" && (
80+
<BreakpointVisualizer />
81+
)}
82+
</Grid>
83+
</ResponsiveProvider>
84+
</MediaContextProvider>
85+
</ErrorBoundary>
86+
</SystemContextProvider>
87+
</RelayEnvironmentProvider>
8588
</StateProvider>
8689
</HeadProvider>
8790
</Theme>
8891
)
8992
})
93+
94+
// TODO: PR display name change upstream. Added for tests
95+
// @ts-ignore
96+
RelayEnvironmentProvider.displayName = "RelayEnvironmentProvider"

‎src/v2/Artsy/Router/__tests__/Boot.jest.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -55,4 +55,11 @@ describe("Boot", () => {
5555
it("injects Grid", () => {
5656
expect(mount(<Boot {...bootProps} />).find("Grid").length).toEqual(1)
5757
})
58+
59+
it("injects RelayEnvironmentProvider", () => {
60+
console.log(mount(<Boot {...bootProps} />).debug())
61+
expect(
62+
mount(<Boot {...bootProps} />).find("RelayEnvironmentProvider").length
63+
).toEqual(1)
64+
})
5865
})

‎yarn.lock

+16
Original file line numberDiff line numberDiff line change
@@ -3011,6 +3011,14 @@
30113011
resolved "https://registry.yarnpkg.com/@restart/context/-/context-2.1.4.tgz#a99d87c299a34c28bd85bb489cb07bfd23149c02"
30123012
integrity sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==
30133013

3014+
"@restart/hooks@^0.3.1":
3015+
version "0.3.25"
3016+
resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.25.tgz#11004139ad1c70d2f5965a8939dcb5aeb96aa652"
3017+
integrity sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==
3018+
dependencies:
3019+
lodash "^4.17.15"
3020+
lodash-es "^4.17.15"
3021+
30143022
"@samverschueren/stream-to-observable@^0.3.0":
30153023
version "0.3.0"
30163024
resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -18942,6 +18950,14 @@ [email protected]:
1894218950
dependencies:
1894318951
cosmiconfig "^5.0.5"
1894418952

18953+
relay-hooks@^3.5.2:
18954+
version "3.5.2"
18955+
resolved "https://registry.yarnpkg.com/relay-hooks/-/relay-hooks-3.5.2.tgz#98035099988e8f87a3369f3a8a4531068d59bafe"
18956+
integrity sha512-zqtSajxbNCLRQV9t5mBu1LcLbVjTpdNhhxzCWPVtWYvwiXFgx/8tuC3hFYP8EF7l3ogwlqt5rcswK6xmONC81Q==
18957+
dependencies:
18958+
"@restart/hooks" "^0.3.1"
18959+
fbjs "^1.0.0"
18960+
1894518961
[email protected], relay-mock-network-layer@^2.0.0:
1894618962
version "2.0.0"
1894718963
resolved "https://registry.yarnpkg.com/relay-mock-network-layer/-/relay-mock-network-layer-2.0.0.tgz#70cad7c11f76822980196486a42258f68e5c7910"

0 commit comments

Comments
 (0)