fix: choose dataset not selected after one page (#481)

web/app/components/app/configuration/dataset-config/index.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useBoolean } from 'ahooks'
 import { isEqual } from 'lodash-es'
+import produce from 'immer'
 import FeaturePanel from '../base/feature-panel'
 import OperationBtn from '../base/operation-btn'
 import CardItem from './card-item'
@@ -31,11 +32,27 @@ const DatasetConfig: FC = () => {
   const hasData = dataSet.length > 0
   const [isShowSelectDataSet, { setTrue: showSelectDataSet, setFalse: hideSelectDataSet }] = useBoolean(false)
   const handleSelect = (data: DataSet[]) => {
-    if (isEqual(data, dataSet))
+    if (isEqual(data.map(item => item.id), dataSet.map(item => item.id))) {
       hideSelectDataSet()
+      return
+    }
 
     setFormattingChanged(true)
+    if (data.find(item => !item.name)) { // has not loaded selected dataset
+      const newSelected = produce(data, (draft) => {
+        data.forEach((item, index) => {
+          if (!item.name) { // not fetched database
+            const newItem = dataSet.find(i => i.id === item.id)
+            if (newItem)
+              draft[index] = newItem
+          }
+        })
+      })
+      setDataSet(newSelected)
+    }
+    else {
       setDataSet(data)
+    }
     hideSelectDataSet()
   }
   const onRemove = (id: string) => {

web/app/components/app/configuration/dataset-config/select-dataset/index.tsx

@@ -5,6 +5,7 @@ import { useGetState, useInfiniteScroll } from 'ahooks'
 import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
+import produce from 'immer'
 import TypeIcon from '../type-icon'
 import s from './style.module.css'
 import Modal from '@/app/components/base/modal'
@@ -28,7 +29,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
   onSelect,
 }) => {
   const { t } = useTranslation()
-  const [selected, setSelected] = React.useState<DataSet[]>([])
+  const [selected, setSelected] = React.useState<DataSet[]>(selectedIds.map(id => ({ id }) as any))
   const [loaded, setLoaded] = React.useState(false)
   const [datasets, setDataSets] = React.useState<DataSet[] | null>(null)
   const hasNoData = !datasets || datasets?.length === 0
@@ -47,7 +48,19 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
         const newList = [...(datasets || []), ...data]
         setDataSets(newList)
         setLoaded(true)
-        setSelected(newList.filter(item => selectedIds.includes(item.id)))
+        if (!selected.find(item => !item.name))
+          return { list: [] }
+
+        const newSelected = produce(selected, (draft) => {
+          selected.forEach((item, index) => {
+            if (!item.name) { // not fetched database
+              const newItem = newList.find(i => i.id === item.id)
+              if (newItem)
+                draft[index] = newItem
+            }
+          })
+        })
+        setSelected(newSelected)
       }
       return { list: [] }
     },