mirror of https://github.com/langgenius/dify.git
fix(web): remove incorrect placeholderData usage in useExploreAppList (#30102)
This commit is contained in:
parent
2f9d718997
commit
64a14dcdbc
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue