Implemented serverside pagination;

Enabled searchspace file mgmt panel to use serverside pagination;
This commit is contained in:
Natsume Ryuhane 2025-10-01 13:05:22 -07:00
parent 54326be56c
commit 797fe26f53
No known key found for this signature in database
7 changed files with 374 additions and 62 deletions

View file

@ -1,6 +1,7 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { toast } from "sonner";
import { normalizeListResponse } from "@/lib/pagination";
export interface Document {
id: number;
@ -29,43 +30,79 @@ export type DocumentType =
| "GOOGLE_GMAIL_CONNECTOR"
| "AIRTABLE_CONNECTOR";
export function useDocuments(searchSpaceId: number, lazy: boolean = false) {
export interface UseDocumentsOptions {
page?: number;
pageSize?: number;
lazy?: boolean;
}
export function useDocuments(
searchSpaceId: number,
options?: UseDocumentsOptions | boolean
) {
// Support both old boolean API and new options API for backward compatibility
const opts = typeof options === "boolean" ? { lazy: options } : options || {};
const { page, pageSize = 300, lazy = false } = opts;
const [documents, setDocuments] = useState<Document[]>([]);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(!lazy); // Don't show loading initially for lazy mode
const [error, setError] = useState<string | null>(null);
const [isLoaded, setIsLoaded] = useState(false); // Memoization flag
const fetchDocuments = useCallback(async () => {
if (isLoaded && lazy) return; // Avoid redundant calls in lazy mode
const fetchDocuments = useCallback(
async (fetchPage?: number, fetchPageSize?: number) => {
if (isLoaded && lazy) return; // Avoid redundant calls in lazy mode
try {
setLoading(true);
const response = await fetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents?search_space_id=${searchSpaceId}`,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
},
method: "GET",
try {
setLoading(true);
// Build query params
const params = new URLSearchParams({
search_space_id: searchSpaceId.toString(),
});
// Use passed parameters or fall back to state/options
const effectivePage = fetchPage !== undefined ? fetchPage : page;
const effectivePageSize = fetchPageSize !== undefined ? fetchPageSize : pageSize;
if (effectivePage !== undefined) {
params.append("page", effectivePage.toString());
}
if (effectivePageSize !== undefined) {
params.append("page_size", effectivePageSize.toString());
}
);
if (!response.ok) {
toast.error("Failed to fetch documents");
throw new Error("Failed to fetch documents");
const response = await fetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents?${params.toString()}`,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
},
method: "GET",
}
);
if (!response.ok) {
toast.error("Failed to fetch documents");
throw new Error("Failed to fetch documents");
}
const data = await response.json();
const normalized = normalizeListResponse<Document>(data);
setDocuments(normalized.items);
setTotal(normalized.total);
setError(null);
setIsLoaded(true);
} catch (err: any) {
setError(err.message || "Failed to fetch documents");
console.error("Error fetching documents:", err);
} finally {
setLoading(false);
}
const data = await response.json();
setDocuments(data);
setError(null);
setIsLoaded(true);
} catch (err: any) {
setError(err.message || "Failed to fetch documents");
console.error("Error fetching documents:", err);
} finally {
setLoading(false);
}
}, [searchSpaceId, isLoaded, lazy]);
},
[searchSpaceId, page, pageSize, isLoaded, lazy]
);
useEffect(() => {
if (!lazy && searchSpaceId) {
@ -79,6 +116,64 @@ export function useDocuments(searchSpaceId: number, lazy: boolean = false) {
await fetchDocuments();
}, [fetchDocuments]);
// Function to search documents by title
const searchDocuments = useCallback(
async (searchQuery: string, fetchPage?: number, fetchPageSize?: number) => {
if (!searchQuery.trim()) {
// If search is empty, fetch all documents
return fetchDocuments(fetchPage, fetchPageSize);
}
try {
setLoading(true);
// Build query params
const params = new URLSearchParams({
search_space_id: searchSpaceId.toString(),
title: searchQuery,
});
// Use passed parameters or fall back to state/options
const effectivePage = fetchPage !== undefined ? fetchPage : page;
const effectivePageSize = fetchPageSize !== undefined ? fetchPageSize : pageSize;
if (effectivePage !== undefined) {
params.append("page", effectivePage.toString());
}
if (effectivePageSize !== undefined) {
params.append("page_size", effectivePageSize.toString());
}
const response = await fetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents/search/?${params.toString()}`,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
},
method: "GET",
}
);
if (!response.ok) {
toast.error("Failed to search documents");
throw new Error("Failed to search documents");
}
const data = await response.json();
const normalized = normalizeListResponse<Document>(data);
setDocuments(normalized.items);
setTotal(normalized.total);
setError(null);
} catch (err: any) {
setError(err.message || "Failed to search documents");
console.error("Error searching documents:", err);
} finally {
setLoading(false);
}
},
[searchSpaceId, page, pageSize, fetchDocuments]
);
// Function to delete a document
const deleteDocument = useCallback(
async (documentId: number) => {
@ -113,10 +208,12 @@ export function useDocuments(searchSpaceId: number, lazy: boolean = false) {
return {
documents,
total,
loading,
error,
isLoaded,
fetchDocuments, // Manual fetch function for lazy mode
searchDocuments, // Search function
refreshDocuments,
deleteDocument,
};