feat: context menu [anyone can take this over]

ios/Podfile.lock

@@ -455,6 +455,8 @@ PODS:
  - react-native-config/App (= 1.4.11)
  - react-native-config/App (1.4.11):
  - React-Core
+ - react-native-context-menu-view (1.9.0):
+ - React
  - react-native-cookies (6.0.11):
  - React-Core
  - react-native-fbsdk-next (11.0.0):
@@ -785,6 +787,7 @@ DEPENDENCIES:
  - react-native-appboy-sdk (from `../node_modules/react-native-appboy-sdk`)
  - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
  - react-native-config (from `../node_modules/react-native-config`)
+ - react-native-context-menu-view (from `../node_modules/react-native-context-menu-view`)
  - "react-native-cookies (from `../node_modules/@react-native-cookies/cookies`)"
  - react-native-fbsdk-next (from `../node_modules/react-native-fbsdk-next`)
  - react-native-flipper (from `../node_modules/react-native-flipper`)
@@ -988,6 +991,8 @@ EXTERNAL SOURCES:
  :path: "../node_modules/@react-native-community/cameraroll"
  react-native-config:
  :path: "../node_modules/react-native-config"
+ react-native-context-menu-view:
+ :path: "../node_modules/react-native-context-menu-view"
  react-native-cookies:
  :path: "../node_modules/@react-native-cookies/cookies"
  react-native-fbsdk-next:
@@ -1203,6 +1208,7 @@ SPEC CHECKSUMS:
  react-native-appboy-sdk: e4e36787766637d5c60da264b66f4389ed479867
  react-native-cameraroll: 463aff54e37cff27ea76eb792e6f1fa43b876320
  react-native-config: bcafda5b4c51491ee1b0e1d0c4e3905bc7b56c1b
+ react-native-context-menu-view: 1797ce85b52d810301268330704272b8cdb7a6e7
  react-native-cookies: cd92f3824ed1e32a20802e8185101e14bb5b76da
  react-native-fbsdk-next: e5ea39f1b0f1e76deeb2538275559706f3b79e82
  react-native-flipper: 8d0ada062fbc2c7460cc0d343aded6fc3f9c90dc

package.json

@@ -37,7 +37,7 @@
  "open-url": "npx uri-scheme open",
  "postinstall": "yarn init-metaflags; prettier --write package.json; ./scripts/update-echo",
  "prepare": "patch-package && husky install",
- "prettier-project": "yarn run prettier-write 'src/**/*.{ts,tsx}'",
+ "prettier-project": "yarn run prettier-write 'src/**/*.{ts,tsx,js,jsx}'",
  "prettier-write": "prettier --write",
  "relay": "[ -f data/complete.queryMap.json ] || echo '{}' > data/complete.queryMap.json && relay-compiler",
  "setup:artsy": "./scripts/setup-env-for-artsy",
@@ -137,6 +137,7 @@
  "google-libphonenumber": "3.2.30",
  "grapheme-splitter": "1.0.4",
  "html-entities": "2.3.2",
+ "jotai": "1.12.0",
  "jsc-android": "250230.2.1",
  "limiter": "^2.1.0",
  "lodash": "4.17.21",
@@ -156,6 +157,7 @@
  "react-native-appboy-sdk": "1.35.1",
  "react-native-bootsplash": "3.2.0",
  "react-native-config": "https://github.com/artsy/react-native-config.git#v1.4.11-artsy",
+ "react-native-context-menu-view": "1.9.0",
  "react-native-credit-card-input": "0.4.1",
  "react-native-device-info": "10.3.0",
  "react-native-fast-image": "8.5.11",

src/app/AppProviders.tsx

@@ -5,6 +5,7 @@ import { GestureHandlerRootView } from "react-native-gesture-handler"
 import { SafeAreaProvider } from "react-native-safe-area-context"
 import { RelayEnvironmentProvider } from "react-relay"
 import { ProvideScreenDimensions } from "shared/hooks"
+import { CustomShareSheet } from "./Components/CustomShareSheet/CustomShareSheet"
 import { _FancyModalPageWrapper } from "./Components/FancyModal/FancyModalContext"
 import { PopoverMessageProvider } from "./Components/PopoverMessage/PopoverMessageProvider"
 import { RetryErrorBoundary } from "./Components/RetryErrorBoundary"
