Datasets.tsx 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. 'use client'
  2. import { useCallback, useEffect, useRef } from 'react'
  3. import useSWRInfinite from 'swr/infinite'
  4. import { debounce } from 'lodash-es'
  5. import { useTranslation } from 'react-i18next'
  6. import NewDatasetCard from './NewDatasetCard'
  7. import DatasetCard from './DatasetCard'
  8. import type { DataSetListResponse, FetchDatasetsParams } from '@/models/datasets'
  9. import { fetchDatasets } from '@/service/datasets'
  10. import { useAppContext } from '@/context/app-context'
  11. const getKey = (
  12. pageIndex: number,
  13. previousPageData: DataSetListResponse,
  14. tags: string[],
  15. keyword: string,
  16. includeAll: boolean,
  17. type: string,
  18. dept: string,
  19. authType: string,
  20. ) => {
  21. if (!pageIndex || previousPageData.has_more) {
  22. const params: FetchDatasetsParams = {
  23. url: 'datasets',
  24. params: {
  25. page: pageIndex + 1,
  26. limit: 30,
  27. include_all: includeAll,
  28. },
  29. }
  30. if (tags.length)
  31. params.params.tag_ids = tags
  32. if (keyword)
  33. params.params.keyword = keyword
  34. if (type)
  35. params.params.category_ids = [type]
  36. if (dept)
  37. params.params.creatorDept = dept
  38. if (authType)
  39. params.params.authType = authType
  40. return params
  41. }
  42. return null
  43. }
  44. type Props = {
  45. containerRef: React.RefObject<HTMLDivElement>
  46. tags: string[]
  47. keywords: string
  48. includeAll: boolean,
  49. type: string,
  50. dept: string,
  51. authType: string,
  52. }
  53. const Datasets = ({
  54. containerRef,
  55. tags,
  56. keywords,
  57. includeAll,
  58. type,
  59. dept,
  60. authType,
  61. }: Props) => {
  62. const { isCurrentWorkspaceEditor } = useAppContext()
  63. const { data, isLoading, setSize, mutate } = useSWRInfinite(
  64. (pageIndex: number, previousPageData: DataSetListResponse) => getKey(pageIndex, previousPageData, tags, keywords, includeAll, type, dept, authType),
  65. fetchDatasets,
  66. { revalidateFirstPage: false, revalidateAll: true },
  67. )
  68. const loadingStateRef = useRef(false)
  69. const anchorRef = useRef<HTMLAnchorElement>(null)
  70. const { t } = useTranslation()
  71. useEffect(() => {
  72. loadingStateRef.current = isLoading
  73. document.title = `${t('dataset.knowledge')} - Dify`
  74. }, [isLoading, t])
  75. const onScroll = useCallback(
  76. debounce(() => {
  77. if (!loadingStateRef.current && containerRef.current && anchorRef.current) {
  78. const { scrollTop, clientHeight } = containerRef.current
  79. const anchorOffset = anchorRef.current.offsetTop
  80. if (anchorOffset - scrollTop - clientHeight < 100)
  81. setSize(size => size + 1)
  82. }
  83. }, 50),
  84. [setSize],
  85. )
  86. useEffect(() => {
  87. const currentContainer = containerRef.current
  88. currentContainer?.addEventListener('scroll', onScroll)
  89. return () => {
  90. currentContainer?.removeEventListener('scroll', onScroll)
  91. onScroll.cancel()
  92. }
  93. }, [onScroll])
  94. return (
  95. <nav className='grid shrink-0 grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
  96. { isCurrentWorkspaceEditor && <NewDatasetCard ref={anchorRef} /> }
  97. {data?.map(({ data: datasets }) => datasets.map(dataset => (
  98. <DatasetCard key={dataset.id} dataset={dataset} onSuccess={mutate}/>),
  99. ))}
  100. </nav>
  101. )
  102. }
  103. export default Datasets