fix: Change document status with @tanstack/react-query #13306 (#2788)

### What problem does this PR solve?

fix: Change document status with @tanstack/react-query #13306

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
- [ ] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/components/file-icon/index.tsx

@@ -1,7 +1,8 @@
 import { getExtension } from '@/utils/document-util';
 import SvgIcon from '../svg-icon';
 
-import { useSelectFileThumbnails } from '@/hooks/knowledge-hooks';
+import { useFetchDocumentThumbnailsByIds } from '@/hooks/document-hooks';
+import { useEffect } from 'react';
 import styles from './index.less';
 
 interface IProps {
@@ -11,10 +12,15 @@ interface IProps {
 
 const FileIcon = ({ name, id }: IProps) => {
   const fileExtension = getExtension(name);
-  // TODO: replace this line with react query
-  const fileThumbnails = useSelectFileThumbnails();
+
+  const { data: fileThumbnails, setDocumentIds } =
+    useFetchDocumentThumbnailsByIds();
   const fileThumbnail = fileThumbnails[id];
 
+  useEffect(() => {
+    setDocumentIds([id]);
+  }, [id, setDocumentIds]);
+
   return fileThumbnail ? (
     <img src={fileThumbnail} className={styles.thumbnailImg}></img>
   ) : (