wip

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/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()
 

src/app/Components/CustomShareSheet/CustomShareSheet.tsx

@@ -49,6 +49,7 @@ export const CustomShareSheet = () => {
   const toast = useToast()
   const shotRef = useRef<ViewShot>(null)
   const { trackEvent } = useTracking()
+  // TODO: we need to handle thr artist and the sale case
   const data = useLazyLoadQuery<CustomShareSheet_ArtworkQuery>(artworkQuery, {
     slug: item?.slug ?? "",
     skip: !item,
@@ -234,6 +235,20 @@ const artworkQuery = graphql`
   }
 `
 
+const artistQuery = graphql`
+  query CustomShareSheet_ArtistQuery($slug: String!, $skip: Boolean!) {
+    artist(id: $slug) @skip(if: $skip) {
+      internalID
+      slug
+      href
+      name
+      image {
+        url(version: "large")
+      }
+    }
+  }
+`
+// TODO: needs the other stuff, like sale and artist
 export const tracks = {
   customShare: (service: string, id: string, slug?: string): ShareType => ({
     action: ActionType.share,

src/app/Components/CustomShareSheet/atoms.ts

@@ -1,8 +1,5 @@
 import { atom, useAtom } from "jotai"
-
-type Item =
-  | { type: "artwork"; slug: string; currentImageIndex?: number }
-  | { type: "sale"; slug: string }
+import { Item } from "./types"
 
 const visibleAtom = atom(false)
 const itemAtom = atom<Item | null>(null)

src/app/Components/CustomShareSheet/types.ts

@@ -0,0 +1,4 @@
+export type Item =
+  | { type: "artwork"; slug: string; currentImageIndex?: number }
+  | { type: "sale"; slug: string }
+  | { type: "artist"; slug: string }

src/app/Scenes/ViewingRoom/ViewingRoom.tsx

@@ -1,6 +1,6 @@
 import { ViewingRoom_viewingRoom$data } from "__generated__/ViewingRoom_viewingRoom.graphql"
 import { ViewingRoomQuery } from "__generated__/ViewingRoomQuery.graphql"
-import { getShareURL } from "app/Components/ShareSheet/helpers"
+import { getShareURL } from "app/Components/CustomShareSheet/helpers"
 import { navigate } from "app/navigation/navigate"
 import { defaultEnvironment } from "app/relay/createEnvironment"
 import renderWithLoadProgress from "app/utils/renderWithLoadProgress"