chore: update sentinel logic

src/app/Scenes/HomeView/Components/HomeViewSectionSentinel.tsx

@@ -0,0 +1,29 @@
+import { ContextModule } from "@artsy/cohesion"
+import { HomeViewStore } from "app/Scenes/HomeView/HomeViewContext"
+import { useHomeViewTracking } from "app/Scenes/HomeView/useHomeViewTracking"
+import { Sentinel } from "app/utils/Sentinel"
+import React, { useCallback } from "react"
+
+interface HomeViewSectionSentinelProps {
+  contextModule: ContextModule
+}
+
+export const HomeViewSectionSentinel: React.FC<HomeViewSectionSentinelProps> = ({
+  contextModule,
+}) => {
+  const { viewedSection } = useHomeViewTracking()
+  const addTrackedSection = HomeViewStore.useStoreActions((actions) => actions.addTrackedSection)
+  const trackedSections = HomeViewStore.useStoreState((state) => state.trackedSections)
+
+  const handleImageVisibility = useCallback(
+    (visible) => {
+      if (visible && contextModule && !trackedSections.includes(contextModule)) {
+        viewedSection(contextModule as ContextModule)
+        addTrackedSection(contextModule)
+      }
+    },
+    [contextModule, viewedSection, addTrackedSection, trackedSections]
+  )
+
+  return <Sentinel onAppear={handleImageVisibility} />
+}

src/app/Scenes/HomeView/Sections/HomeViewSectionActivity.tests.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, screen } from "@testing-library/react-native"
 import { HomeViewSectionActivityTestsQuery } from "__generated__/HomeViewSectionActivityTestsQuery.graphql"
+import { HomeViewStoreProvider } from "app/Scenes/HomeView/HomeViewContext"
 import { HomeViewSectionActivity } from "app/Scenes/HomeView/Sections/HomeViewSectionActivity"
 import { mockTrackEvent } from "app/utils/tests/globallyMockedStuff"
 import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
@@ -11,7 +12,11 @@ describe("HomeViewSectionActivity", () => {
       if (!props.homeView.section) {
         return null
       }
-      return <HomeViewSectionActivity section={props.homeView.section} />
+      return (
+        <HomeViewStoreProvider>
+          <HomeViewSectionActivity section={props.homeView.section} />
+        </HomeViewStoreProvider>
+      )
     },
     query: graphql`
       query HomeViewSectionActivityTestsQuery @relay_test_operation {

src/app/Scenes/HomeView/Sections/HomeViewSectionActivity.tsx

@@ -10,6 +10,7 @@ import {
   ACTIVITY_RAIL_ITEM_WIDTH,
   ActivityRailItem,
 } from "app/Scenes/Home/Components/ActivityRailItem"
+import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel"
 import {
   HORIZONTAL_FLATLIST_INTIAL_NUMBER_TO_RENDER_DEFAULT,
   HORIZONTAL_FLATLIST_WINDOW_SIZE,
@@ -96,6 +97,8 @@ export const HomeViewSectionActivity: React.FC<HomeViewSectionActivityProps> = (
           )
         }}
       />
+
+      <HomeViewSectionSentinel contextModule={section.contextModule as ContextModule} />
     </Flex>
   )
 }

src/app/Scenes/HomeView/Sections/HomeViewSectionArticles.tests.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, screen } from "@testing-library/react-native"
 import { HomeViewSectionArticlesTestsQuery } from "__generated__/HomeViewSectionArticlesTestsQuery.graphql"
+import { HomeViewStoreProvider } from "app/Scenes/HomeView/HomeViewContext"
 import { HomeViewSectionArticles } from "app/Scenes/HomeView/Sections/HomeViewSectionArticles"
 import { mockTrackEvent } from "app/utils/tests/globallyMockedStuff"
 import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
@@ -11,7 +12,11 @@ describe("HomeViewSectionArticles", () => {
       if (!props.homeView.section) {
         return null
       }
-      return <HomeViewSectionArticles section={props.homeView.section} />
+      return (
+        <HomeViewStoreProvider>
+          <HomeViewSectionArticles section={props.homeView.section} />
+        </HomeViewStoreProvider>
+      )
     },
     query: graphql`
       query HomeViewSectionArticlesTestsQuery @relay_test_operation {

src/app/Scenes/HomeView/Sections/HomeViewSectionArticles.tsx

@@ -12,6 +12,7 @@ import { HomeViewSectionArticlesQuery } from "__generated__/HomeViewSectionArtic
 import { HomeViewSectionArticles_section$key } from "__generated__/HomeViewSectionArticles_section.graphql"
 import { ARTICLE_CARD_IMAGE_HEIGHT, ARTICLE_CARD_IMAGE_WIDTH } from "app/Components/ArticleCard"
 import { ArticlesRailFragmentContainer } from "app/Scenes/Home/Components/ArticlesRail"
+import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel"
 import { HOME_VIEW_SECTIONS_SEPARATOR_HEIGHT } from "app/Scenes/HomeView/HomeView"
 import { useHomeViewTracking } from "app/Scenes/HomeView/useHomeViewTracking"
 import { navigate } from "app/system/navigation/navigate"
@@ -62,6 +63,8 @@ export const HomeViewSectionArticles: React.FC<HomeViewSectionArticlesProps> = (
         }}
         onSectionTitlePress={viewAll ? onSectionViewAll : undefined}
       />
+
+      <HomeViewSectionSentinel contextModule={section.contextModule as ContextModule} />
     </Flex>
   )
 }

