fix(web): remove incorrect placeholderData usage in useExploreAppList (#30102)

This commit is contained in:
yyh 2025-12-24 18:20:36 +08:00 committed by GitHub
parent 2f9d718997
commit 64a14dcdbc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 37 additions and 25 deletions

View File

@ -24,7 +24,7 @@ import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
import { DSLImportMode } from '@/models/app'
import { importDSL } from '@/service/apps'
import { fetchAppDetail } from '@/service/explore'
import { exploreAppListInitialData, useExploreAppList } from '@/service/use-explore'
import { useExploreAppList } from '@/service/use-explore'
import { AppModeEnum } from '@/types/app'
import { getRedirection } from '@/utils/app-redirection'
import { cn } from '@/utils/classnames'
@ -70,10 +70,14 @@ const Apps = ({
})
const {
data: { categories, allList } = exploreAppListInitialData,
data,
isLoading,
} = useExploreAppList()
const filteredList = useMemo(() => {
if (!data)
return []
const { allList } = data
const filteredByCategory = allList.filter((item) => {
if (currCategory === allCategoriesEn)
return true
@ -94,7 +98,7 @@ const Apps = ({
return true
return false
})
}, [currentType, currCategory, allCategoriesEn, allList])
}, [currentType, currCategory, allCategoriesEn, data])
const searchFilteredList = useMemo(() => {
if (!searchKeywords || !filteredList || filteredList.length === 0)
@ -156,7 +160,7 @@ const Apps = ({
}
}
if (!categories || categories.length === 0) {
if (isLoading) {
return (
<div className="flex h-full items-center">
<Loading type="area" />
@ -190,7 +194,7 @@ const Apps = ({
<div className="relative flex flex-1 overflow-y-auto">
{!searchKeywords && (
<div className="h-full w-[200px] p-4">
<Sidebar current={currCategory as AppCategories} categories={categories} onClick={(category) => { setCurrCategory(category) }} onCreateFromBlank={onCreateFromBlank} />
<Sidebar current={currCategory as AppCategories} categories={data?.categories || []} onClick={(category) => { setCurrCategory(category) }} onCreateFromBlank={onCreateFromBlank} />
</div>
)}
<div className="h-full flex-1 shrink-0 grow overflow-auto border-l border-divider-burn p-6 pt-2">

View File

@ -10,7 +10,9 @@ import AppList from './index'
const allCategoriesEn = 'explore.apps.allCategories:{"lng":"en"}'
let mockTabValue = allCategoriesEn
const mockSetTab = vi.fn()
let mockExploreData: { categories: string[], allList: App[] } = { categories: [], allList: [] }
let mockExploreData: { categories: string[], allList: App[] } | undefined = { categories: [], allList: [] }
let mockIsLoading = false
let mockIsError = false
const mockHandleImportDSL = vi.fn()
const mockHandleImportDSLConfirm = vi.fn()
@ -34,8 +36,11 @@ vi.mock('ahooks', async () => {
})
vi.mock('@/service/use-explore', () => ({
exploreAppListInitialData: { categories: [], allList: [] },
useExploreAppList: () => ({ data: mockExploreData }),
useExploreAppList: () => ({
data: mockExploreData,
isLoading: mockIsLoading,
isError: mockIsError,
}),
}))
vi.mock('@/service/explore', () => ({
@ -136,13 +141,16 @@ describe('AppList', () => {
vi.clearAllMocks()
mockTabValue = allCategoriesEn
mockExploreData = { categories: [], allList: [] }
mockIsLoading = false
mockIsError = false
})
// Rendering: show loading when categories are not ready.
describe('Rendering', () => {
it('should render loading when categories are empty', () => {
it('should render loading when the query is loading', () => {
// Arrange
mockExploreData = { categories: [], allList: [] }
mockExploreData = undefined
mockIsLoading = true
// Act
renderWithContext()

View File

@ -20,7 +20,7 @@ import {
DSLImportMode,
} from '@/models/app'
import { fetchAppDetail } from '@/service/explore'
import { exploreAppListInitialData, useExploreAppList } from '@/service/use-explore'
import { useExploreAppList } from '@/service/use-explore'
import { cn } from '@/utils/classnames'
import s from './style.module.css'
@ -28,11 +28,6 @@ type AppsProps = {
onSuccess?: () => void
}
export enum PageType {
EXPLORE = 'explore',
CREATE = 'create',
}
const Apps = ({
onSuccess,
}: AppsProps) => {
@ -58,10 +53,16 @@ const Apps = ({
})
const {
data: { categories, allList } = exploreAppListInitialData,
data,
isLoading,
isError,
} = useExploreAppList()
const filteredList = allList.filter(item => currCategory === allCategoriesEn || item.category === currCategory)
const filteredList = useMemo(() => {
if (!data)
return []
return data.allList.filter(item => currCategory === allCategoriesEn || item.category === currCategory)
}, [data, currCategory, allCategoriesEn])
const searchFilteredList = useMemo(() => {
if (!searchKeywords || !filteredList || filteredList.length === 0)
@ -119,7 +120,7 @@ const Apps = ({
})
}, [handleImportDSLConfirm, onSuccess])
if (!categories || categories.length === 0) {
if (isLoading) {
return (
<div className="flex h-full items-center">
<Loading type="area" />
@ -127,6 +128,11 @@ const Apps = ({
)
}
if (isError || !data)
return null
const { categories } = data
return (
<div className={cn(
'flex h-full flex-col border-l-[0.5px] border-divider-regular',

View File

@ -12,11 +12,6 @@ type ExploreAppListData = {
allList: App[]
}
export const exploreAppListInitialData: ExploreAppListData = {
categories: [],
allList: [],
}
export const useExploreAppList = () => {
return useQuery<ExploreAppListData>({
queryKey: [NAME_SPACE, 'appList'],
@ -27,7 +22,6 @@ export const useExploreAppList = () => {
allList: [...recommended_apps].sort((a, b) => a.position - b.position),
}
},
placeholderData: exploreAppListInitialData,
})
}