Pass queryClient explicitly to updatePostShadow
This commit is contained in:
Vendored
+12
-6
@@ -1,13 +1,14 @@
|
|||||||
import {useEffect, useState, useMemo} from 'react'
|
import {useEffect, useMemo, useState} from 'react'
|
||||||
import EventEmitter from 'eventemitter3'
|
|
||||||
import {AppBskyFeedDefs} from '@atproto/api'
|
import {AppBskyFeedDefs} from '@atproto/api'
|
||||||
|
import {QueryClient} from '@tanstack/react-query'
|
||||||
|
import EventEmitter from 'eventemitter3'
|
||||||
|
|
||||||
import {batchedUpdates} from '#/lib/batchedUpdates'
|
import {batchedUpdates} from '#/lib/batchedUpdates'
|
||||||
import {Shadow, castAsShadow} from './types'
|
|
||||||
import {findAllPostsInQueryData as findAllPostsInNotifsQueryData} from '../queries/notifications/feed'
|
import {findAllPostsInQueryData as findAllPostsInNotifsQueryData} from '../queries/notifications/feed'
|
||||||
import {findAllPostsInQueryData as findAllPostsInFeedQueryData} from '../queries/post-feed'
|
import {findAllPostsInQueryData as findAllPostsInFeedQueryData} from '../queries/post-feed'
|
||||||
import {findAllPostsInQueryData as findAllPostsInThreadQueryData} from '../queries/post-thread'
|
import {findAllPostsInQueryData as findAllPostsInThreadQueryData} from '../queries/post-thread'
|
||||||
import {findAllPostsInQueryData as findAllPostsInSearchQueryData} from '../queries/search-posts'
|
import {findAllPostsInQueryData as findAllPostsInSearchQueryData} from '../queries/search-posts'
|
||||||
import {queryClient} from 'lib/react-query'
|
import {castAsShadow, Shadow} from './types'
|
||||||
export type {Shadow} from './types'
|
export type {Shadow} from './types'
|
||||||
|
|
||||||
export interface PostShadow {
|
export interface PostShadow {
|
||||||
@@ -93,8 +94,12 @@ function mergeShadow(
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function updatePostShadow(uri: string, value: Partial<PostShadow>) {
|
export function updatePostShadow(
|
||||||
const cachedPosts = findPostsInCache(uri)
|
queryClient: QueryClient,
|
||||||
|
uri: string,
|
||||||
|
value: Partial<PostShadow>,
|
||||||
|
) {
|
||||||
|
const cachedPosts = findPostsInCache(queryClient, uri)
|
||||||
for (let post of cachedPosts) {
|
for (let post of cachedPosts) {
|
||||||
shadows.set(post, {...shadows.get(post), ...value})
|
shadows.set(post, {...shadows.get(post), ...value})
|
||||||
}
|
}
|
||||||
@@ -104,6 +109,7 @@ export function updatePostShadow(uri: string, value: Partial<PostShadow>) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function* findPostsInCache(
|
function* findPostsInCache(
|
||||||
|
queryClient: QueryClient,
|
||||||
uri: string,
|
uri: string,
|
||||||
): Generator<AppBskyFeedDefs.PostView, void> {
|
): Generator<AppBskyFeedDefs.PostView, void> {
|
||||||
for (let post of findAllPostsInFeedQueryData(queryClient, uri)) {
|
for (let post of findAllPostsInFeedQueryData(queryClient, uri)) {
|
||||||
|
|||||||
+20
-16
@@ -1,12 +1,13 @@
|
|||||||
import {useCallback} from 'react'
|
import {useCallback} from 'react'
|
||||||
import {AppBskyFeedDefs, AtUri} from '@atproto/api'
|
import {AppBskyFeedDefs, AtUri} from '@atproto/api'
|
||||||
import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query'
|
import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
|
||||||
|
|
||||||
|
import {track} from '#/lib/analytics/analytics'
|
||||||
|
import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue'
|
||||||
|
import {logEvent, LogEvents} from '#/lib/statsig/statsig'
|
||||||
|
import {updatePostShadow} from '#/state/cache/post-shadow'
|
||||||
import {Shadow} from '#/state/cache/types'
|
import {Shadow} from '#/state/cache/types'
|
||||||
import {getAgent} from '#/state/session'
|
import {getAgent} from '#/state/session'
|
||||||
import {updatePostShadow} from '#/state/cache/post-shadow'
|
|
||||||
import {track} from '#/lib/analytics/analytics'
|
|
||||||
import {logEvent, LogEvents} from '#/lib/statsig/statsig'
|
|
||||||
import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue'
|
|
||||||
|
|
||||||
export const RQKEY = (postUri: string) => ['post', postUri]
|
export const RQKEY = (postUri: string) => ['post', postUri]
|
||||||
|
|
||||||
@@ -62,6 +63,7 @@ export function usePostLikeMutationQueue(
|
|||||||
logContext: LogEvents['post:like']['logContext'] &
|
logContext: LogEvents['post:like']['logContext'] &
|
||||||
LogEvents['post:unlike']['logContext'],
|
LogEvents['post:unlike']['logContext'],
|
||||||
) {
|
) {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
const postUri = post.uri
|
const postUri = post.uri
|
||||||
const postCid = post.cid
|
const postCid = post.cid
|
||||||
const initialLikeUri = post.viewer?.like
|
const initialLikeUri = post.viewer?.like
|
||||||
@@ -89,7 +91,7 @@ export function usePostLikeMutationQueue(
|
|||||||
},
|
},
|
||||||
onSuccess(finalLikeUri) {
|
onSuccess(finalLikeUri) {
|
||||||
// finalize
|
// finalize
|
||||||
updatePostShadow(postUri, {
|
updatePostShadow(queryClient, postUri, {
|
||||||
likeUri: finalLikeUri,
|
likeUri: finalLikeUri,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@@ -97,19 +99,19 @@ export function usePostLikeMutationQueue(
|
|||||||
|
|
||||||
const queueLike = useCallback(() => {
|
const queueLike = useCallback(() => {
|
||||||
// optimistically update
|
// optimistically update
|
||||||
updatePostShadow(postUri, {
|
updatePostShadow(queryClient, postUri, {
|
||||||
likeUri: 'pending',
|
likeUri: 'pending',
|
||||||
})
|
})
|
||||||
return queueToggle(true)
|
return queueToggle(true)
|
||||||
}, [postUri, queueToggle])
|
}, [queryClient, postUri, queueToggle])
|
||||||
|
|
||||||
const queueUnlike = useCallback(() => {
|
const queueUnlike = useCallback(() => {
|
||||||
// optimistically update
|
// optimistically update
|
||||||
updatePostShadow(postUri, {
|
updatePostShadow(queryClient, postUri, {
|
||||||
likeUri: undefined,
|
likeUri: undefined,
|
||||||
})
|
})
|
||||||
return queueToggle(false)
|
return queueToggle(false)
|
||||||
}, [postUri, queueToggle])
|
}, [queryClient, postUri, queueToggle])
|
||||||
|
|
||||||
return [queueLike, queueUnlike]
|
return [queueLike, queueUnlike]
|
||||||
}
|
}
|
||||||
@@ -149,6 +151,7 @@ export function usePostRepostMutationQueue(
|
|||||||
logContext: LogEvents['post:repost']['logContext'] &
|
logContext: LogEvents['post:repost']['logContext'] &
|
||||||
LogEvents['post:unrepost']['logContext'],
|
LogEvents['post:unrepost']['logContext'],
|
||||||
) {
|
) {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
const postUri = post.uri
|
const postUri = post.uri
|
||||||
const postCid = post.cid
|
const postCid = post.cid
|
||||||
const initialRepostUri = post.viewer?.repost
|
const initialRepostUri = post.viewer?.repost
|
||||||
@@ -176,7 +179,7 @@ export function usePostRepostMutationQueue(
|
|||||||
},
|
},
|
||||||
onSuccess(finalRepostUri) {
|
onSuccess(finalRepostUri) {
|
||||||
// finalize
|
// finalize
|
||||||
updatePostShadow(postUri, {
|
updatePostShadow(queryClient, postUri, {
|
||||||
repostUri: finalRepostUri,
|
repostUri: finalRepostUri,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@@ -184,19 +187,19 @@ export function usePostRepostMutationQueue(
|
|||||||
|
|
||||||
const queueRepost = useCallback(() => {
|
const queueRepost = useCallback(() => {
|
||||||
// optimistically update
|
// optimistically update
|
||||||
updatePostShadow(postUri, {
|
updatePostShadow(queryClient, postUri, {
|
||||||
repostUri: 'pending',
|
repostUri: 'pending',
|
||||||
})
|
})
|
||||||
return queueToggle(true)
|
return queueToggle(true)
|
||||||
}, [postUri, queueToggle])
|
}, [queryClient, postUri, queueToggle])
|
||||||
|
|
||||||
const queueUnrepost = useCallback(() => {
|
const queueUnrepost = useCallback(() => {
|
||||||
// optimistically update
|
// optimistically update
|
||||||
updatePostShadow(postUri, {
|
updatePostShadow(queryClient, postUri, {
|
||||||
repostUri: undefined,
|
repostUri: undefined,
|
||||||
})
|
})
|
||||||
return queueToggle(false)
|
return queueToggle(false)
|
||||||
}, [postUri, queueToggle])
|
}, [queryClient, postUri, queueToggle])
|
||||||
|
|
||||||
return [queueRepost, queueUnrepost]
|
return [queueRepost, queueUnrepost]
|
||||||
}
|
}
|
||||||
@@ -234,12 +237,13 @@ function usePostUnrepostMutation(
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function usePostDeleteMutation() {
|
export function usePostDeleteMutation() {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
return useMutation<void, Error, {uri: string}>({
|
return useMutation<void, Error, {uri: string}>({
|
||||||
mutationFn: async ({uri}) => {
|
mutationFn: async ({uri}) => {
|
||||||
await getAgent().deletePost(uri)
|
await getAgent().deletePost(uri)
|
||||||
},
|
},
|
||||||
onSuccess(data, variables) {
|
onSuccess(data, variables) {
|
||||||
updatePostShadow(variables.uri, {isDeleted: true})
|
updatePostShadow(queryClient, variables.uri, {isDeleted: true})
|
||||||
track('Post:Delete')
|
track('Post:Delete')
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user