spike/feat(FX-4798): Try to reduce delay between save/unsave and toas…

…t message (#8815)

* refactor: use `optimisticUpdater`

* feat: query some additional data

* feat: prevent `optimisticUpdater` from being called twice

* refactor: another try

* chore: improvements

* chore: remove debug log

* chore: another approach

src/app/Components/ArtworkLists/useSaveArtworkToArtworkLists.ts

@@ -55,8 +55,11 @@ export const useSaveArtworkToArtworkLists = (options: Options) => {
     id: artwork.id,
     internalID: artwork.internalID,
     isSaved: artwork.isSaved,
-    onCompleted: (isArtworkSaved) => {
-      onCompleted?.(isArtworkSaved)
+    onCompleted,
+    optimisticUpdater: (isArtworkSaved, _store, isCalledBefore) => {
+      if (isCalledBefore) {
+        return
+      }
 
       if (isArtworkSaved) {
         onSave({
@@ -74,10 +77,6 @@ export const useSaveArtworkToArtworkLists = (options: Options) => {
     },
   })
 
-  const saveArtworkToDefaultArtworkList = isArtworkListsEnabled
-    ? newSaveArtworkToDefaultArtworkList
-    : legacySaveArtworkToDefaultArtworkList
-
   const openSelectArtworkListsForArtworkView = () => {
     dispatch({
       type: "OPEN_SELECT_ARTWORK_LISTS_VIEW",
@@ -90,7 +89,7 @@ export const useSaveArtworkToArtworkLists = (options: Options) => {
 
   const saveArtworkToLists = () => {
     if (!isArtworkListsEnabled) {
-      saveArtworkToDefaultArtworkList()
+      legacySaveArtworkToDefaultArtworkList()
       return
     }
 
@@ -99,7 +98,7 @@ export const useSaveArtworkToArtworkLists = (options: Options) => {
       return
     }
 
-    saveArtworkToDefaultArtworkList()
+    newSaveArtworkToDefaultArtworkList()
   }
 
   return {

src/app/utils/mutations/useSaveArtwork.ts

@@ -1,13 +1,19 @@
+import { useSaveArtworkMutation } from "__generated__/useSaveArtworkMutation.graphql"
 import { useRef } from "react"
 import { useMutation } from "react-relay"
-import { Disposable, graphql } from "relay-runtime"
+import { Disposable, RecordSourceSelectorProxy, graphql } from "relay-runtime"
 
 export interface SaveArtworkOptions {
   id: string
   internalID: string
   isSaved: boolean | null
   onCompleted?: (isSaved: boolean) => void
   onError?: (error: Error) => void
+  optimisticUpdater?: (
+    isSaved: boolean,
+    store: RecordSourceSelectorProxy,
+    isCalledBefore: boolean
+  ) => void
 }
 
 export const useSaveArtwork = ({
@@ -16,8 +22,9 @@ export const useSaveArtwork = ({
   isSaved,
   onCompleted,
   onError,
+  optimisticUpdater,
 }: SaveArtworkOptions) => {
-  const [commit] = useMutation(Mutation)
+  const [commit] = useMutation<useSaveArtworkMutation>(Mutation)
   const prevCommit = useRef<Disposable | null>(null)
   const nextSavedState = !isSaved
 
@@ -26,16 +33,16 @@ export const useSaveArtwork = ({
   }
 
   return () => {
+    let optimisticUpdaterCalledBefore = false
+
     if (prevCommit.current !== null) {
       prevCommit.current.dispose()
     }
 
     prevCommit.current = commit({
       variables: {
-        input: {
-          artworkID: internalID,
-          remove: isSaved,
-        },
+        artworkID: internalID,
+        remove: isSaved,
       },
       onCompleted: () => {
         clearPrevCommit()
@@ -48,14 +55,17 @@ export const useSaveArtwork = ({
       optimisticUpdater: (store) => {
         const artwork = store.get(id)
         artwork?.setValue(nextSavedState, "isSaved")
+
+        optimisticUpdater?.(nextSavedState, store, optimisticUpdaterCalledBefore)
+        optimisticUpdaterCalledBefore = true
       },
     })
   }
 }
 
 const Mutation = graphql`
-  mutation useSaveArtworkMutation($input: SaveArtworkInput!) {
-    saveArtwork(input: $input) {
+  mutation useSaveArtworkMutation($artworkID: String!, $remove: Boolean) {
+    saveArtwork(input: { artworkID: $artworkID, remove: $remove }) {
       artwork {
         id
         isSaved
@@ -64,6 +74,7 @@ const Mutation = graphql`
       me {
         collection(id: "saved-artwork") {
           internalID
+          isSavedArtwork(artworkID: $artworkID)
           ...ArtworkListItem_collection
         }
       }