From 59236b789f09ca0079c446fcd20413d450e46cab Mon Sep 17 00:00:00 2001 From: KVOJJJin Date: Wed, 27 Sep 2023 10:31:46 +0800 Subject: [PATCH] Fix: dataset list refresh (#1216) --- .../[datasetId]/layout.tsx | 8 +++--- web/app/(commonLayout)/datasets/Datasets.tsx | 2 +- web/app/components/datasets/create/index.tsx | 6 ++--- .../datasets/settings/form/index.tsx | 26 ++++++++++++------- .../components/header/dataset-nav/index.tsx | 13 +++++++--- web/service/datasets.ts | 2 +- 6 files changed, 34 insertions(+), 23 deletions(-) diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx index bf205820ee..525e1199c4 100644 --- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx +++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx @@ -19,7 +19,7 @@ import { } from '@heroicons/react/24/solid' import Link from 'next/link' import s from './style.module.css' -import { fetchDataDetail, fetchDatasetRelatedApps } from '@/service/datasets' +import { fetchDatasetDetail, fetchDatasetRelatedApps } from '@/service/datasets' import type { RelatedApp } from '@/models/datasets' import { getLocaleOnClient } from '@/i18n/client' import AppSideBar from '@/app/components/app-sidebar' @@ -30,8 +30,6 @@ import Loading from '@/app/components/base/loading' import DatasetDetailContext from '@/context/dataset-detail' import { DataSourceType } from '@/models/datasets' -// import { fetchDatasetDetail } from '@/service/datasets' - export type IAppDetailLayoutProps = { children: React.ReactNode params: { datasetId: string } @@ -94,9 +92,9 @@ const DatasetDetailLayout: FC = (props) => { const hideSideBar = /documents\/create$/.test(pathname) const { t } = useTranslation() const { data: datasetRes, error, mutate: mutateDatasetRes } = useSWR({ - action: 'fetchDataDetail', + url: 'fetchDatasetDetail', datasetId, - }, apiParams => fetchDataDetail(apiParams.datasetId)) + }, apiParams => fetchDatasetDetail(apiParams.datasetId)) const { data: relatedApps } = useSWR({ action: 'fetchDatasetRelatedApps', diff --git a/web/app/(commonLayout)/datasets/Datasets.tsx b/web/app/(commonLayout)/datasets/Datasets.tsx index 8b5327a10d..3d3ecf91b7 100644 --- a/web/app/(commonLayout)/datasets/Datasets.tsx +++ b/web/app/(commonLayout)/datasets/Datasets.tsx @@ -17,7 +17,7 @@ const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => { const Datasets = () => { const { isCurrentWorkspaceManager } = useAppContext() - const { data, isLoading, setSize, mutate } = useSWRInfinite(getKey, fetchDatasets, { revalidateFirstPage: false }) + const { data, isLoading, setSize, mutate } = useSWRInfinite(getKey, fetchDatasets, { revalidateFirstPage: false, revalidateAll: true }) const loadingStateRef = useRef(false) const pageContainerRef = useSelector(state => state.pageContainerRef) const anchorRef = useRef(null) diff --git a/web/app/components/datasets/create/index.tsx b/web/app/components/datasets/create/index.tsx index 965477d039..5fdebe317f 100644 --- a/web/app/components/datasets/create/index.tsx +++ b/web/app/components/datasets/create/index.tsx @@ -10,7 +10,7 @@ import StepThree from './step-three' import { DataSourceType } from '@/models/datasets' import type { DataSet, FileItem, createDocumentResponse } from '@/models/datasets' import { fetchDataSource } from '@/service/common' -import { fetchDataDetail } from '@/service/datasets' +import { fetchDatasetDetail } from '@/service/datasets' import type { NotionPage } from '@/models/common' import { useProviderContext } from '@/context/provider-context' @@ -91,7 +91,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => { (async () => { if (datasetId) { try { - const detail = await fetchDataDetail(datasetId) + const detail = await fetchDatasetDetail(datasetId) setDetail(detail) } catch (e) { @@ -151,4 +151,4 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => { ) } -export default DatasetUpdateForm \ No newline at end of file +export default DatasetUpdateForm diff --git a/web/app/components/datasets/settings/form/index.tsx b/web/app/components/datasets/settings/form/index.tsx index 07d0c3715b..8a81a406aa 100644 --- a/web/app/components/datasets/settings/form/index.tsx +++ b/web/app/components/datasets/settings/form/index.tsx @@ -1,21 +1,23 @@ 'use client' import { useEffect, useState } from 'react' import type { Dispatch } from 'react' -import useSWR from 'swr' import { useContext } from 'use-context-selector' import { BookOpenIcon } from '@heroicons/react/24/outline' import { useTranslation } from 'react-i18next' import cn from 'classnames' +import { useSWRConfig } from 'swr' +import { unstable_serialize } from 'swr/infinite' import PermissionsRadio from '../permissions-radio' import IndexMethodRadio from '../index-method-radio' import { ToastContext } from '@/app/components/base/toast' import Button from '@/app/components/base/button' -import { fetchDataDetail, updateDatasetSetting } from '@/service/datasets' -import type { DataSet } from '@/models/datasets' +import { updateDatasetSetting } from '@/service/datasets' +import type { DataSet, DataSetListResponse } from '@/models/datasets' import ModelSelector from '@/app/components/header/account-setting/model-page/model-selector' import type { ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations' import { ModelType } from '@/app/components/header/account-setting/model-page/declarations' import AccountSetting from '@/app/components/header/account-setting' +import DatasetDetailContext from '@/context/dataset-detail' const rowClass = ` flex justify-between py-4 @@ -32,16 +34,17 @@ const useInitialValue: (depend: T, dispatch: Dispatch) => void = (depend, }, [depend]) } -type Props = { - datasetId: string +const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => { + if (!pageIndex || previousPageData.has_more) + return { url: 'datasets', params: { page: pageIndex + 1, limit: 30 } } + return null } -const Form = ({ - datasetId, -}: Props) => { +const Form = () => { const { t } = useTranslation() const { notify } = useContext(ToastContext) - const { data: currentDataset, mutate: mutateDatasets } = useSWR(datasetId, fetchDataDetail) + const { mutate } = useSWRConfig() + const { dataset: currentDataset, mutateDatasetRes: mutateDatasets } = useContext(DatasetDetailContext) const [loading, setLoading] = useState(false) const [name, setName] = useState(currentDataset?.name ?? '') const [description, setDescription] = useState(currentDataset?.description ?? '') @@ -67,7 +70,10 @@ const Form = ({ }, }) notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') }) - await mutateDatasets() + if (mutateDatasets) { + await mutateDatasets() + mutate(unstable_serialize(getKey)) + } } catch (e) { notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') }) diff --git a/web/app/components/header/dataset-nav/index.tsx b/web/app/components/header/dataset-nav/index.tsx index c96a0512e6..f51af8f8ad 100644 --- a/web/app/components/header/dataset-nav/index.tsx +++ b/web/app/components/header/dataset-nav/index.tsx @@ -7,7 +7,7 @@ import useSWR from 'swr' import useSWRInfinite from 'swr/infinite' import { flatten } from 'lodash-es' import Nav from '../nav' -import { fetchDataDetail, fetchDatasets } from '@/service/datasets' +import { fetchDatasetDetail, fetchDatasets } from '@/service/datasets' import { Database01 } from '@/app/components/base/icons/src/vender/line/development' import { Database02 } from '@/app/components/base/icons/src/vender/solid/development' import type { DataSetListResponse } from '@/models/datasets' @@ -22,8 +22,15 @@ const DatasetNav = () => { const { t } = useTranslation() const router = useRouter() const { datasetId } = useParams() - const { data: currentDataset } = useSWR(datasetId || null, fetchDataDetail) - const { data: datasetsData, setSize } = useSWRInfinite(datasetId ? getKey : () => null, fetchDatasets, { revalidateFirstPage: true }) + const { data: currentDataset } = useSWR( + datasetId + ? { + url: 'fetchDatasetDetail', + datasetId, + } + : null, + apiParams => fetchDatasetDetail(apiParams.datasetId)) + const { data: datasetsData, setSize } = useSWRInfinite(datasetId ? getKey : () => null, fetchDatasets, { revalidateFirstPage: false, revalidateAll: true }) const datasetItems = flatten(datasetsData?.map(datasetData => datasetData.data)) const handleLoadmore = useCallback(() => { diff --git a/web/service/datasets.ts b/web/service/datasets.ts index 5fd45c1daa..e9c74a82c0 100644 --- a/web/service/datasets.ts +++ b/web/service/datasets.ts @@ -39,7 +39,7 @@ export type SortType = 'created_at' | 'hit_count' | '-created_at' | '-hit_count' export type MetadataType = 'all' | 'only' | 'without' -export const fetchDataDetail: Fetcher = (datasetId: string) => { +export const fetchDatasetDetail: Fetcher = (datasetId: string) => { return get(`/datasets/${datasetId}`) }