spike: saving artworks to lists on other grids (#11978)

* feat: add ManagerArtworkForCollections * feat: add `SaveArtworkToCollectionsButton` * feat: initially render custom save button * chore: pass `onSave` prop in `GridItem` * fix: typo in name * feat: show modal when save button is pressed * refactor: keep only artwork id * feat: pass `collectionId` to `GridItem` * refactor: rename field * feat: keep savedListId in context * feat: add `ManageArtworkForCollectionsProvider` component * feat: restore save logic * refactor: fixes * refactor: rename * chore: add comment * feat: add `enableSaveButtonForLists` prop * refactor: remove unused component * refactor: imrpovements, restore some prev code * chore: update comment Co-authored-by: Anandaroop Roy <anandaroop.roy+github@gmail.com> --------- Co-authored-by: Anandaroop Roy <anandaroop.roy+github@gmail.com>
artsy · Mar 1, 2023 · 852303a · 852303a
1 parent babafae
commit 852303a
Show file tree

Hide file tree

Showing 153 changed files with 747 additions and 539 deletions.
diff --git a/src/Apps/CollectorProfile/Routes/Saves2/Components/SavesArtworkSaveButton.tsx b/src/Apps/CollectorProfile/Routes/Saves2/Components/SavesArtworkSaveButton.tsx
diff --git a/src/Apps/CollectorProfile/Routes/Saves2/Components/SavesArtworksGrid.tsx b/src/Apps/CollectorProfile/Routes/Saves2/Components/SavesArtworksGrid.tsx
@@ -26,7 +26,6 @@ import { isEqual } from "lodash"
 import { Jump } from "Utils/Hooks/useJump"
 import { allowedFilters } from "Components/ArtworkFilter/Utils/allowedFilters"
 import { SavesEmptyStateFragmentContainer } from "./SavesEmptyState"
-import { SavesArtworkSaveButton } from "Apps/CollectorProfile/Routes/Saves2/Components/SavesArtworkSaveButton"
 
 interface SavesArtworksGridProps {
   artworks: SavesArtworksGrid_artworks$data
@@ -164,6 +163,7 @@ const SavesArtworksGrid: FC<SavesArtworksGridProps> = ({
           contextModule={ContextModule.artworkGrid}
           itemMargin={40}
           emptyStateComponent={null}
+          savedListId={collection.internalID}
           onBrickClick={(artwork, artworkIndex) => {
             // TODO: Clarify moments about analytics
             trackEvent(
@@ -178,14 +178,6 @@ const SavesArtworksGrid: FC<SavesArtworksGridProps> = ({
               })
             )
           }}
-          renderSaveButton={artworkId => {
-            return (
-              <SavesArtworkSaveButton
-                artworkId={artworkId}
-                collectionId={collection.internalID}
-              />
-            )
-          }}
         />
 
         <Pagination

diff --git a/src/Components/Artwork/Details.tsx b/src/Components/Artwork/Details.tsx
@@ -2,6 +2,7 @@ import { AuthContextModule } from "@artsy/cohesion"
 import { Box, Flex, Join, SkeletonText, Spacer, Text } from "@artsy/palette"
 import { themeGet } from "@styled-system/theme-get"
 import { HighDemandIcon } from "Apps/MyCollection/Routes/MyCollectionArtwork/Components/MyCollectionArtworkDemandIndex/HighDemandIcon"
+import { SaveArtworkToListsButtonFragmentContainer } from "Components/Artwork/SaveButton/SaveArtworkToListsButton"
 import { useArtworkGridContext } from "Components/ArtworkGrid/ArtworkGridContext"
 import { useAuctionWebsocket } from "Components/useAuctionWebsocket"
 import { isFunction } from "lodash"
@@ -29,6 +30,7 @@ interface DetailsProps {
   showHighDemandIcon?: boolean
   showHoverDetails?: boolean
   showSaveButton?: boolean
+  enableSaveButtonForLists?: boolean
   renderSaveButton?: (artworkId: string) => React.ReactNode
 }
 
@@ -221,6 +223,7 @@ export const Details: React.FC<DetailsProps> = ({
   showHighDemandIcon = false,
   showHoverDetails = true,
   showSaveButton,
+  enableSaveButtonForLists,
   renderSaveButton,
   ...rest
 }) => {
@@ -233,6 +236,7 @@ export const Details: React.FC<DetailsProps> = ({
   const showDemandIndexHints = useFeatureFlag(
     "show-my-collection-demand-index-hints"
   )
+  const isArtworksListEnabled = useFeatureFlag("force-enable-artworks-list")
 
   const showHighDemandInfo =
     !!isP1Artist && isHighDemand && !!showDemandIndexHints && showHighDemandIcon
@@ -246,6 +250,15 @@ export const Details: React.FC<DetailsProps> = ({
       return renderSaveButton(rest.artwork.internalID)
     }
 
+    if (isArtworksListEnabled && enableSaveButtonForLists) {
+      return (
+        <SaveArtworkToListsButtonFragmentContainer
+          contextModule={contextModule!}
+          artwork={rest.artwork}
+        />
+      )
+    }
+
     return (
       <SaveButtonFragmentContainer
         contextModule={contextModule!}
@@ -425,6 +438,7 @@ export const DetailsFragmentContainer = createFragmentContainer(Details, {
         }
       }
       ...SaveButton_artwork
+      ...SaveArtworkToListsButton_artwork
       ...HoverDetails_artwork
     }
   `,

diff --git a/src/Components/Artwork/GridItem.tsx b/src/Components/Artwork/GridItem.tsx
@@ -1,5 +1,6 @@
 import { AuthContextModule, ContextModule } from "@artsy/cohesion"
 import { Box, Flex, NoImageIcon, ResponsiveBox } from "@artsy/palette"
+import { ManageArtworkForSavesProvider } from "Components/Artwork/ManageArtworkForSaves"
 import { MagnifyImage } from "Components/MagnifyImage"
 import { createFragmentContainer, graphql } from "react-relay"
 import styled from "styled-components"
@@ -26,6 +27,7 @@ interface ArtworkGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
   showHoverDetails?: boolean
   showSaveButton?: boolean
   to?: string | null
+  savedListId?: string
   renderSaveButton?: (artworkId: string) => React.ReactNode
 }
 
@@ -40,11 +42,11 @@ export const ArtworkGridItem: React.FC<ArtworkGridItemProps> = ({
   showHoverDetails,
   showSaveButton = true,
   to,
+  savedListId,
   renderSaveButton,
   ...rest
 }) => {
   const localImage = useLocalImage(artwork.image)
-
   const { isHovered, onMouseEnter, onMouseLeave } = useHoverMetadata()
 
   const handleClick = () => {
@@ -74,50 +76,53 @@ export const ArtworkGridItem: React.FC<ArtworkGridItemProps> = ({
     undefined
 
   return (
-    <div
-      data-id={artwork.internalID}
-      data-test="artworkGridItem"
-      {...rest}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <Box
-        position="relative"
-        width="100%"
-        bg="black10"
-        style={{
-          paddingBottom: imagePlaceholder,
-        }}
+    <ManageArtworkForSavesProvider savedListId={savedListId}>
+      <div
+        data-id={artwork.internalID}
+        data-test="artworkGridItem"
+        {...rest}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
       >
-        <LinkContainer
-          artwork={artwork}
-          disableRouterLinking={disableRouterLinking}
-          localImage={localImage}
-          onClick={handleClick}
-          to={to}
+        <Box
+          position="relative"
+          width="100%"
+          bg="black10"
+          style={{
+            paddingBottom: imagePlaceholder,
+          }}
         >
-          <ArtworkGridItemImage
+          <LinkContainer
             artwork={artwork}
-            lazyLoad={lazyLoad}
+            disableRouterLinking={disableRouterLinking}
             localImage={localImage}
-          />
-        </LinkContainer>
-        <Badge artwork={artwork} />
-      </Box>
-      <Metadata
-        artwork={artwork}
-        isHovered={isHovered}
-        contextModule={contextModule ?? ContextModule.artworkGrid}
-        showSaveButton={showSaveButton}
-        hideSaleInfo={hideSaleInfo}
-        onClick={handleClick}
-        showHighDemandIcon={showHighDemandIcon}
-        showHoverDetails={showHoverDetails}
-        disableRouterLinking={disableRouterLinking}
-        to={to}
-        renderSaveButton={renderSaveButton}
-      />
-    </div>
+            onClick={handleClick}
+            to={to}
+          >
+            <ArtworkGridItemImage
+              artwork={artwork}
+              lazyLoad={lazyLoad}
+              localImage={localImage}
+            />
+          </LinkContainer>
+          <Badge artwork={artwork} />
+        </Box>
+        <Metadata
+          artwork={artwork}
+          isHovered={isHovered}
+          contextModule={contextModule ?? ContextModule.artworkGrid}
+          showSaveButton={showSaveButton}
+          hideSaleInfo={hideSaleInfo}
+          onClick={handleClick}
+          showHighDemandIcon={showHighDemandIcon}
+          showHoverDetails={showHoverDetails}
+          disableRouterLinking={disableRouterLinking}
+          to={to}
+          enableSaveButtonForLists
+          renderSaveButton={renderSaveButton}
+        />
+      </div>
+    </ManageArtworkForSavesProvider>
   )
 }
 

diff --git a/src/Components/Artwork/ManageArtworkForSaves.tsx b/src/Components/Artwork/ManageArtworkForSaves.tsx
@@ -0,0 +1,78 @@
+import { SelectListsForArtworkModalQueryRender } from "Apps/CollectorProfile/Routes/Saves2/Components/SelectListsForArtworkModal/SelectListsForArtworkModal"
+import { createContext, FC, useContext, useMemo, useState } from "react"
+
+export interface ManageArtworkForSavesState {
+  artworkId: string | null
+  savedListId?: string
+  isSavedToList: boolean
+  setArtworkId: (artworkId: string) => void
+  clearArtworkId: () => void
+}
+
+interface ProviderProps {
+  savedListId?: string
+}
+
+export const ManageArtworkForSaves = createContext<ManageArtworkForSavesState>(
+  (null as unknown) as ManageArtworkForSavesState
+)
+
+export const useManageArtworkForSavesContext = () => {
+  return useContext(ManageArtworkForSaves)
+}
+
+/**
+ *
+ * If `savedListId` was passed, it means the user is on a saved artwork list page
+ * In this case, whether the artwork is saved or not will depend on the local state (not on the status received from backend)
+ *
+ * https://artsy.net/collector-profile/saves2
+ */
+export const ManageArtworkForSavesProvider: FC<ProviderProps> = ({
+  children,
+  savedListId,
+}) => {
+  const [artworkEntityId, setArtworkEntityId] = useState<string | null>(null)
+  const [isSavedToList, setIsSavedToList] = useState(!!savedListId)
+
+  const setArtworkId = (artworkId: string) => {
+    setArtworkEntityId(artworkId)
+  }
+
+  const clearArtworkId = () => {
+    setArtworkEntityId(null)
+  }
+
+  const value: ManageArtworkForSavesState = useMemo(
+    () => ({
+      artworkId: artworkEntityId,
+      savedListId,
+      isSavedToList,
+      setArtworkId,
+      clearArtworkId,
+    }),
+    [artworkEntityId, savedListId, isSavedToList]
+  )
+
+  const handleSaveListsForArtwork = (listIds: string[]) => {
+    if (savedListId) {
+      setIsSavedToList(listIds.includes(savedListId))
+    }
+  }
+
+  return (
+    <>
+      <ManageArtworkForSaves.Provider value={value}>
+        {children}
+      </ManageArtworkForSaves.Provider>
+
+      {!!artworkEntityId && (
+        <SelectListsForArtworkModalQueryRender
+          artworkID={artworkEntityId}
+          onClose={clearArtworkId}
+          onSave={handleSaveListsForArtwork}
+        />
+      )}
+    </>
+  )
+}
diff --git a/src/Components/Artwork/Metadata.tsx b/src/Components/Artwork/Metadata.tsx
@@ -24,6 +24,7 @@ export interface MetadataProps
   showHoverDetails?: boolean
   showSaveButton?: boolean
   to?: string | null
+  enableSaveButtonForLists?: boolean
   renderSaveButton?: (artworkId: string) => React.ReactNode
 }
 
@@ -39,6 +40,7 @@ export const Metadata: React.FC<MetadataProps> = ({
   showHighDemandIcon = false,
   showHoverDetails,
   showSaveButton,
+  enableSaveButtonForLists,
   renderSaveButton,
   ...rest
 }) => {
@@ -60,6 +62,7 @@ export const Metadata: React.FC<MetadataProps> = ({
         showHoverDetails={showHoverDetails}
         showSaveButton={showSaveButton}
         contextModule={contextModule}
+        enableSaveButtonForLists={enableSaveButtonForLists}
         renderSaveButton={renderSaveButton}
       />
     </LinkContainer>