fix: pass initial count to hooks for correct optimistic update
- Add initialLikeCount and initialFavoriteCount parameters - Use item.likeCount/item.favoriteCount as fallback - Fixes issue where count resets to 0 on first click
This commit is contained in:
parent
458027934a
commit
0d83020926
|
|
@ -92,8 +92,8 @@ export const VideoItem = memo(({ item, videoHeight }: { item: TemplateDetail; vi
|
||||||
const favoriteCount = useTemplateFavoriteCount(item.id) ?? item.favoriteCount
|
const favoriteCount = useTemplateFavoriteCount(item.id) ?? item.favoriteCount
|
||||||
|
|
||||||
// 使用 hooks 获取操作函数
|
// 使用 hooks 获取操作函数
|
||||||
const { like: onLike, unlike: onUnlike, loading: likeLoading } = useTemplateLike(item.id)
|
const { like: onLike, unlike: onUnlike, loading: likeLoading } = useTemplateLike(item.id, item.likeCount)
|
||||||
const { favorite: onFavorite, unfavorite: onUnfavorite, loading: favoriteLoading } = useTemplateFavorite(item.id)
|
const { favorite: onFavorite, unfavorite: onUnfavorite, loading: favoriteLoading } = useTemplateFavorite(item.id, false, item.favoriteCount)
|
||||||
|
|
||||||
const handleImageLoad = useCallback((event: ImageLoadEventData) => {
|
const handleImageLoad = useCallback((event: ImageLoadEventData) => {
|
||||||
const { source } = event
|
const { source } = event
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ import { templateSocialStore } from '@/stores/templateSocialStore'
|
||||||
export const useTemplateFavorite = (
|
export const useTemplateFavorite = (
|
||||||
templateId?: string,
|
templateId?: string,
|
||||||
initialFavorited = false,
|
initialFavorited = false,
|
||||||
|
initialFavoriteCount?: number,
|
||||||
) => {
|
) => {
|
||||||
const [loading, setLoading] = useState<boolean>(false)
|
const [loading, setLoading] = useState<boolean>(false)
|
||||||
const [error, setError] = useState<ApiError | null>(null)
|
const [error, setError] = useState<ApiError | null>(null)
|
||||||
|
|
@ -29,7 +30,7 @@ export const useTemplateFavorite = (
|
||||||
setError(null)
|
setError(null)
|
||||||
|
|
||||||
// 乐观更新:立即更新状态
|
// 乐观更新:立即更新状态
|
||||||
const currentCount = templateSocialStore.getFavoriteCount(templateId) ?? 0
|
const currentCount = templateSocialStore.getFavoriteCount(templateId) ?? initialFavoriteCount ?? 0
|
||||||
templateSocialStore.setFavorited(templateId, true)
|
templateSocialStore.setFavorited(templateId, true)
|
||||||
templateSocialStore.setFavoriteCount(templateId, currentCount + 1)
|
templateSocialStore.setFavoriteCount(templateId, currentCount + 1)
|
||||||
|
|
||||||
|
|
@ -58,7 +59,7 @@ export const useTemplateFavorite = (
|
||||||
}
|
}
|
||||||
|
|
||||||
return { data, error: null }
|
return { data, error: null }
|
||||||
}, [templateId])
|
}, [templateId, initialFavoriteCount])
|
||||||
|
|
||||||
const unfavorite = useCallback(async () => {
|
const unfavorite = useCallback(async () => {
|
||||||
if (!templateId) {
|
if (!templateId) {
|
||||||
|
|
@ -69,7 +70,7 @@ export const useTemplateFavorite = (
|
||||||
setError(null)
|
setError(null)
|
||||||
|
|
||||||
// 乐观更新:立即更新状态
|
// 乐观更新:立即更新状态
|
||||||
const currentCount = templateSocialStore.getFavoriteCount(templateId) ?? 0
|
const currentCount = templateSocialStore.getFavoriteCount(templateId) ?? initialFavoriteCount ?? 0
|
||||||
templateSocialStore.setFavorited(templateId, false)
|
templateSocialStore.setFavorited(templateId, false)
|
||||||
templateSocialStore.setFavoriteCount(templateId, Math.max(0, currentCount - 1))
|
templateSocialStore.setFavoriteCount(templateId, Math.max(0, currentCount - 1))
|
||||||
|
|
||||||
|
|
@ -98,7 +99,7 @@ export const useTemplateFavorite = (
|
||||||
}
|
}
|
||||||
|
|
||||||
return { data, error: null }
|
return { data, error: null }
|
||||||
}, [templateId])
|
}, [templateId, initialFavoriteCount])
|
||||||
|
|
||||||
const checkFavorited = useCallback(async () => {
|
const checkFavorited = useCallback(async () => {
|
||||||
if (!templateId) {
|
if (!templateId) {
|
||||||
|
|
@ -129,7 +130,7 @@ export const useTemplateFavorite = (
|
||||||
}
|
}
|
||||||
|
|
||||||
return { data, error: null }
|
return { data, error: null }
|
||||||
}, [templateId])
|
}, [templateId, initialFavoriteCount])
|
||||||
|
|
||||||
return {
|
return {
|
||||||
loading,
|
loading,
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ import { type ApiError } from '@/lib/types'
|
||||||
import { handleError } from './use-error'
|
import { handleError } from './use-error'
|
||||||
import { templateSocialStore } from '@/stores/templateSocialStore'
|
import { templateSocialStore } from '@/stores/templateSocialStore'
|
||||||
|
|
||||||
export const useTemplateLike = (templateId?: string) => {
|
export const useTemplateLike = (templateId?: string, initialLikeCount?: number) => {
|
||||||
const [loading, setLoading] = useState<boolean>(false)
|
const [loading, setLoading] = useState<boolean>(false)
|
||||||
const [error, setError] = useState<ApiError | null>(null)
|
const [error, setError] = useState<ApiError | null>(null)
|
||||||
|
|
||||||
|
|
@ -19,7 +19,7 @@ export const useTemplateLike = (templateId?: string) => {
|
||||||
setError(null)
|
setError(null)
|
||||||
|
|
||||||
// 乐观更新:立即更新状态
|
// 乐观更新:立即更新状态
|
||||||
const currentCount = templateSocialStore.getLikeCount(templateId) ?? 0
|
const currentCount = templateSocialStore.getLikeCount(templateId) ?? initialLikeCount ?? 0
|
||||||
templateSocialStore.setLiked(templateId, true)
|
templateSocialStore.setLiked(templateId, true)
|
||||||
templateSocialStore.setLikeCount(templateId, currentCount + 1)
|
templateSocialStore.setLikeCount(templateId, currentCount + 1)
|
||||||
|
|
||||||
|
|
@ -44,7 +44,7 @@ export const useTemplateLike = (templateId?: string) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return {}
|
return {}
|
||||||
}, [templateId])
|
}, [templateId, initialLikeCount])
|
||||||
|
|
||||||
const unlike = useCallback(async (): Promise<{ error?: ApiError }> => {
|
const unlike = useCallback(async (): Promise<{ error?: ApiError }> => {
|
||||||
if (!templateId) {
|
if (!templateId) {
|
||||||
|
|
@ -55,7 +55,7 @@ export const useTemplateLike = (templateId?: string) => {
|
||||||
setError(null)
|
setError(null)
|
||||||
|
|
||||||
// 乐观更新:立即更新状态
|
// 乐观更新:立即更新状态
|
||||||
const currentCount = templateSocialStore.getLikeCount(templateId) ?? 0
|
const currentCount = templateSocialStore.getLikeCount(templateId) ?? initialLikeCount ?? 0
|
||||||
templateSocialStore.setLiked(templateId, false)
|
templateSocialStore.setLiked(templateId, false)
|
||||||
templateSocialStore.setLikeCount(templateId, Math.max(0, currentCount - 1))
|
templateSocialStore.setLikeCount(templateId, Math.max(0, currentCount - 1))
|
||||||
|
|
||||||
|
|
@ -80,7 +80,7 @@ export const useTemplateLike = (templateId?: string) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return {}
|
return {}
|
||||||
}, [templateId])
|
}, [templateId, initialLikeCount])
|
||||||
|
|
||||||
const checkLiked = useCallback(async (): Promise<{ error?: ApiError }> => {
|
const checkLiked = useCallback(async (): Promise<{ error?: ApiError }> => {
|
||||||
if (!templateId) {
|
if (!templateId) {
|
||||||
|
|
@ -106,7 +106,7 @@ export const useTemplateLike = (templateId?: string) => {
|
||||||
templateSocialStore.setLiked(templateId, data.liked)
|
templateSocialStore.setLiked(templateId, data.liked)
|
||||||
}
|
}
|
||||||
return {}
|
return {}
|
||||||
}, [templateId])
|
}, [templateId, initialLikeCount])
|
||||||
|
|
||||||
return {
|
return {
|
||||||
loading,
|
loading,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue