fix: use the same relay env between Home screen and useMutation (#8636

)

* refactor: pass correct relay env

* refactor: remove refresh helpers

* refactor: remove unused `contextScreen` prop

* fix: failed tests

* Revert "fix: failed tests"

This reverts commit fd536c8.

* sandbox

src/app/Components/Artist/ArtistHeader.tsx

@@ -3,7 +3,6 @@ import { ArtistHeaderFollowArtistMutation } from "__generated__/ArtistHeaderFoll
 import { ArtistHeader_artist$data } from "__generated__/ArtistHeader_artist.graphql"
 import { FollowButton } from "app/Components/Button/FollowButton"
 import { formatLargeNumberOfItems } from "app/utils/formatLargeNumberOfItems"
-import { refreshOnArtistFollow } from "app/utils/refreshHelpers"
 import { Schema } from "app/utils/track"
 import { useState } from "react"
 import { commitMutation, createFragmentContainer, graphql, RelayProp } from "react-relay"
@@ -87,7 +86,6 @@ export const ArtistHeader: React.FC<Props> = ({ artist, relay }) => {
   }
 
   const successfulFollowChange = () => {
-    refreshOnArtistFollow()
     trackEvent({
       action_name: artist.isFollowed
         ? Schema.ActionNames.ArtistUnfollow

src/app/Components/ArtworkLists/useSaveArtworkToArtworkLists.ts

@@ -5,7 +5,7 @@ import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { SaveArtworkOptions, useSaveArtwork } from "app/utils/mutations/useSaveArtwork"
 import { graphql, useFragment } from "react-relay"
 
-interface Options extends Pick<SaveArtworkOptions, "onCompleted" | "onError" | "contextScreen"> {
+interface Options extends Pick<SaveArtworkOptions, "onCompleted" | "onError"> {
   artworkFragmentRef: useSaveArtworkToArtworkLists_artwork$key
 }
 

src/app/Components/ArtworkRail/ArtworkRailCard.tsx

@@ -171,7 +171,6 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = ({
     internalID,
     isSaved,
     onCompleted: onArtworkSavedOrUnSaved,
-    contextScreen: trackingContextScreenOwnerType,
   })
 
   const displayForRecentlySoldArtwork =
@@ -397,7 +396,7 @@ const RecentlySoldCardSection: React.FC<
         <Text variant="lg-display" numberOfLines={1}>
           {priceRealizedDisplay}
         </Text>
-        {performanceDisplay && (
+        {!!performanceDisplay && (
           <Text variant="lg-display" color="green" numberOfLines={1}>
             {`+${performanceDisplay}`}
           </Text>

src/app/Scenes/Home/Home.tests.tsx

@@ -1,9 +1,8 @@
-import { defaultEnvironment } from "app/system/relay/createEnvironment"
+import { getMockRelayEnvironment } from "app/system/relay/defaultEnvironment"
 import { flushPromiseQueue } from "app/utils/tests/flushPromiseQueue"
-import { renderWithHookWrappersTL } from "app/utils/tests/renderWithWrappers"
+import { renderWithWrappers } from "app/utils/tests/renderWithWrappers"
 import { act } from "react-test-renderer"
 import { GraphQLSingularResponse } from "relay-runtime"
-import { createMockEnvironment } from "relay-test-utils"
 import { HomeQueryRenderer } from "./Home"
 
 jest.mock("app/Components/Home/ArtistRails/ArtistRail", () => ({
@@ -19,11 +18,11 @@ jest.mock("app/Scenes/Home/Components/SalesRail", () => ({
   SalesRailFragmentContainer: jest.fn(() => null),
 }))
 
-const mockEnvironment = defaultEnvironment as ReturnType<typeof createMockEnvironment>
+const mockEnvironment = getMockRelayEnvironment()
 
 describe(HomeQueryRenderer, () => {
   const getWrapper = async () => {
-    const tree = renderWithHookWrappersTL(<HomeQueryRenderer />, mockEnvironment)
+    const tree = renderWithWrappers(<HomeQueryRenderer environment={mockEnvironment} />)
 
     mockMostRecentOperation("HomeAboveTheFoldQuery", {
       errors: [],

src/app/Scenes/Home/Home.tsx

@@ -50,7 +50,7 @@ import {
 import { search2QueryDefaultVariables } from "app/Scenes/Search/Search2"
 import { ViewingRoomsHomeMainRail } from "app/Scenes/ViewingRoom/Components/ViewingRoomsHomeRail"
 import { GlobalStore } from "app/store/GlobalStore"
-import { defaultEnvironment } from "app/system/relay/createEnvironment"
+import { getRelayEnvironment } from "app/system/relay/defaultEnvironment"
 import { AboveTheFoldQueryRenderer } from "app/utils/AboveTheFoldQueryRenderer"
 import { useExperimentVariant } from "app/utils/experiments/hooks"
 import { maybeReportExperimentVariant } from "app/utils/experiments/reporter"
@@ -64,7 +64,6 @@ import {
   useMemoizedRandom,
 } from "app/utils/placeholders"
 import { usePrefetch } from "app/utils/queryPrefetching"
-import { RefreshEvents, HOME_SCREEN_REFRESH_KEY } from "app/utils/refreshHelpers"
 import { ProvideScreenTracking, Schema } from "app/utils/track"
 import {
   ArtworkActionTrackingProps,
@@ -94,6 +93,8 @@ import {
 import { createRefetchContainer, graphql, RelayRefetchProp } from "react-relay"
 
 import { useTracking } from "react-tracking"
+import RelayModernEnvironment from "relay-runtime/lib/store/RelayModernEnvironment"
+import { RelayMockEnvironment } from "relay-test-utils/lib/RelayModernMockEnvironment"
 import { useContentCards } from "./Components/ContentCards"
 import HomeAnalytics from "./homeAnalytics"
 import { useHomeModules } from "./useHomeModules"
@@ -200,14 +201,6 @@ const Home = memo((props: HomeProps) => {
 
   const { isRefreshing, handleRefresh, scrollRefs } = useHandleRefresh(relay, modules)
 
-  useEffect(() => {
-    RefreshEvents.addListener(HOME_SCREEN_REFRESH_KEY, handleRefresh)
-
-    return () => {
-      RefreshEvents.removeListener(HOME_SCREEN_REFRESH_KEY, handleRefresh)
-    }
-  }, [])
-
   const renderItem: ListRenderItem<HomeModule> | null | undefined = useCallback(
     ({ item, index }: { item: HomeModule; index: number }) => {
       const trackingProps = extractArtworkActionTrackingProps(item)
@@ -698,7 +691,11 @@ const messages = {
   },
 }
 
-export const HomeQueryRenderer: React.FC = () => {
+interface HomeQRProps {
+  environment?: RelayModernEnvironment | RelayMockEnvironment
+}
+
+export const HomeQueryRenderer: React.FC<HomeQRProps> = ({ environment }) => {
   const { flash_message } = GlobalStore.useAppState(
     (state) => state.bottomTabs.sessionState.tabProps.home ?? {}
   ) as {
@@ -741,7 +738,7 @@ export const HomeQueryRenderer: React.FC = () => {
 
   return (
     <AboveTheFoldQueryRenderer<HomeAboveTheFoldQuery, HomeBelowTheFoldQuery>
-      environment={defaultEnvironment}
+      environment={environment || getRelayEnvironment()}
       above={{
         query: graphql`
           query HomeAboveTheFoldQuery($version: String!) {

src/app/utils/mutations/useSaveArtwork.ts

@@ -1,6 +1,4 @@
-import { ScreenOwnerType } from "@artsy/cohesion"
 import { refreshOnArtworkSave } from "app/utils/refreshHelpers"
-import { Schema } from "app/utils/track"
 import { useMutation } from "react-relay"
 import { graphql } from "relay-runtime"
 
@@ -10,7 +8,6 @@ export interface SaveArtworkOptions {
   isSaved: boolean | null
   onCompleted?: (isSaved: boolean) => void
   onError?: () => void
-  contextScreen?: Schema.OwnerEntityTypes | ScreenOwnerType
 }
 
 export const useSaveArtwork = ({
@@ -19,7 +16,6 @@ export const useSaveArtwork = ({
   isSaved,
   onCompleted,
   onError,
-  contextScreen,
 }: SaveArtworkOptions) => {
   const [commit] = useMutation(SaveArtworkMutation)
   const nextSavedState = !isSaved
@@ -41,7 +37,7 @@ export const useSaveArtwork = ({
         },
       },
       onCompleted: () => {
-        refreshOnArtworkSave(contextScreen)
+        refreshOnArtworkSave()
         onCompleted?.(nextSavedState)
       },
       onError: () => {

src/app/utils/refreshHelpers.tsx

@@ -1,7 +1,5 @@
 import EventEmitter from "events"
 import { PAGE_SIZE } from "app/Components/constants"
-import { SaveArtworkOptions } from "app/utils/mutations/useSaveArtwork"
-import { Schema } from "app/utils/track"
 import { useState } from "react"
 import { RefreshControl } from "react-native"
 
@@ -11,23 +9,9 @@ RefreshEvents.setMaxListeners(20)
 export const FAVORITE_ARTWORKS_REFRESH_KEY = "refreshFavoriteArtworks"
 export const MY_COLLECTION_REFRESH_KEY = "refreshMyCollection"
 export const MY_COLLECTION_INSIGHTS_REFRESH_KEY = "refreshMyCollectionInsights"
-export const HOME_SCREEN_REFRESH_KEY = "refreshHomeScreen"
 
-export const refreshOnArtworkSave = (contextScreen: SaveArtworkOptions["contextScreen"]) => {
+export const refreshOnArtworkSave = () => {
   refreshFavoriteArtworks()
-
-  refreshHomeScreen(contextScreen)
-}
-
-export const refreshOnArtistFollow = (contextScreen?: Schema.OwnerEntityTypes) => {
-  refreshHomeScreen(contextScreen)
-}
-
-export const refreshHomeScreen = (contextScreen: SaveArtworkOptions["contextScreen"]) => {
-  // Only refresh home screen if we are not on the home screen
-  if (contextScreen === Schema.OwnerEntityTypes.Home) return
-
-  RefreshEvents.emit(HOME_SCREEN_REFRESH_KEY)
 }
 
 export const refreshMyCollection = () => {