fix: 优化生成记录处理逻辑,修复数据过滤和加载状态管理
This commit is contained in:
parent
4198ffc974
commit
804ae8f6fc
|
|
@ -78,39 +78,37 @@ const Sync = observer(() => {
|
||||||
|
|
||||||
// 将生成记录转换为 posts 格式
|
// 将生成记录转换为 posts 格式
|
||||||
const posts = useMemo(() => {
|
const posts = useMemo(() => {
|
||||||
const generations = generationsData?.data || []
|
const generations = generationsData || []
|
||||||
return generations
|
return generations?.map((gen: any) => {
|
||||||
.filter((gen: any) => gen?.id) // 过滤掉没有 id 的记录
|
const imageUrl = Array.isArray(gen?.resultUrl) ? gen?.resultUrl[0] : gen?.resultUrl
|
||||||
.map((gen: any) => {
|
const coverUrl = gen?.template?.coverImageUrl
|
||||||
const imageUrl = Array.isArray(gen?.resultUrl) ? gen?.resultUrl[0] : gen?.resultUrl
|
return {
|
||||||
const coverUrl = gen?.template?.coverImageUrl
|
id: gen?.id,
|
||||||
return {
|
|
||||||
id: gen?.id,
|
|
||||||
|
|
||||||
// 模板静态图片
|
// 模板静态图片
|
||||||
coverUrl: coverUrl,
|
coverUrl: coverUrl,
|
||||||
|
|
||||||
imageUrl: imageUrl,
|
imageUrl: imageUrl,
|
||||||
url: imageUrl,
|
url: imageUrl,
|
||||||
|
|
||||||
webpPreviewUrl: gen.webpPreviewUrl,
|
webpPreviewUrl: gen.webpPreviewUrl,
|
||||||
webpHighPreviewUrl: gen.webpHighPreviewUrl,
|
webpHighPreviewUrl: gen.webpHighPreviewUrl,
|
||||||
|
|
||||||
originalUrl: gen?.originalUrl,
|
originalUrl: gen?.originalUrl,
|
||||||
templateId: gen?.templateId,
|
templateId: gen?.templateId,
|
||||||
type: gen?.type,
|
type: gen?.type,
|
||||||
status: gen?.status,
|
status: gen?.status,
|
||||||
createdAt: gen?.createdAt,
|
createdAt: gen?.createdAt,
|
||||||
price: gen?.template?.price || -1,
|
price: gen?.template?.price || -1,
|
||||||
title: `生成-${gen?.id.slice(0, 6)}`,
|
title: `生成-${gen?.id.slice(0, 6)}`,
|
||||||
rank: 'S',
|
rank: 'S',
|
||||||
author: user?.name || 'User',
|
author: user?.name || 'User',
|
||||||
avatarUrl:
|
avatarUrl:
|
||||||
user?.image ||
|
user?.image ||
|
||||||
'https://image.pollinations.ai/prompt/cool%20anime%20boy%20avatar%20hoodie?seed=123&nologo=true',
|
'https://image.pollinations.ai/prompt/cool%20anime%20boy%20avatar%20hoodie?seed=123&nologo=true',
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}, [generationsData, user])
|
}, [generationsData])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!selectedItem?.id && posts.length > 0) {
|
if (!selectedItem?.id && posts.length > 0) {
|
||||||
|
|
@ -425,9 +423,9 @@ const Sync = observer(() => {
|
||||||
<FlashList
|
<FlashList
|
||||||
contentContainerStyle={{ paddingHorizontal: 12, paddingBottom: 200 }}
|
contentContainerStyle={{ paddingHorizontal: 12, paddingBottom: 200 }}
|
||||||
data={posts}
|
data={posts}
|
||||||
// drawDistance={300}
|
drawDistance={300}
|
||||||
maxItemsInRecyclePool={0}
|
maxItemsInRecyclePool={0}
|
||||||
// removeClippedSubviews={true}
|
removeClippedSubviews={true}
|
||||||
ItemSeparatorComponent={() => <Block style={{ height: 6 }} />}
|
ItemSeparatorComponent={() => <Block style={{ height: 6 }} />}
|
||||||
keyExtractor={(item: any) => item?.id}
|
keyExtractor={(item: any) => item?.id}
|
||||||
ListFooterComponent={ListFooter}
|
ListFooterComponent={ListFooter}
|
||||||
|
|
@ -439,7 +437,7 @@ const Sync = observer(() => {
|
||||||
<RefreshControl colors={['#FFE500']} refreshing={refreshing} tintColor="#FFE500" onRefresh={onRefresh} />
|
<RefreshControl colors={['#FFE500']} refreshing={refreshing} tintColor="#FFE500" onRefresh={onRefresh} />
|
||||||
}
|
}
|
||||||
onEndReached={onLoadMore}
|
onEndReached={onLoadMore}
|
||||||
onEndReachedThreshold={0.1}
|
onEndReachedThreshold={0.3}
|
||||||
/>
|
/>
|
||||||
</Block>
|
</Block>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,32 @@
|
||||||
import { root } from '@repo/core'
|
import { root } from '@repo/core'
|
||||||
import {
|
import { type ListTemplateGenerationsInput, type TemplateGeneration, TemplateGenerationController } from '@repo/sdk'
|
||||||
type ListTemplateGenerationsInput,
|
|
||||||
type ListTemplateGenerationsResult,
|
|
||||||
TemplateGenerationController,
|
|
||||||
} from '@repo/sdk'
|
|
||||||
import { useCallback, useRef, useState } from 'react'
|
import { useCallback, useRef, useState } from 'react'
|
||||||
|
|
||||||
import { type ApiError } from '@/lib/types'
|
import { type ApiError } from '@/lib/types'
|
||||||
|
|
||||||
import { handleError } from './use-error'
|
import { handleError } from './use-error'
|
||||||
|
|
||||||
|
const pageSize = 12
|
||||||
|
|
||||||
export const useTemplateGenerations = () => {
|
export const useTemplateGenerations = () => {
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(true)
|
||||||
const [loadingMore, setLoadingMore] = useState(false)
|
const [loadingMore, setLoadingMore] = useState(false)
|
||||||
const [error, setError] = useState<ApiError | null>(null)
|
const [error, setError] = useState<ApiError | null>(null)
|
||||||
const [data, setData] = useState<ListTemplateGenerationsResult | undefined>()
|
const [data, setData] = useState<TemplateGeneration[]>([])
|
||||||
const currentPageRef = useRef(1)
|
const currentPageRef = useRef(1)
|
||||||
const hasMoreRef = useRef(true)
|
const hasMoreRef = useRef(true)
|
||||||
|
|
||||||
const pageSize = 12
|
|
||||||
|
|
||||||
const load = useCallback(async (params?: ListTemplateGenerationsInput) => {
|
const load = useCallback(async (params?: ListTemplateGenerationsInput) => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
setError(null)
|
setError(null)
|
||||||
currentPageRef.current = params?.page || 1
|
|
||||||
|
|
||||||
|
currentPageRef.current = 1
|
||||||
const templateGeneration = root.get(TemplateGenerationController)
|
const templateGeneration = root.get(TemplateGenerationController)
|
||||||
|
|
||||||
const { data, error } = await handleError(
|
const { data, error } = await handleError(
|
||||||
async () =>
|
async () =>
|
||||||
await templateGeneration.list({
|
await templateGeneration.list({
|
||||||
page: params?.page || 1,
|
page: currentPageRef.current,
|
||||||
limit: params?.limit || pageSize,
|
limit: params?.limit || pageSize,
|
||||||
...params,
|
...params,
|
||||||
}),
|
}),
|
||||||
|
|
@ -39,24 +35,23 @@ export const useTemplateGenerations = () => {
|
||||||
if (error) {
|
if (error) {
|
||||||
setError(error)
|
setError(error)
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
return { data: undefined, error }
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const items = data?.data || []
|
const items = data?.data || []
|
||||||
|
|
||||||
hasMoreRef.current = items.length >= (params?.limit || pageSize)
|
hasMoreRef.current = items.length >= (params?.limit || pageSize)
|
||||||
|
|
||||||
// console.log(' hasMoreRef.current----------------', hasMoreRef.current)
|
const filterData = items?.filter((item) => !!item.id)
|
||||||
setData(data)
|
|
||||||
|
setData(filterData)
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
return { data, error: null }
|
return { data, error: null }
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const loadMore = useCallback(
|
const loadMore = useCallback(
|
||||||
async (params?: Omit<ListTemplateGenerationsInput, 'page'>) => {
|
async (params?: Omit<ListTemplateGenerationsInput, 'page'>) => {
|
||||||
const hasMore = loadingMore || loading || hasMoreRef.current
|
const hasMore = hasMoreRef.current
|
||||||
|
|
||||||
// console.log('loadmOre-----------', hasMore)
|
|
||||||
|
|
||||||
if (!hasMore) return
|
if (!hasMore) return
|
||||||
|
|
||||||
setLoadingMore(true)
|
setLoadingMore(true)
|
||||||
|
|
@ -82,10 +77,8 @@ export const useTemplateGenerations = () => {
|
||||||
hasMoreRef.current = newItems.length >= (params?.limit || pageSize)
|
hasMoreRef.current = newItems.length >= (params?.limit || pageSize)
|
||||||
currentPageRef.current = nextPage
|
currentPageRef.current = nextPage
|
||||||
|
|
||||||
setData((prev) => ({
|
const filterData = newItems?.filter((item) => !!item.id)
|
||||||
...newData,
|
setData((prev) => [...prev, ...filterData])
|
||||||
data: [...prev?.data, ...newItems],
|
|
||||||
}))
|
|
||||||
setLoadingMore(false)
|
setLoadingMore(false)
|
||||||
return { data: newData, error: null }
|
return { data: newData, error: null }
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue