fix: dataset setting (#183)

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx

@@ -3,7 +3,13 @@ import { getLocaleOnServer } from '@/i18n/server'
 import { useTranslation } from '@/i18n/i18next-serverside-config'
 import Form from '@/app/components/datasets/settings/form'
 
-const Settings = async () => {
+type Props = {
+  params: { datasetId: string }
+}
+
+const Settings = async ({
+  params: { datasetId },
+}: Props) => {
   const locale = getLocaleOnServer()
   const { t } = await useTranslation(locale, 'dataset-settings')
 
@@ -14,7 +20,7 @@ const Settings = async () => {
         <div className='text-sm text-gray-500'>{t('desc')}</div>
       </div>
       <div>
-        <Form />
+        <Form datasetId={datasetId} />
       </div>
     </div>
   )

web/app/components/datasets/settings/form/index.tsx

@@ -1,5 +1,6 @@
 'use client'
-import { useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import useSWR from 'swr'
 import { useContext } from 'use-context-selector'
 import { BookOpenIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
@@ -7,8 +8,8 @@ import { ToastContext } from '@/app/components/base/toast'
 import PermissionsRadio from '../permissions-radio'
 import IndexMethodRadio from '../index-method-radio'
 import Button from '@/app/components/base/button'
-import { useDatasetsContext } from '@/context/datasets-context'
-import { updateDatasetSetting } from '@/service/datasets'
+import { updateDatasetSetting, fetchDataDetail } from '@/service/datasets'
+import { DataSet } from '@/models/datasets'
 
 const rowClass = `
   flex justify-between py-4
@@ -20,13 +21,25 @@ const inputClass = `
   w-[480px] px-3 bg-gray-100 text-sm text-gray-800 rounded-lg outline-none appearance-none
 `
 
-const Form = () => {
+const useInitialValue = <T,>(depend: T, dispatch: Dispatch<SetStateAction<T>>) => {
+  useEffect(() => {
+    dispatch(depend)
+  }, [depend])
+}
+
+type Props = {
+  datasetId: string
+}
+
+const Form = ({
+  datasetId
+}: Props) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
-  const { currentDataset, mutateDatasets } = useDatasetsContext()
+  const { data: currentDataset, mutate: mutateDatasets } = useSWR(datasetId, fetchDataDetail)
   const [loading, setLoading] = useState(false)
-  const [name, setName] = useState(currentDataset?.name)
-  const [description, setDescription] = useState(currentDataset?.description)
+  const [name, setName] = useState(currentDataset?.name ?? '')
+  const [description, setDescription] = useState(currentDataset?.description ?? '')
   const [permission, setPermission] = useState(currentDataset?.permission)
   const [indexMethod, setIndexMethod] = useState(currentDataset?.indexing_technique)
 
@@ -48,7 +61,7 @@ const Form = () => {
         }
       })
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
-      mutateDatasets()
+      await mutateDatasets()
     } catch (e) {
       notify({ type: 'error', message: t('common.actionMsg.modificationFailed') })
     } finally {
@@ -56,6 +69,11 @@ const Form = () => {
     }
   }
 
+  useInitialValue<string>(currentDataset?.name ?? '', setName)
+  useInitialValue<string>(currentDataset?.description ?? '', setDescription)
+  useInitialValue<DataSet['permission'] | undefined>(currentDataset?.permission, setPermission)
+  useInitialValue<DataSet['indexing_technique'] | undefined>(currentDataset?.indexing_technique, setIndexMethod)
+
   return (
     <div className='w-[800px] px-16 py-6'>
       <div className={rowClass}>