From 8322cbbd9f66aed224736f98e662c3fd3e274641 Mon Sep 17 00:00:00 2001
From: Nguyen Huu Tho <nghuutho74@gmail.com>
Date: Sat, 8 Mar 2025 14:38:35 +0700
Subject: [PATCH 1/2] fix: dataset pagination state keeps resetting when
 filters changed

---
 web/app/(commonLayout)/datasets/Datasets.tsx | 29 ++++++++++++--------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/web/app/(commonLayout)/datasets/Datasets.tsx b/web/app/(commonLayout)/datasets/Datasets.tsx
index ea918a2b17d763..f889963e66f78a 100644
--- a/web/app/(commonLayout)/datasets/Datasets.tsx
+++ b/web/app/(commonLayout)/datasets/Datasets.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useCallback } from 'react'
 import useSWRInfinite from 'swr/infinite'
 import { debounce } from 'lodash-es'
 import { useTranslation } from 'react-i18next'
@@ -62,21 +62,28 @@ const Datasets = ({
   useEffect(() => {
     loadingStateRef.current = isLoading
     document.title = `${t('dataset.knowledge')} - Dify`
-  }, [isLoading])
+  }, [isLoading, t])
 
-  useEffect(() => {
-    const onScroll = debounce(() => {
-      if (!loadingStateRef.current) {
-        const { scrollTop, clientHeight } = containerRef.current!
-        const anchorOffset = anchorRef.current!.offsetTop
+  const onScroll = useCallback(
+    debounce(() => {
+      if (!loadingStateRef.current && containerRef.current && anchorRef.current) {
+        const { scrollTop, clientHeight } = containerRef.current
+        const anchorOffset = anchorRef.current.offsetTop
         if (anchorOffset - scrollTop - clientHeight < 100)
           setSize(size => size + 1)
       }
-    }, 50)
+    }, 50),
+    [setSize]
+  )
 
-    containerRef.current?.addEventListener('scroll', onScroll)
-    return () => containerRef.current?.removeEventListener('scroll', onScroll)
-  }, [])
+  useEffect(() => {
+    const currentContainer = containerRef.current
+    currentContainer?.addEventListener('scroll', onScroll)
+    return () => {
+      currentContainer?.removeEventListener('scroll', onScroll)
+      onScroll.cancel()
+    }
+  }, [onScroll])
 
   return (
     <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>

From 4407093fde6ce0e9a2e8c957a2b33a3a78e7714e Mon Sep 17 00:00:00 2001
From: Nguyen Huu Tho <nghuutho74@gmail.com>
Date: Sat, 8 Mar 2025 15:43:24 +0700
Subject: [PATCH 2/2] fix: style check failed

---
 web/app/(commonLayout)/datasets/Datasets.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/app/(commonLayout)/datasets/Datasets.tsx b/web/app/(commonLayout)/datasets/Datasets.tsx
index f889963e66f78a..ff0845d84a3368 100644
--- a/web/app/(commonLayout)/datasets/Datasets.tsx
+++ b/web/app/(commonLayout)/datasets/Datasets.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef, useCallback } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import useSWRInfinite from 'swr/infinite'
 import { debounce } from 'lodash-es'
 import { useTranslation } from 'react-i18next'
@@ -73,7 +73,7 @@ const Datasets = ({
           setSize(size => size + 1)
       }
     }, 50),
-    [setSize]
+    [setSize],
   )
 
   useEffect(() => {