@@ -37,7 +38,10 @@ export const AppProviders = ({ children }: { children?: React.ReactNode }) =>
  ToastProvider, // uses: GlobalStoreProvider
  GravityWebsocketContextProvider, // uses GlobalStoreProvider
  ],
- children
+ <>
+ {children}
+ <CustomShareSheet />
+ </>
  )
 
 // Providers with preset props

src/app/Components/Artist/ArtistHeaderFloatingButtons.tsx

@@ -1,13 +1,12 @@
-import { ContextModule, OwnerType } from "@artsy/cohesion"
 import { ArtistHeaderFloatingButtons_artist$data } from "__generated__/ArtistHeaderFloatingButtons_artist.graphql"
 import { HeaderButton } from "app/Components/HeaderButton"
-import { ShareSheet } from "app/Components/ShareSheet/ShareSheet"
 import { useStickyTabPageContext } from "app/Components/StickyTabPage/StickyTabPageContext"
 import { goBack } from "app/navigation/navigate"
 import { ChevronIcon, ShareIcon } from "palette"
-import React, { Fragment, useRef, useState } from "react"
+import React, { useRef, useState } from "react"
 import Animated, { block, call, cond, onChange, set, useCode } from "react-native-reanimated"
 import { createFragmentContainer, graphql } from "react-relay"
+import { useCustomShareSheet } from "../CustomShareSheet/atoms"
 
 interface ArtistHeaderFloatingButtonsProps {
  artist: ArtistHeaderFloatingButtons_artist$data
@@ -20,7 +19,7 @@ const SHARE_ICON_SIZE = 23
 export const ArtistHeaderFloatingButtons: React.FC<ArtistHeaderFloatingButtonsProps> = ({
  artist,
 }) => {
- const [shareSheetVisible, setShareSheetVisible] = useState(false)
+ const sharesheet = useCustomShareSheet()
  const [hideButton, setHideButton] = useState(false)
  const { headerOffsetY } = useStickyTabPageContext()
 
@@ -41,12 +40,8 @@ export const ArtistHeaderFloatingButtons: React.FC<ArtistHeaderFloatingButtonsPr
  []
  )
 
- const handleSharePress = () => {
- setShareSheetVisible(true)
- }
-
  return (
- <Fragment>
+ <>
  <HeaderButton
  shouldHide={hideButton}
  position="left"
@@ -58,27 +53,18 @@ export const ArtistHeaderFloatingButtons: React.FC<ArtistHeaderFloatingButtonsPr
 
  <HeaderButton
  shouldHide={hideButton}
- onPress={handleSharePress}
+ onPress={() =>
+ sharesheet.show({
+ type: "artist",
+ slug: artist.slug,
+ })
+ }
  position="right"
  applySafeAreaTopInsets={false}
  >
  <ShareIcon width={SHARE_ICON_SIZE} height={SHARE_ICON_SIZE} />
  </HeaderButton>
-
- <ShareSheet
- entry={{
- internalID: artist.internalID,
- slug: artist.slug,
- href: artist.href!,
- artistNames: [artist.name!],
- imageURL: artist.image?.url ?? undefined,
- }}
- ownerType={OwnerType.artist}
- contextModule={ContextModule.artistHeader}
- visible={shareSheetVisible}
- setVisible={setShareSheetVisible}
- />
- </Fragment>
+ </>
  )
 }
 

src/app/Components/ArtworkGrids/ArtworkGridItem.tsx

@@ -1,10 +1,12 @@
-import { ScreenOwnerType, tappedMainArtworkGrid } from "@artsy/cohesion"
+import { ContextModule, OwnerType, ScreenOwnerType, tappedMainArtworkGrid } from "@artsy/cohesion"
 import { ArtworkGridItem_artwork$data } from "__generated__/ArtworkGridItem_artwork.graphql"
 import { filterArtworksParams } from "app/Components/ArtworkFilter/ArtworkFilterHelpers"
 import { ArtworksFiltersStore } from "app/Components/ArtworkFilter/ArtworkFilterStore"
 import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView"
 
+import { ArtworkGridItemSaveMutation } from "__generated__/ArtworkGridItemSaveMutation.graphql"
 import { navigate } from "app/navigation/navigate"
