feat(onyx-356): single activity panel notification screen

src/app/AppRegistry.tsx

@@ -8,6 +8,7 @@ import {
   WorksForYouScreenQuery,
 } from "app/Components/Containers/WorksForYou"
 import { FadeIn } from "app/Components/FadeIn"
+import { ActivityItemScreenQueryRenderer } from "app/Scenes/Activity/ActivityItemScreen"
 import { ArtQuiz } from "app/Scenes/ArtQuiz/ArtQuiz"
 import { ArtQuizResults } from "app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResults"
 import { ArticleScreen } from "app/Scenes/Article/ArticleScreen"
@@ -338,6 +339,9 @@ export const modules = defineModules({
     fullBleed: true,
     hidesBackButton: true,
   }),
+  ActivityItem: reactModule(ActivityItemScreenQueryRenderer, {
+    hidesBottomTabs: true,
+  }),
   About: reactModule(About),
   AddMyCollectionArtist: reactModule(AddMyCollectionArtist, {
     hidesBackButton: true,

src/app/Scenes/Activity/ActivityItem.tsx

@@ -5,7 +5,9 @@ import { ActivityItem_item$key } from "__generated__/ActivityItem_item.graphql"
 import { OpaqueImageView } from "app/Components/OpaqueImageView2"
 import { useMarkNotificationAsRead } from "app/Scenes/Activity/mutations/useMarkNotificationAsRead"
 import { navigateToActivityItem } from "app/Scenes/Activity/utils/navigateToActivityItem"
+import { navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
+import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { TouchableOpacity } from "react-native"
 import { graphql, useFragment } from "react-relay"
 import { useTracking } from "react-tracking"
@@ -21,6 +23,7 @@ const UNREAD_INDICATOR_SIZE = 8
 const ARTWORK_IMAGE_SIZE = 55
 
 export const ActivityItem: React.FC<ActivityItemProps> = (props) => {
+  const enableNavigateToASingleNotification = useFeatureFlag("AREnableSingleActivityPanelScreen")
   const markAsRead = useMarkNotificationAsRead()
   const tracking = useTracking()
   const item = useFragment(activityItemFragment, props.item)
@@ -32,11 +35,15 @@ export const ActivityItem: React.FC<ActivityItemProps> = (props) => {
   const handlePress = () => {
     tracking.trackEvent(tracks.tappedNotification(item.notificationType))
 
-    navigateToActivityItem(item.targetHref)
-
     if (item.isUnread) {
       markAsRead(item)
     }
+
+    if (enableNavigateToASingleNotification) {
+      navigate(`/activity/${item.internalID}`)
+    } else {
+      navigateToActivityItem(item.targetHref)
+    }
   }
 
   return (

src/app/Scenes/Activity/ActivityItemArtworksGrid.tsx

@@ -0,0 +1,114 @@
+import { Box, Flex, FlexProps, Image, SkeletonBox, Spacer, Touchable } from "@artsy/palette-mobile"
+import { ActivityItemArtworksGrid_notification$key } from "__generated__/ActivityItemArtworksGrid_notification.graphql"
+import { navigate } from "app/system/navigation/navigate"
+import { extractNodes } from "app/utils/extractNodes"
+import { compact } from "lodash"
+import { FC } from "react"
+import { useWindowDimensions } from "react-native"
+import { graphql, useFragment } from "react-relay"
+
+const TOTAL_HORIZONTAL_PADDING = 40
+const IMAGES_PER_ROW = 2
+const GAP_BETWEEN_IMAGES = 1
+
+interface ActivityItemArtworksGridProps {
+  notification: ActivityItemArtworksGrid_notification$key
+}
+
+export const ActivityItemArtworksGrid: FC<ActivityItemArtworksGridProps> = ({ notification }) => {
+  const { width } = useWindowDimensions()
+
+  const data = useFragment<ActivityItemArtworksGrid_notification$key>(
+    activityItemArtworksGridFragment,
+    notification
+  )
+  const artworkNodes = extractNodes(data.artworksConnection)
+
+  if (artworkNodes.length === 0) {
+    return null
+  }
+
+  const imageURLs = compact(artworkNodes.map((node) => node.image?.resized?.url ?? null))
+  const rowImageWidth = (width - TOTAL_HORIZONTAL_PADDING - 10) / IMAGES_PER_ROW
+
+  return (
+    <>
+      <Flex flex={1} flexDirection="row" flexWrap="wrap">
+        {imageURLs.map((imageURL, index) => {
+          return (
+            <Box
+              key={`artwork-image-${index}`}
+              mr={index % 2 == 0 ? GAP_BETWEEN_IMAGES : 0}
+              mb={GAP_BETWEEN_IMAGES}
+            >
+              <ArtworkImage
+                imageURL={imageURL}
+                size={rowImageWidth}
+                artworkHref={artworkNodes[index].href!}
+              />
+            </Box>
+          )
+        })}
+      </Flex>
+
+      <Spacer y={1} />
+    </>
+  )
+}
+
+const activityItemArtworksGridFragment = graphql`
+  fragment ActivityItemArtworksGrid_notification on Notification {
+    artworksConnection(first: 4) {
+      edges {
+        node {
+          href
+          image {
+            resized(height: 300, width: 300, version: "normalized") {
+              url
+            }
+          }
+        }
+      }
+    }
+  }
+`
+interface ArtworkImageProps extends FlexProps {
+  artworkHref: string
+  imageURL: string
+  size: number
+}
+
+const ArtworkImage: FC<ArtworkImageProps> = ({ imageURL, size, artworkHref, ...rest }) => {
+  return (
+    <Touchable onPress={() => navigate(artworkHref!)}>
+      <Flex {...rest}>
+        <Image src={imageURL!} width={size} height={size} />
+      </Flex>
+    </Touchable>
+  )
+}
+
+export const ActivityItemArtworksGridPlaceholder: FC = () => {
+  const { width } = useWindowDimensions()
+  const rowImageWidth = (width - TOTAL_HORIZONTAL_PADDING - 10) / IMAGES_PER_ROW
+
+  return (
+    <>
+      <Flex flex={1} flexDirection="row" flexWrap="wrap">
+        {Array.from(Array(4)).map((_, index) => {
+          return (
+            <SkeletonBox
+              key={`artwork-image-placeholder-${index}`}
+              mr={index % 2 == 0 ? GAP_BETWEEN_IMAGES : 0}
+              mb={GAP_BETWEEN_IMAGES}
+              width={rowImageWidth}
+              height={rowImageWidth}
+            />
+          )
+        })}
+      </Flex>
+
+      <Spacer y={1} />
+    </>
+  )
+}

src/app/Scenes/Activity/ActivityItemScreen.tsx

@@ -0,0 +1,148 @@
+import { Box, Flex, SkeletonBox, Spacer, Text, useTheme } from "@artsy/palette-mobile"
+import {
+  ActivityItemScreenQuery,
+  ActivityItemScreenQuery$data,
+} from "__generated__/ActivityItemScreenQuery.graphql"
+import {
+  ActivityItemArtworksGrid,
+  ActivityItemArtworksGridPlaceholder,
+} from "app/Scenes/Activity/ActivityItemArtworksGrid"
+import { ActivityItemTypeLabel } from "app/Scenes/Activity/ActivityItemTypeLabel"
+import { navigateToActivityItem } from "app/Scenes/Activity/utils/navigateToActivityItem"
+import { shouldDisplayNotificationTypeLabel } from "app/Scenes/Activity/utils/shouldDisplayNotificationTypeLabel"
+import { withSuspense } from "app/utils/hooks/withSuspense"
+import { FC } from "react"
+import { ScrollView } from "react-native"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { graphql, useLazyLoadQuery } from "react-relay"
+
+interface ActivityItemScreenProps {
+  me: ActivityItemScreenQuery$data["me"]
+}
+
+const PlaceholderComponent: FC = () => {
+  const { space } = useTheme()
+  const { bottom: bottomInset } = useSafeAreaInsets()
+
+  return (
+    <Flex flex={1}>
+      <ScrollView
+        contentContainerStyle={{
+          paddingTop: space(6),
+          paddingBottom: bottomInset,
+          paddingHorizontal: space(2),
+        }}
+      >
+        <ActivityItemPlaceholder />
+
+        <Spacer y={2} />
+
+        <ActivityItemArtworksGridPlaceholder />
+
+        <Flex flex={1}>
+          <Text underline textAlign="center">
+            View more
+          </Text>
+        </Flex>
+      </ScrollView>
+    </Flex>
+  )
+}
+
+const ActivityItemScreen: FC<ActivityItemScreenProps> = ({ me }) => {
+  const { space } = useTheme()
+  const { bottom: bottomInset } = useSafeAreaInsets()
+  const notification = me?.notification
+
+  if (!notification) {
+    return null
+  }
+
+  return (
+    <Flex flex={1}>
+      <ScrollView
+        contentContainerStyle={{
+          paddingTop: space(6),
+          paddingBottom: bottomInset,
+          paddingHorizontal: space(2),
+        }}
+      >
+        <Flex flexDirection="row">
+          {shouldDisplayNotificationTypeLabel(notification.notificationType) && (
+            <ActivityItemTypeLabel notificationType={notification.notificationType} />
+          )}
+
+          <Text variant="xs" color="black60">
+            {notification.publishedAt}
+          </Text>
+        </Flex>
+
+        <Text variant="sm-display" fontWeight="bold">
+          {notification.title}
+        </Text>
+
+        <Text variant="sm-display">{notification.message}</Text>
+
+        <Spacer y={2} />
+
+        <ActivityItemArtworksGrid notification={notification} />
+
+        <Flex flex={1}>
+          <Text
+            underline
+            textAlign="center"
+            onPress={() => {
+              navigateToActivityItem(notification.targetHref)
+            }}
+          >
+            View more
+          </Text>
+        </Flex>
+      </ScrollView>
+    </Flex>
+  )
+}
+
+interface ActivityItemScreenQueryRendererProps {
+  notificationID: string
+}
+
+export const ActivityItemScreenQueryRenderer: FC<ActivityItemScreenQueryRendererProps> =
+  withSuspense(({ notificationID }) => {
+    const data = useLazyLoadQuery<ActivityItemScreenQuery>(ActivityItemQuery, {
+      internalID: notificationID,
+    })
+
+    if (!data.me?.notification) {
+      return null
+    }
+
+    return <ActivityItemScreen me={data.me} />
+  }, PlaceholderComponent)
+
+const ActivityItemQuery = graphql`
+  query ActivityItemScreenQuery($internalID: String!) {
+    me {
+      notification(id: $internalID) {
+        title
+        message
+        notificationType
+        publishedAt(format: "RELATIVE")
+        targetHref
+        ...ActivityItemArtworksGrid_notification
+      }
+    }
+  }
+`
+
+const ActivityItemPlaceholder = () => {
+  return (
+    <Box>
+      <SkeletonBox width={30} height={20} />
+      <Spacer y={0.5} />
+      <SkeletonBox width={130} height={15} />
+      <Spacer y={0.5} />
+      <SkeletonBox width={100} height={15} />
+    </Box>
+  )
+}

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

@@ -7,7 +7,9 @@ import { OpaqueImageView } from "app/Components/OpaqueImageView2"
 import { useMarkNotificationAsRead } from "app/Scenes/Activity/mutations/useMarkNotificationAsRead"
 import { getNotificationTypeLabel } from "app/Scenes/Activity/utils/getNotificationTypeLabel"
 import { navigateToActivityItem } from "app/Scenes/Activity/utils/navigateToActivityItem"
+import { navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
+import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { TouchableOpacity } from "react-native"
 import { graphql, useFragment } from "react-relay"
 
@@ -20,6 +22,7 @@ export const ACTIVITY_RAIL_ARTWORK_IMAGE_SIZE = 55
 const MAX_WIDTH = 220
 
 export const ActivityRailItem: React.FC<ActivityRailItemProps> = (props) => {
+  const enableNavigateToASingleNotification = useFeatureFlag("AREnableSingleActivityPanelScreen")
   const markAsRead = useMarkNotificationAsRead()
 
   const item = useFragment(ActivityRailItemFragment, props.item)
@@ -30,10 +33,14 @@ export const ActivityRailItem: React.FC<ActivityRailItemProps> = (props) => {
 
     markAsRead(item)
 
-    navigateToActivityItem(item.targetHref)
+    if (enableNavigateToASingleNotification) {
+      navigate(`/activity/${item.internalID}`)
+    } else {
+      navigateToActivityItem(item.targetHref)
+    }
   }
 
-  const imageURL = artworks[0].image?.preview?.src
+  const imageURL = artworks[0]?.image?.preview?.src
 
   const notificationTypeLabel = getNotificationTypeLabel(item.notificationType)
 

src/app/Scenes/MyCollection/Screens/Insights/ArtistItem.tsx

@@ -1,7 +1,6 @@
-import { NoArtworkIcon, Flex, useColor, Text } from "@artsy/palette-mobile"
+import { NoArtworkIcon, Flex, useColor, Text, Touchable } from "@artsy/palette-mobile"
 import { ArtistItem_artist$key } from "__generated__/ArtistItem_artist.graphql"
 import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView"
-import { Touchable } from "@artsy/palette-mobile"
 import { graphql, useFragment } from "react-relay"
 
 interface ArtistItemProps {

src/app/routes.ts

@@ -123,6 +123,7 @@ function getDomainMap(): Record<string, RouteMatcher[] | null> {
     addRoute("/", "Home"),
     addRoute("/about", "About"),
     addRoute("/activity", "Activity"),
+    addRoute("/activity/:notificationID", "ActivityItem"),
     addRoute("/art-quiz", "ArtQuiz"),
     addRoute("/art-quiz/artworks", "ArtQuiz"),
     addRoute("/art-quiz/results", "ArtQuizResults"),