Fix races for post like/repost toggle (#2617)

src/state/queries/post.ts

@@ -1,10 +1,11 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {AppBskyFeedDefs, AtUri} from '@atproto/api'
 import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query'
-
+import {Shadow} from '#/state/cache/types'
 import {getAgent} from '#/state/session'
 import {updatePostShadow} from '#/state/cache/post-shadow'
 import {track} from '#/lib/analytics/analytics'
+import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue'
 
 export const RQKEY = (postUri: string) => ['post', postUri]
 
@@ -25,7 +26,7 @@ export function usePostQuery(uri: string | undefined) {
 
 export function useGetPost() {
   const queryClient = useQueryClient()
-  return React.useCallback(
+  return useCallback(
     async ({uri}: {uri: string}) => {
       return queryClient.fetchQuery({
         queryKey: RQKEY(uri || ''),
@@ -55,103 +56,157 @@ export function useGetPost() {
   )
 }
 
-export function usePostLikeMutation() {
+export function usePostLikeMutationQueue(
+  post: Shadow<AppBskyFeedDefs.PostView>,
+) {
+  const postUri = post.uri
+  const postCid = post.cid
+  const initialLikeUri = post.viewer?.like
+  const likeMutation = usePostLikeMutation()
+  const unlikeMutation = usePostUnlikeMutation()
+
+  const queueToggle = useToggleMutationQueue({
+    initialState: initialLikeUri,
+    runMutation: async (prevLikeUri, shouldLike) => {
+      if (shouldLike) {
+        const {uri: likeUri} = await likeMutation.mutateAsync({
+          uri: postUri,
+          cid: postCid,
+        })
+        return likeUri
+      } else {
+        if (prevLikeUri) {
+          await unlikeMutation.mutateAsync({
+            postUri: postUri,
+            likeUri: prevLikeUri,
+          })
+        }
+        return undefined
+      }
+    },
+    onSuccess(finalLikeUri) {
+      // finalize
+      updatePostShadow(postUri, {
+        likeUri: finalLikeUri,
+      })
+    },
+  })
+
+  const queueLike = useCallback(() => {
+    // optimistically update
+    updatePostShadow(postUri, {
+      likeUri: 'pending',
+    })
+    return queueToggle(true)
+  }, [postUri, queueToggle])
+
+  const queueUnlike = useCallback(() => {
+    // optimistically update
+    updatePostShadow(postUri, {
+      likeUri: undefined,
+    })
+    return queueToggle(false)
+  }, [postUri, queueToggle])
+
+  return [queueLike, queueUnlike]
+}
+
+function usePostLikeMutation() {
   return useMutation<
     {uri: string}, // responds with the uri of the like
     Error,
     {uri: string; cid: string} // the post's uri and cid
   >({
     mutationFn: post => getAgent().like(post.uri, post.cid),
-    onMutate(variables) {
+    onSuccess() {
-      // optimistically update the post-shadow
-      updatePostShadow(variables.uri, {
-        likeUri: 'pending',
-      })
-    },
-    onSuccess(data, variables) {
-      // finalize the post-shadow with the like URI
-      updatePostShadow(variables.uri, {
-        likeUri: data.uri,
-      })
       track('Post:Like')
     },
-    onError(error, variables) {
-      // revert the optimistic update
-      updatePostShadow(variables.uri, {
-        likeUri: undefined,
-      })
-    },
   })
 }
 
-export function usePostUnlikeMutation() {
+function usePostUnlikeMutation() {
   return useMutation<void, Error, {postUri: string; likeUri: string}>({
-    mutationFn: async ({likeUri}) => {
+    mutationFn: ({likeUri}) => getAgent().deleteLike(likeUri),
-      await getAgent().deleteLike(likeUri)
+    onSuccess() {
       track('Post:Unlike')
     },
-    onMutate(variables) {
-      // optimistically update the post-shadow
-      updatePostShadow(variables.postUri, {
-        likeUri: undefined,
-      })
-    },
-    onError(error, variables) {
-      // revert the optimistic update
-      updatePostShadow(variables.postUri, {
-        likeUri: variables.likeUri,
-      })
-    },
   })
 }
 
-export function usePostRepostMutation() {
+export function usePostRepostMutationQueue(
+  post: Shadow<AppBskyFeedDefs.PostView>,
+) {
+  const postUri = post.uri
+  const postCid = post.cid
+  const initialRepostUri = post.viewer?.repost
+  const repostMutation = usePostRepostMutation()
+  const unrepostMutation = usePostUnrepostMutation()
+
+  const queueToggle = useToggleMutationQueue({
+    initialState: initialRepostUri,
+    runMutation: async (prevRepostUri, shouldRepost) => {
+      if (shouldRepost) {
+        const {uri: repostUri} = await repostMutation.mutateAsync({
+          uri: postUri,
+          cid: postCid,
+        })
+        return repostUri
+      } else {
+        if (prevRepostUri) {
+          await unrepostMutation.mutateAsync({
+            postUri: postUri,
+            repostUri: prevRepostUri,
+          })
+        }
+        return undefined
+      }
+    },
+    onSuccess(finalRepostUri) {
+      // finalize
+      updatePostShadow(postUri, {
+        repostUri: finalRepostUri,
+      })
+    },
+  })
+
+  const queueRepost = useCallback(() => {
+    // optimistically update
+    updatePostShadow(postUri, {
+      repostUri: 'pending',
+    })
+    return queueToggle(true)
+  }, [postUri, queueToggle])
+
+  const queueUnrepost = useCallback(() => {
+    // optimistically update
+    updatePostShadow(postUri, {
+      repostUri: undefined,
+    })
+    return queueToggle(false)
+  }, [postUri, queueToggle])
+
+  return [queueRepost, queueUnrepost]
+}
+
+function usePostRepostMutation() {
   return useMutation<
     {uri: string}, // responds with the uri of the repost
     Error,
     {uri: string; cid: string} // the post's uri and cid
   >({
     mutationFn: post => getAgent().repost(post.uri, post.cid),
-    onMutate(variables) {
+    onSuccess() {
-      // optimistically update the post-shadow
-      updatePostShadow(variables.uri, {
-        repostUri: 'pending',
-      })
-    },
-    onSuccess(data, variables) {
-      // finalize the post-shadow with the repost URI
-      updatePostShadow(variables.uri, {
-        repostUri: data.uri,
-      })
       track('Post:Repost')
     },
-    onError(error, variables) {
-      // revert the optimistic update
-      updatePostShadow(variables.uri, {
-        repostUri: undefined,
-      })
-    },
   })
 }
 
-export function usePostUnrepostMutation() {
+function usePostUnrepostMutation() {
   return useMutation<void, Error, {postUri: string; repostUri: string}>({
-    mutationFn: async ({repostUri}) => {
+    mutationFn: ({repostUri}) => getAgent().deleteRepost(repostUri),
-      await getAgent().deleteRepost(repostUri)
+    onSuccess() {
       track('Post:Unrepost')
     },
-    onMutate(variables) {
-      // optimistically update the post-shadow
-      updatePostShadow(variables.postUri, {
-        repostUri: undefined,
-      })
-    },
-    onError(error, variables) {
-      // revert the optimistic update
-      updatePostShadow(variables.postUri, {
-        repostUri: variables.repostUri,
-      })
-    },
   })
 }
 

src/view/com/util/post-ctrls/PostCtrls.tsx

@@ -22,10 +22,8 @@ import {Haptics} from 'lib/haptics'
 import {HITSLOP_10, HITSLOP_20} from 'lib/constants'
 import {useModalControls} from '#/state/modals'
 import {
-  usePostLikeMutation,
+  usePostLikeMutationQueue,
-  usePostUnlikeMutation,
+  usePostRepostMutationQueue,
-  usePostRepostMutation,
-  usePostUnrepostMutation,
 } from '#/state/queries/post'
 import {useComposerControls} from '#/state/shell/composer'
 import {Shadow} from '#/state/cache/types'
@@ -54,10 +52,8 @@ let PostCtrls = ({
   const {_} = useLingui()
   const {openComposer} = useComposerControls()
   const {closeModal} = useModalControls()
-  const postLikeMutation = usePostLikeMutation()
+  const [queueLike, queueUnlike] = usePostLikeMutationQueue(post)
-  const postUnlikeMutation = usePostUnlikeMutation()
+  const [queueRepost, queueUnrepost] = usePostRepostMutationQueue(post)
-  const postRepostMutation = usePostRepostMutation()
-  const postUnrepostMutation = usePostUnrepostMutation()
   const requireAuth = useRequireAuth()
 
   const defaultCtrlColor = React.useMemo(
@@ -68,48 +64,35 @@ let PostCtrls = ({
   ) as StyleProp<ViewStyle>
 
   const onPressToggleLike = React.useCallback(async () => {
+    try {
       if (!post.viewer?.like) {
         Haptics.default()
-      postLikeMutation.mutate({
+        await queueLike()
-        uri: post.uri,
-        cid: post.cid,
-      })
       } else {
-      postUnlikeMutation.mutate({
+        await queueUnlike()
-        postUri: post.uri,
-        likeUri: post.viewer.like,
-      })
       }
-  }, [
+    } catch (e: any) {
-    post.viewer?.like,
+      if (e?.name !== 'AbortError') {
-    post.uri,
+        throw e
-    post.cid,
+      }
-    postLikeMutation,
+    }
-    postUnlikeMutation,
+  }, [post.viewer?.like, queueLike, queueUnlike])
-  ])
 
-  const onRepost = useCallback(() => {
+  const onRepost = useCallback(async () => {
     closeModal()
+    try {
       if (!post.viewer?.repost) {
         Haptics.default()
-      postRepostMutation.mutate({
+        await queueRepost()
-        uri: post.uri,
-        cid: post.cid,
-      })
       } else {
-      postUnrepostMutation.mutate({
+        await queueUnrepost()
-        postUri: post.uri,
-        repostUri: post.viewer.repost,
-      })
       }
-  }, [
+    } catch (e: any) {
-    post.uri,
+      if (e?.name !== 'AbortError') {
-    post.cid,
+        throw e
-    post.viewer?.repost,
+      }
-    closeModal,
+    }
-    postRepostMutation,
+  }, [post.viewer?.repost, queueRepost, queueUnrepost, closeModal])
-    postUnrepostMutation,
-  ])
 
   const onQuote = useCallback(() => {
     closeModal()