src/app/Scenes/HomeView/Sections/HomeViewSectionArticlesCards.tests.tsx

@@ -1,5 +1,6 @@
 import { screen } from "@testing-library/react-native"
 import { HomeViewSectionArticlesCardsTestsQuery } from "__generated__/HomeViewSectionArticlesCardsTestsQuery.graphql"
+import { HomeViewStoreProvider } from "app/Scenes/HomeView/HomeViewContext"
 import { HomeViewSectionArticlesCards } from "app/Scenes/HomeView/Sections/HomeViewSectionArticlesCards"
 import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
 import { graphql } from "react-relay"
@@ -10,7 +11,11 @@ describe("HomeViewSectionArticlesCards", () => {
       if (!props.homeView.section) {
         return null
       }
-      return <HomeViewSectionArticlesCards section={props.homeView.section} />
+      return (
+        <HomeViewStoreProvider>
+          <HomeViewSectionArticlesCards section={props.homeView.section} />
+        </HomeViewStoreProvider>
+      )
     },
     query: graphql`
       query HomeViewSectionArticlesCardsTestsQuery @relay_test_operation {

src/app/Scenes/HomeView/Sections/HomeViewSectionArticlesCards.tsx

@@ -15,6 +15,7 @@ import {
   HomeViewSectionArticlesCards_section$data,
   HomeViewSectionArticlesCards_section$key,
 } from "__generated__/HomeViewSectionArticlesCards_section.graphql"
+import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel"
 import { useHomeViewTracking } from "app/Scenes/HomeView/useHomeViewTracking"
 import { navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
@@ -87,6 +88,8 @@ export const HomeViewSectionArticlesCards: React.FC<HomeViewSectionArticlesCards
           </Touchable>
         )}
       </Flex>
+
+      <HomeViewSectionSentinel contextModule={section.contextModule as ContextModule} />
     </Flex>
   )
 }

src/app/Scenes/HomeView/Sections/HomeViewSectionArtists.tests.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, screen } from "@testing-library/react-native"
 import { HomeViewSectionArtistsTestsQuery } from "__generated__/HomeViewSectionArtistsTestsQuery.graphql"
+import { HomeViewStoreProvider } from "app/Scenes/HomeView/HomeViewContext"
 import { HomeViewSectionArtistsPaginationContainer } from "app/Scenes/HomeView/Sections/HomeViewSectionArtists"
 import { navigate } from "app/system/navigation/navigate"
 import { mockTrackEvent } from "app/utils/tests/globallyMockedStuff"
@@ -12,7 +13,11 @@ describe("HomeViewSectionArtists", () => {
       if (!props.homeView.section) {
         return null
       }
-      return <HomeViewSectionArtistsPaginationContainer section={props.homeView.section} />
+      return (
+        <HomeViewStoreProvider>
+          <HomeViewSectionArtistsPaginationContainer section={props.homeView.section} />
+        </HomeViewStoreProvider>
+      )
     },
     query: graphql`
       query HomeViewSectionArtistsTestsQuery @relay_test_operation {

src/app/Scenes/HomeView/Sections/HomeViewSectionArtists.tsx

@@ -19,6 +19,7 @@ import {
 import { CardRailFlatList } from "app/Components/Home/CardRailFlatList"
 import { SectionTitle } from "app/Components/SectionTitle"
 import { PAGE_SIZE } from "app/Components/constants"
+import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel"
 import {
   HORIZONTAL_FLATLIST_INTIAL_NUMBER_TO_RENDER_DEFAULT,
   HORIZONTAL_FLATLIST_WINDOW_SIZE,
@@ -130,6 +131,8 @@ export const HomeViewSectionArtists: React.FC<HomeViewSectionArtworksProps> = ({
         initialNumToRender={HORIZONTAL_FLATLIST_INTIAL_NUMBER_TO_RENDER_DEFAULT}
         windowSize={HORIZONTAL_FLATLIST_WINDOW_SIZE}
       />
+
+      <HomeViewSectionSentinel contextModule={section.contextModule as ContextModule} />
     </Flex>
   )
 }

src/app/Scenes/HomeView/Sections/HomeViewSectionArtworks.tests.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, screen } from "@testing-library/react-native"
 import { HomeViewSectionArtworksTestsQuery } from "__generated__/HomeViewSectionArtworksTestsQuery.graphql"
+import { HomeViewStoreProvider } from "app/Scenes/HomeView/HomeViewContext"
 import { HomeViewSectionArtworks } from "app/Scenes/HomeView/Sections/HomeViewSectionArtworks"
 import { navigate } from "app/system/navigation/navigate"
 import { mockTrackEvent } from "app/utils/tests/globallyMockedStuff"
@@ -12,7 +13,11 @@ describe("HomeViewSectionArtworks", () => {
       if (!props.homeView.section) {
         return null
       }
-      return <HomeViewSectionArtworks section={props.homeView.section} />
+      return (
+        <HomeViewStoreProvider>
+          <HomeViewSectionArtworks section={props.homeView.section} />
+        </HomeViewStoreProvider>
+      )
     },
     query: graphql`
       query HomeViewSectionArtworksTestsQuery @relay_test_operation {

src/app/Scenes/HomeView/Sections/HomeViewSectionArtworks.tsx

@@ -14,6 +14,7 @@ import { HomeViewSectionArtworks_section$key } from "__generated__/HomeViewSecti
 import { ARTWORK_RAIL_IMAGE_WIDTH, ArtworkRail } from "app/Components/ArtworkRail/ArtworkRail"
 import { ARTWORK_RAIL_CARD_IMAGE_HEIGHT } from "app/Components/ArtworkRail/LegacyArtworkRailCardImage"
 import { SectionTitle } from "app/Components/SectionTitle"
+import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel"
 import { useHomeViewTracking } from "app/Scenes/HomeView/useHomeViewTracking"
 import { navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
@@ -94,6 +95,8 @@ export const HomeViewSectionArtworks: React.FC<HomeViewSectionArtworksProps> = (
         showSaveIcon
         onMorePress={viewAll ? onSectionViewAll : undefined}
       />
+
+      <HomeViewSectionSentinel contextModule={section.contextModule as ContextModule} />
     </Flex>
   )
 }

src/app/Scenes/HomeView/Sections/HomeViewSectionAuctionResults.tests.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, screen } from "@testing-library/react-native"
 import { HomeViewSectionAuctionResultsTestsQuery } from "__generated__/HomeViewSectionAuctionResultsTestsQuery.graphql"
+import { HomeViewStoreProvider } from "app/Scenes/HomeView/HomeViewContext"
 import { HomeViewSectionAuctionResults } from "app/Scenes/HomeView/Sections/HomeViewSectionAuctionResults"
 import { navigate } from "app/system/navigation/navigate"
 import { mockTrackEvent } from "app/utils/tests/globallyMockedStuff"
@@ -12,7 +13,11 @@ describe("HomeViewSectionAuctionResults", () => {
       if (!props.homeView.section) {
         return null
       }
-      return <HomeViewSectionAuctionResults section={props.homeView.section} />
+      return (
+        <HomeViewStoreProvider>
+          <HomeViewSectionAuctionResults section={props.homeView.section} />
+        </HomeViewStoreProvider>
+      )
     },
     query: graphql`
       query HomeViewSectionAuctionResultsTestsQuery @relay_test_operation {

src/app/Scenes/HomeView/Sections/HomeViewSectionAuctionResults.tsx

@@ -17,6 +17,7 @@ import {
   AuctionResultListItemFragmentContainer,
 } from "app/Components/Lists/AuctionResultListItem"
 import { SectionTitle } from "app/Components/SectionTitle"
+import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel"
 import {
   HORIZONTAL_FLATLIST_INTIAL_NUMBER_TO_RENDER_DEFAULT,
   HORIZONTAL_FLATLIST_WINDOW_SIZE,
@@ -107,6 +108,8 @@ export const HomeViewSectionAuctionResults: React.FC<HomeViewSectionAuctionResul
           ) : undefined
         }
       />
+
+      <HomeViewSectionSentinel contextModule={section.contextModule as ContextModule} />
     </Flex>
   )
 }

src/app/Scenes/HomeView/Sections/HomeViewSectionFairs.tests.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, screen } from "@testing-library/react-native"
 import { HomeViewSectionFairsTestsQuery } from "__generated__/HomeViewSectionFairsTestsQuery.graphql"
+import { HomeViewStoreProvider } from "app/Scenes/HomeView/HomeViewContext"
 import { HomeViewSectionFairs } from "app/Scenes/HomeView/Sections/HomeViewSectionFairs"
 import { navigate } from "app/system/navigation/navigate"
 import { mockTrackEvent } from "app/utils/tests/globallyMockedStuff"
@@ -12,7 +13,11 @@ describe("HomeViewSectionFairs", () => {
       if (!props.homeView.section) {
         return null
       }
-      return <HomeViewSectionFairs section={props.homeView.section} />
+      return (
+        <HomeViewStoreProvider>
+          <HomeViewSectionFairs section={props.homeView.section} />
+        </HomeViewStoreProvider>
+      )
     },
     query: graphql`
       query HomeViewSectionFairsTestsQuery @relay_test_operation {

src/app/Scenes/HomeView/Sections/HomeViewSectionFairs.tsx

@@ -14,6 +14,7 @@ import { CardRailCard, CardRailMetadataContainer } from "app/Components/Home/Car
 import { CardRailFlatList } from "app/Components/Home/CardRailFlatList"
 import { SectionTitle } from "app/Components/SectionTitle"
 import { LARGE_IMAGE_SIZE, SMALL_IMAGE_SIZE } from "app/Components/ThreeUpImageLayout"
+import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel"
 import { HomeViewSectionFairsFairItem } from "app/Scenes/HomeView/Sections/HomeViewSectionFairsFairItem"
 import {
   HORIZONTAL_FLATLIST_INTIAL_NUMBER_TO_RENDER_DEFAULT,
@@ -96,6 +97,8 @@ export const HomeViewSectionFairs: React.FC<HomeViewSectionFairsProps> = ({
           )
         }}
       />
+
+      <HomeViewSectionSentinel contextModule={section.contextModule as ContextModule} />
     </Flex>
   )
 }

src/app/Scenes/HomeView/Sections/HomeViewSectionFeaturedCollection.tsx

@@ -14,6 +14,7 @@ import { HomeViewSectionFeaturedCollectionQuery } from "__generated__/HomeViewSe
 import { HomeViewSectionFeaturedCollection_section$key } from "__generated__/HomeViewSectionFeaturedCollection_section.graphql"
 import { ARTWORK_RAIL_IMAGE_WIDTH, ArtworkRail } from "app/Components/ArtworkRail/ArtworkRail"
 import { ARTWORK_RAIL_CARD_IMAGE_HEIGHT } from "app/Components/ArtworkRail/LegacyArtworkRailCardImage"
+import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel"
 import { useHomeViewTracking } from "app/Scenes/HomeView/useHomeViewTracking"
 import { navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
@@ -100,6 +101,8 @@ export const HomeViewSectionFeaturedCollection: React.FC<
           onMorePress={onSectionViewAll}
         />
       </Flex>
+
+      <HomeViewSectionSentinel contextModule={section.contextModule as ContextModule} />
     </Flex>
   )
 }

src/app/Scenes/HomeView/Sections/HomeViewSectionGalleries.tests.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, screen } from "@testing-library/react-native"
 import { HomeViewSectionGalleriesTestsQuery } from "__generated__/HomeViewSectionGalleriesTestsQuery.graphql"
+import { HomeViewStoreProvider } from "app/Scenes/HomeView/HomeViewContext"
 import { HomeViewSectionGalleries } from "app/Scenes/HomeView/Sections/HomeViewSectionGalleries"
 import { navigate } from "app/system/navigation/navigate"
 import { mockTrackEvent } from "app/utils/tests/globallyMockedStuff"
@@ -9,7 +10,11 @@ import { graphql } from "react-relay"
 describe("HomeViewSectionGalleries", () => {
   const { renderWithRelay } = setupTestWrapper<HomeViewSectionGalleriesTestsQuery>({
     Component: (props) => {
-      return <HomeViewSectionGalleries section={props.homeView.section} />
+      return (
+        <HomeViewStoreProvider>
+          <HomeViewSectionGalleries section={props.homeView.section} />
+        </HomeViewStoreProvider>
+      )
     },
     query: graphql`
       query HomeViewSectionGalleriesTestsQuery @relay_test_operation {

src/app/Scenes/HomeView/Sections/HomeViewSectionGalleries.tsx

@@ -11,6 +11,7 @@ import {
 } from "@artsy/palette-mobile"
 import { HomeViewSectionGalleriesQuery } from "__generated__/HomeViewSectionGalleriesQuery.graphql"
 import { HomeViewSectionGalleries_section$key } from "__generated__/HomeViewSectionGalleries_section.graphql"
+import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel"
 import { useHomeViewTracking } from "app/Scenes/HomeView/useHomeViewTracking"
 import { navigate } from "app/system/navigation/navigate"
 import { withSuspense } from "app/utils/hooks/withSuspense"
@@ -103,6 +104,8 @@ export const HomeViewSectionGalleries: React.FC<HomeViewSectionGalleriesProps> =
           </Flex>
         </Flex>
       </Touchable>
+
+      <HomeViewSectionSentinel contextModule={section.contextModule as ContextModule} />
     </Flex>
   )
 }