feat: Home view prefetching part III

src/app/Components/ArticleCard.tsx

@@ -1,15 +1,14 @@
 import {
-  Spacer,
   Flex,
-  useTheme,
-  Text,
-  Touchable,
+  Image,
   SkeletonBox,
   SkeletonText,
-  Image,
+  Spacer,
+  Text,
+  useTheme,
 } from "@artsy/palette-mobile"
 import { ArticleCard_article$data } from "__generated__/ArticleCard_article.graphql"
-import { navigate } from "app/system/navigation/navigate"
+import { RouterLink } from "app/system/navigation/RouterLink"
 import { compact } from "lodash"
 import { DateTime } from "luxon"
 import { GestureResponderEvent, useWindowDimensions, View, ViewProps } from "react-native"
@@ -27,13 +26,6 @@ interface ArticleCardProps extends ViewProps {
 export const ArticleCard: React.FC<ArticleCardProps> = ({ article, onPress, isFluid }) => {
   const imageURL = article.thumbnailImage?.url
 
-  const onTap = (event: GestureResponderEvent) => {
-    onPress?.(event)
-    if (article.href) {
-      navigate(article.href)
-    }
-  }
-
   const { space } = useTheme()
   const { width } = useWindowDimensions()
 
@@ -44,7 +36,7 @@ export const ArticleCard: React.FC<ArticleCardProps> = ({ article, onPress, isFl
 
   return (
     <Flex width={isFluid ? "100%" : ARTICLE_CARD_IMAGE_WIDTH}>
-      <Touchable onPress={onTap} testID="article-card">
+      <RouterLink onPress={onPress} testID="article-card" to={article.href}>
         <Flex width={isFluid ? "100%" : ARTICLE_CARD_IMAGE_WIDTH} overflow="hidden">
           {!!imageURL &&
             (isFluid ? (
@@ -81,7 +73,7 @@ export const ArticleCard: React.FC<ArticleCardProps> = ({ article, onPress, isFl
             </Text>
           )}
         </Flex>
-      </Touchable>
+      </RouterLink>
     </Flex>
   )
 }

src/app/Navigation/routes.tsx

@@ -21,7 +21,7 @@ import { ActivityScreen } from "app/Scenes/Activity/ActivityScreen"
 import { activityHeaderQuery } from "app/Scenes/Activity/components/ActivityHeader"
 import { ArtQuiz } from "app/Scenes/ArtQuiz/ArtQuiz"
 import { ArtQuizResults } from "app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResults"
-import { ArticleScreen } from "app/Scenes/Article/ArticleScreen"
+import { ArticleScreen, articleScreenQuery } from "app/Scenes/Article/ArticleScreen"
 import { ArticlesSlideShowScreen } from "app/Scenes/ArticleSlideShow/ArticleSlideShow"
 import { ArticlesScreen, ArticlesScreenQuery } from "app/Scenes/Articles/Articles"
 import { NewsScreen, NewsScreenQuery } from "app/Scenes/Articles/News/News"
@@ -308,6 +308,7 @@ export const artsyDotNetRoutes = defineRoutes([
         headerShown: false,
       },
     },
+    queries: [articleScreenQuery],
   },
   {
     path: "/article/:articleID/slideshow",

src/app/Scenes/Article/ArticleScreen.tsx

@@ -32,7 +32,7 @@ export const ArticleScreen: React.FC<ArticleScreenProps> = (props) => {
 
 const Article: React.FC<ArticleScreenProps> = (props) => {
   const data = useLazyLoadQuery<ArticleScreenQuery>(articleScreenQuery, {
-    slug: props.articleID,
+    articleID: props.articleID,
   })
 
   if (!data.article) {
@@ -82,8 +82,8 @@ const Article: React.FC<ArticleScreenProps> = (props) => {
 }
 
 export const articleScreenQuery = graphql`
-  query ArticleScreenQuery($slug: String!) {
-    article(id: $slug) {
+  query ArticleScreenQuery($articleID: String!) {
+    article(id: $articleID) {
       ...ArticleShareButton_article
       ...ArticleWebViewScreen_article
       ...ArticleBody_article

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

@@ -1,9 +1,8 @@
 import { BellIcon, Box, DEFAULT_HIT_SLOP, VisualClueDot } from "@artsy/palette-mobile"
 import { useHomeViewTracking } from "app/Scenes/HomeView/hooks/useHomeViewTracking"
-import { navigate } from "app/system/navigation/navigate"
+import { RouterLink } from "app/system/navigation/RouterLink"
 import { useActivityDotExperiment } from "app/utils/experiments/useActivityDotExperiment"
 import React from "react"
-import { TouchableOpacity } from "react-native"
 
 interface ActivityIndicatorProps {
   hasUnseenNotifications: boolean
@@ -22,19 +21,19 @@ export const ActivityIndicator: React.FC<ActivityIndicatorProps> = (props) => {
 
   const navigateToActivityPanel = () => {
     tracking.tappedNotificationBell()
-
-    navigate("/notifications")
   }
 
   return (
     <Box justifyContent="center">
-      <TouchableOpacity
+      <RouterLink
+        to="/notifications"
         accessibilityLabel="Activity"
-        onPress={navigateToActivityPanel}
         hitSlop={DEFAULT_HIT_SLOP}
+        onPress={navigateToActivityPanel}
+        activeOpacity={0.5}
       >
         <BellVariant hasUnseenNotifications={displayUnseenNotifications} />
-      </TouchableOpacity>
+      </RouterLink>
     </Box>
   )
 }

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

@@ -49,7 +49,7 @@ export const ActivityRailItem: React.FC<ActivityRailItemProps> = (props) => {
   const { href, passProps } = getActivityItemHref(item)
 
   return (
-    <RouterLink activeOpacity={0.65} onPress={handlePress} to={href} navigationProps={passProps}>
+    <RouterLink onPress={handlePress} to={href} navigationProps={passProps}>
       <Flex flexDirection="row" width={ACTIVITY_RAIL_ITEM_WIDTH}>
         <Flex
           mr={1}

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

@@ -70,15 +70,15 @@ export const NewWorksForYouRail: React.FC<NewWorksForYouRailProps & RailScrollPr
     return (
       <Flex>
         <View ref={railRef}>
-          <Flex pl={2} pr={2}>
-            <SectionTitle
-              title={title}
-              onPress={() => {
-                trackEvent(tracks.tappedHeader())
-                navigate("/new-for-you")
-              }}
-            />
-          </Flex>
+          <SectionTitle
+            title={title}
+            href="/new-for-you"
+            onPress={() => {
+              trackEvent(tracks.tappedHeader())
+            }}
+            px={2}
+          />
+
           <ArtworkRail
             {...trackingProps}
             artworks={artworks}