+import { defaultEnvironment } from "app/relay/createEnvironment"
 import { GlobalStore, useFeatureFlag } from "app/store/GlobalStore"
 import { getUrgencyTag } from "app/utils/getUrgencyTag"
 import {
@@ -13,6 +15,7 @@ import {
  RandomNumberGenerator,
 } from "app/utils/placeholders"
 import { refreshFavoriteArtworks } from "app/utils/refreshHelpers"
+import { userHadMeaningfulInteraction } from "app/utils/userHadMeaningfulInteraction"
 import { useArtworkBidding } from "app/Websockets/auctions/useArtworkBidding"
 import {
  Box,
@@ -27,9 +30,10 @@ import {
 } from "palette"
 import React, { useRef } from "react"
 import { View } from "react-native"
-import { createFragmentContainer, graphql, useMutation } from "react-relay"
+import { commitMutation, createFragmentContainer, graphql, useMutation } from "react-relay"
 import { useTracking } from "react-tracking"
 import { DurationProvider } from "../Countdown"
+import { useCustomShareSheet } from "../CustomShareSheet/atoms"
 import { LotCloseInfo } from "./LotCloseInfo"
 import { LotProgressBar } from "./LotProgressBar"
 
@@ -100,6 +104,7 @@ export const Artwork: React.FC<ArtworkProps> = ({
  const eableArtworkGridSaveIcon = useFeatureFlag("AREnableArtworkGridSaveIcon")
  const enableNewOpaqueImageView = useFeatureFlag("AREnableNewOpaqueImageComponent")
  const [saveArtwork] = useMutation(SaveArtworkMutation)
+ const sharesheet = useCustomShareSheet()
 
  let filterParams: any
 
@@ -206,7 +211,52 @@ export const Artwork: React.FC<ArtworkProps> = ({
  !!artwork.sale?.extendedBiddingPeriodMinutes && !!artwork.sale?.extendedBiddingIntervalMinutes
 
  return (
- <Touchable onPress={handleTap} testID={`artworkGridItem-${artwork.title}`}>
+ <Touchable
+ onPress={handleTap}
+ testID={`artworkGridItem-${artwork.title}`}
+ onLongPress={[
+ {
+ title: artwork.isSaved ? "Remove from saved" : "Save",
+ systemIcon: artwork.isSaved ? "heart.fill" : "heart",
+ onPress: () => {
+ commitMutation<ArtworkGridItemSaveMutation>(defaultEnvironment, {
+ mutation: graphql`
+ mutation ArtworkGridItemSaveMutation($input: SaveArtworkInput!) {
+ saveArtwork(input: $input) {
+ artwork {
+ id
+ isSaved
+ }
+ }
+ }
+ `,
+ variables: { input: { artworkID: artwork.internalID, remove: artwork.isSaved } },
+ // @ts-expect-error RELAY 12 MIGRATION
+ optimisticResponse: {
+ saveArtwork: {
+ artwork: {
+ id: artwork.id,
+ isSaved: !artwork.isSaved,
+ },
+ },
+ },
+ onCompleted: () =>
+ userHadMeaningfulInteraction({
+ contextModule: ContextModule.artworkMetadata,
+ contextOwnerType: OwnerType.artwork,
+ contextOwnerId: artwork.internalID,
+ contextOwnerSlug: artwork.slug,
+ }),
+ })
+ },
+ },
+ {
+ title: "Share",
+ systemIcon: "square.and.arrow.up",
+ onPress: () => sharesheet.show({ type: "artwork", slug: artwork.slug }),
+ },
+ ]}
+ >
  <View ref={itemRef}>
  {!!artwork.image && (
  <View>

src/app/Components/ShareSheet/ShareSheet.tests.tsx → src/app/Components/CustomShareSheet/CustomShareSheet.tests.tsx

@@ -6,7 +6,8 @@ import { renderWithWrappers } from "app/tests/renderWithWrappers"
 import { useCanOpenURL } from "app/utils/useCanOpenURL"
 import Share from "react-native-share"
 import * as helpers from "./helpers"
-import { ShareSheet, ShareSheetProps } from "./ShareSheet"
+
+// TODO: these tests need some rewriting
 
 const setVisibleMock = jest.fn()