fix: refresh list on delete (#178)

web/app/(commonLayout)/apps/AppCard.tsx

@@ -16,10 +16,12 @@ import AppsContext from '@/context/app-context'
 
 export type AppCardProps = {
   app: App
+  onDelete?: () => void
 }
 
 const AppCard = ({
   app,
+  onDelete
 }: AppCardProps) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
@@ -35,6 +37,8 @@ const AppCard = ({
     try {
       await deleteApp(app.id)
       notify({ type: 'success', message: t('app.appDeleted') })
+      if (onDelete)
+        onDelete()
       mutateApps()
     }
     catch (e: any) {
@@ -47,7 +51,7 @@ const AppCard = ({
     <>
       <Link href={`/app/${app.id}/overview`} className={style.listItem}>
         <div className={style.listItemTitle}>
-          <AppIcon size='small' icon={app.icon} background={app.icon_background}/>
+          <AppIcon size='small' icon={app.icon} background={app.icon_background} />
           <div className={style.listItemHeading}>
             <div className={style.listItemHeadingContent}>{app.name}</div>
           </div>

web/app/(commonLayout)/apps/Apps.tsx

@@ -42,7 +42,9 @@ const Apps = () => {
 
   return (
     <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-8 sm:grid-cols-2 lg:grid-cols-4 grow shrink-0'>
-      {data?.map(({ data: apps }) => apps.map(app => (<AppCard key={app.id} app={app} />)))}
+      {data?.map(({ data: apps }) => apps.map(app => (
+        <AppCard key={app.id} app={app} onDelete={mutate} />
+      )))}
       <NewAppCard ref={anchorRef} onSuccess={mutate} />
     </nav>
   )

web/app/(commonLayout)/datasets/DatasetCard.tsx

@@ -18,16 +18,16 @@ import classNames from 'classnames'
 
 export type DatasetCardProps = {
   dataset: DataSet
+  onDelete?: () => void
 }
 
 const DatasetCard = ({
   dataset,
+  onDelete
 }: DatasetCardProps) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
 
-  const { mutate: mutateDatasets } = useSWR({ url: '/datasets', params: { page: 1 } }, fetchDatasets)
-
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
   const onDeleteClick: MouseEventHandler = useCallback((e) => {
     e.preventDefault()
@@ -37,7 +37,8 @@ const DatasetCard = ({
     try {
       await deleteDataset(dataset.id)
       notify({ type: 'success', message: t('dataset.datasetDeleted') })
-      mutateDatasets()
+      if (onDelete)
+        onDelete()
     }
     catch (e: any) {
       notify({ type: 'error', message: `${t('dataset.datasetDeleteFailed')}${'message' in e ? `: ${e.message}` : ''}` })

web/app/(commonLayout)/datasets/Datasets.tsx

@@ -42,7 +42,9 @@ const Datasets = () => {
 
   return (
     <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-8 sm:grid-cols-2 lg:grid-cols-4 grow shrink-0'>
-      {data?.map(({ data: datasets }) => datasets.map(dataset => (<DatasetCard key={dataset.id} dataset={dataset} />)))}
+      {data?.map(({ data: datasets }) => datasets.map(dataset => (
+        <DatasetCard key={dataset.id} dataset={dataset} onDelete={mutate} />)
+      ))}
       <NewDatasetCard ref={anchorRef} />
     </nav>
   )