(feat:chunks) server-side filter on search

This commit is contained in:
ManishMadan2882
2025-07-25 01:43:50 +05:30
parent 8ede3a0173
commit 58465ece65
4 changed files with 66 additions and 23 deletions

View File

@@ -43,8 +43,11 @@ const endpoints = {
page: number,
per_page: number,
path?: string,
search?: string,
) =>
`/api/get_chunks?id=${docId}&page=${page}&per_page=${per_page}${path ? `&path=${encodeURIComponent(path)}` : ''}`,
`/api/get_chunks?id=${docId}&page=${page}&per_page=${per_page}${
path ? `&path=${encodeURIComponent(path)}` : ''
}${search ? `&search=${encodeURIComponent(search)}` : ''}`,
ADD_CHUNK: '/api/add_chunk',
DELETE_CHUNK: (docId: string, chunkId: string) =>
`/api/delete_chunk?id=${docId}&chunk_id=${chunkId}`,

View File

@@ -87,8 +87,9 @@ const userService = {
perPage: number,
token: string | null,
path?: string,
search?: string,
): Promise<any> =>
apiClient.get(endpoints.USER.GET_CHUNKS(docId, page, perPage, path), token),
apiClient.get(endpoints.USER.GET_CHUNKS(docId, page, perPage, path, search), token),
addChunk: (data: any, token: string | null): Promise<any> =>
apiClient.post(endpoints.USER.ADD_CHUNK, data, token),
deleteChunk: (

View File

@@ -116,7 +116,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
setLoading(true);
try {
userService
.getDocumentChunks(documentId, page, perPage, token, path)
.getDocumentChunks(documentId, page, perPage, token, path, searchTerm)
.then((response) => {
if (!response.ok) {
setLoading(false);
@@ -131,10 +131,14 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
setTotalChunks(data.total);
setPaginatedChunks(data.chunks);
setLoading(false);
})
.catch((error) => {
setLoading(false);
setPaginatedChunks([]);
});
} catch (e) {
console.log(e);
setLoading(false);
setPaginatedChunks([]);
}
};
@@ -221,16 +225,34 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
setChunkToDelete(null);
};
useEffect(() => {
const delayDebounceFn = setTimeout(() => {
if (page !== 1) {
setPage(1);
} else {
fetchChunks();
}
}, 300);
return () => clearTimeout(delayDebounceFn);
}, [searchTerm]);
useEffect(() => {
fetchChunks();
}, [page, perPage, path]);
useEffect(() => {
setSearchTerm('');
setPage(1);
}, [path]);
// Remove the client-side filtering
// const filteredChunks = paginatedChunks.filter((chunk) => {
// if (!chunk.metadata?.title) return true;
// return chunk.metadata.title
// .toLowerCase()
// .includes(searchTerm.toLowerCase());
// });
const filteredChunks = paginatedChunks.filter((chunk) => {
if (!chunk.metadata?.title) return true;
return chunk.metadata.title
.toLowerCase()
.includes(searchTerm.toLowerCase());
});
// Use the server-filtered chunks directly
const filteredChunks = paginatedChunks;
const renderPathNavigation = () => {
return (
@@ -367,7 +389,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
<Spinner />
</div>
) : (
<div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
{filteredChunks.length === 0 ? (
<div className="col-span-full flex flex-col items-center justify-center mt-24 text-center text-gray-500 dark:text-gray-400">
<img
@@ -442,7 +464,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
</div>
)}
{!loading && filteredChunks.length > 0 && !editingChunk && !isAddingChunk && (
{!loading && totalChunks > perPage && !editingChunk && !isAddingChunk && (
<Pagination
currentPage={page}
totalPages={Math.ceil(totalChunks / perPage)}