apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-22 23:31:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui): Fix pagination for documents #320 fixed

Browse source
This commit is contained in:
sanwalsulehri 2025-09-18 20:04:32 +05:00
parent 40b5161a52
commit b11bec1c65
2 changed files with 99 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

55
surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
View file

@ -26,8 +26,11 @@ export default function DocumentsTable() {
const params = useParams(); const params = useParams();
const searchSpaceId = Number(params.search_space_id); const searchSpaceId = Number(params.search_space_id);
const { documents, loading, error, refreshDocuments, deleteDocument } = const [pageIndex, setPageIndex] = useState(0);
useDocuments(searchSpaceId); const [pageSize, setPageSize] = useState(10);
const { documents, loading, error, refreshDocuments, deleteDocument, hasMore } =
useDocuments(searchSpaceId, { pageIndex, pageSize });
const [data, setData] = useState<Document[]>([]); const [data, setData] = useState<Document[]>([]);
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
@ -39,8 +42,7 @@ export default function DocumentsTable() {
content: true, content: true,
created_at: true, created_at: true,
}); });
const [pageIndex, setPageIndex] = useState(0); // pageIndex/pageSize state moved above to feed the hook
const [pageSize, setPageSize] = useState(10);
const [sortKey, setSortKey] = useState<SortKey>("title"); const [sortKey, setSortKey] = useState<SortKey>("title");
const [sortDesc, setSortDesc] = useState(false); const [sortDesc, setSortDesc] = useState(false);
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set()); const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
@ -61,10 +63,11 @@ export default function DocumentsTable() {
return result; return result;
}, [data, debouncedSearch, activeTypes]); }, [data, debouncedSearch, activeTypes]);
const total = filtered.length; // Server-side pagination: we filter only the current page's data client-side
const pageStart = pageIndex * pageSize; const pageDocs = filtered;
const pageEnd = Math.min(pageStart + pageSize, total); const total = pageIndex * pageSize + pageDocs.length + (hasMore ? 1 : 0) - 1;
const pageDocs = filtered.slice(pageStart, pageEnd); const pageStart = pageIndex * pageSize;
const pageEnd = pageStart + pageDocs.length;
const onToggleType = (type: string, checked: boolean) => { const onToggleType = (type: string, checked: boolean) => {
setActiveTypes((prev) => (checked ? [...prev, type] : prev.filter((t) => t !== type))); setActiveTypes((prev) => (checked ? [...prev, type] : prev.filter((t) => t !== type)));
@ -151,16 +154,32 @@ export default function DocumentsTable() {
pageIndex={pageIndex} pageIndex={pageIndex}
pageSize={pageSize} pageSize={pageSize}
total={total} total={total}
onPageSizeChange={(s) => { onPageSizeChange={async (s) => {
setPageSize(s); setPageIndex(0);
setPageIndex(0); setPageSize(s);
}} await refreshDocuments?.({ pageIndex: 0, pageSize: s });
onFirst={() => setPageIndex(0)} }}
onPrev={() => setPageIndex((i) => Math.max(0, i - 1))} onFirst={async () => {
onNext={() => setPageIndex((i) => (pageEnd < total ? i + 1 : i))} setPageIndex(0);
onLast={() => setPageIndex(Math.max(0, Math.ceil(total / pageSize) - 1))} await refreshDocuments?.({ pageIndex: 0, pageSize });
canPrev={pageIndex > 0} }}
canNext={pageEnd < total} onPrev={async () => {
const next = Math.max(0, pageIndex - 1);
if (next !== pageIndex) {
setPageIndex(next);
await refreshDocuments?.({ pageIndex: next, pageSize });
}
}}
onNext={async () => {
if (hasMore) {
const next = pageIndex + 1;
setPageIndex(next);
await refreshDocuments?.({ pageIndex: next, pageSize });
}
}}
onLast={() => {}}
canPrev={pageIndex > 0}
canNext={hasMore}
id={id} id={id}
/> />
</motion.div> </motion.div>

106
surfsense_web/hooks/use-documents.ts
View file

@ -29,55 +29,70 @@ export type DocumentType =
| "GOOGLE_GMAIL_CONNECTOR" | "GOOGLE_GMAIL_CONNECTOR"
| "AIRTABLE_CONNECTOR"; | "AIRTABLE_CONNECTOR";
export function useDocuments(searchSpaceId: number, lazy: boolean = false) { export function useDocuments(
const [documents, setDocuments] = useState<Document[]>([]); searchSpaceId: number,
const [loading, setLoading] = useState(!lazy); // Don't show loading initially for lazy mode optionsOrLazy?: boolean | { pageIndex?: number; pageSize?: number; lazy?: boolean }
const [error, setError] = useState<string | null>(null); ) {
const [isLoaded, setIsLoaded] = useState(false); // Memoization flag const lazy = typeof optionsOrLazy === "boolean" ? optionsOrLazy : optionsOrLazy?.lazy ?? false;
const pageIndex = typeof optionsOrLazy === "object" && optionsOrLazy?.pageIndex !== undefined ? optionsOrLazy.pageIndex : 0;
const pageSize = typeof optionsOrLazy === "object" && optionsOrLazy?.pageSize !== undefined ? optionsOrLazy.pageSize : 50;
const fetchDocuments = useCallback(async () => { const [documents, setDocuments] = useState<Document[]>([]);
if (isLoaded && lazy) return; // Avoid redundant calls in lazy mode const [loading, setLoading] = useState(!lazy);
const [error, setError] = useState<string | null>(null);
const [isLoaded, setIsLoaded] = useState(false);
const [hasMore, setHasMore] = useState(false);
try { const fetchDocuments = useCallback(async (override?: { pageIndex?: number; pageSize?: number }) => {
setLoading(true); if (isLoaded && lazy && !override) return;
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",
}
);
if (!response.ok) { const effectivePageIndex = override?.pageIndex ?? pageIndex;
toast.error("Failed to fetch documents"); const effectivePageSize = override?.pageSize ?? pageSize;
throw new Error("Failed to fetch documents"); const skip = effectivePageIndex * effectivePageSize;
} const limit = effectivePageSize;
const data = await response.json(); try {
setDocuments(data); setLoading(true);
setError(null); const url = new URL(`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents`);
setIsLoaded(true); if (searchSpaceId) url.searchParams.set("search_space_id", String(searchSpaceId));
} catch (err: any) { url.searchParams.set("skip", String(skip));
setError(err.message || "Failed to fetch documents"); url.searchParams.set("limit", String(limit));
console.error("Error fetching documents:", err);
} finally {
setLoading(false);
}
}, [searchSpaceId, isLoaded, lazy]);
useEffect(() => { const response = await fetch(url.toString(), {
if (!lazy && searchSpaceId) { headers: {
fetchDocuments(); Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
} },
}, [searchSpaceId, lazy, fetchDocuments]); method: "GET",
});
// Function to refresh the documents list if (!response.ok) {
const refreshDocuments = useCallback(async () => { toast.error("Failed to fetch documents");
setIsLoaded(false); // Reset memoization flag to allow refetch throw new Error("Failed to fetch documents");
await fetchDocuments(); }
}, [fetchDocuments]);
const data = await response.json();
setDocuments(data);
setHasMore(Array.isArray(data) && data.length === effectivePageSize);
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, pageIndex, pageSize]);
useEffect(() => {
if (!lazy && searchSpaceId !== undefined && searchSpaceId !== null) {
fetchDocuments();
}
}, [searchSpaceId, lazy, fetchDocuments, pageIndex, pageSize]);
const refreshDocuments = useCallback(async (override?: { pageIndex?: number; pageSize?: number }) => {
setIsLoaded(false);
await fetchDocuments(override);
}, [fetchDocuments]);
// Function to delete a document // Function to delete a document
const deleteDocument = useCallback( const deleteDocument = useCallback(
@ -118,6 +133,9 @@ export function useDocuments(searchSpaceId: number, lazy: boolean = false) {
isLoaded, isLoaded,
fetchDocuments, // Manual fetch function for lazy mode fetchDocuments, // Manual fetch function for lazy mode
refreshDocuments, refreshDocuments,
deleteDocument, deleteDocument,
hasMore,
pageIndex,
pageSize,
}; };
} }