fix(ui): Fix pagination for documents

#320 fixed

surfsense_web/hooks/use-documents.ts

@@ -30,69 +30,81 @@ export type DocumentType =
 	| "AIRTABLE_CONNECTOR";
 
 export function useDocuments(
-    searchSpaceId: number,
-    optionsOrLazy?: boolean | { pageIndex?: number; pageSize?: number; lazy?: boolean }
+	searchSpaceId: number,
+	optionsOrLazy?: boolean | { pageIndex?: number; pageSize?: number; lazy?: boolean }
 ) {
-    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 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 [documents, setDocuments] = useState<Document[]>([]);
-    const [loading, setLoading] = useState(!lazy);
-    const [error, setError] = useState<string | null>(null);
-    const [isLoaded, setIsLoaded] = useState(false);
-    const [hasMore, setHasMore] = useState(false);
+	const [documents, setDocuments] = useState<Document[]>([]);
+	const [loading, setLoading] = useState(!lazy);
+	const [error, setError] = useState<string | null>(null);
+	const [isLoaded, setIsLoaded] = useState(false);
+	const [hasMore, setHasMore] = useState(false);
 
-    const fetchDocuments = useCallback(async (override?: { pageIndex?: number; pageSize?: number }) => {
-        if (isLoaded && lazy && !override) return;
+	const fetchDocuments = useCallback(
+		async (override?: { pageIndex?: number; pageSize?: number }) => {
+			if (isLoaded && lazy && !override) return;
 
-        const effectivePageIndex = override?.pageIndex ?? pageIndex;
-        const effectivePageSize = override?.pageSize ?? pageSize;
-        const skip = effectivePageIndex * effectivePageSize;
-        const limit = effectivePageSize;
+			const effectivePageIndex = override?.pageIndex ?? pageIndex;
+			const effectivePageSize = override?.pageSize ?? pageSize;
+			const skip = effectivePageIndex * effectivePageSize;
+			const limit = effectivePageSize;
 
-        try {
-            setLoading(true);
-            const url = new URL(`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents`);
-            if (searchSpaceId) url.searchParams.set("search_space_id", String(searchSpaceId));
-            url.searchParams.set("skip", String(skip));
-            url.searchParams.set("limit", String(limit));
+			try {
+				setLoading(true);
+				const url = new URL(`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents`);
+				if (searchSpaceId) url.searchParams.set("search_space_id", String(searchSpaceId));
+				url.searchParams.set("skip", String(skip));
+				url.searchParams.set("limit", String(limit));
 
-            const response = await fetch(url.toString(), {
-                headers: {
-                    Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
-                },
-                method: "GET",
-            });
+				const response = await fetch(url.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");
-            }
+				if (!response.ok) {
+					toast.error("Failed to fetch documents");
+					throw new Error("Failed to fetch documents");
+				}
 
-            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]);
+				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]);
+	useEffect(() => {
+		if (!lazy && searchSpaceId !== undefined && searchSpaceId !== null) {
+			fetchDocuments();
+		}
+	}, [searchSpaceId, lazy, fetchDocuments]);
 
-    const refreshDocuments = useCallback(async (override?: { pageIndex?: number; pageSize?: number }) => {
-        setIsLoaded(false);
-        await fetchDocuments(override);
-    }, [fetchDocuments]);
+	const refreshDocuments = useCallback(
+		async (override?: { pageIndex?: number; pageSize?: number }) => {
+			setIsLoaded(false);
+			await fetchDocuments(override);
+		},
+		[fetchDocuments]
+	);
 
 	// Function to delete a document
 	const deleteDocument = useCallback(
@@ -133,9 +145,9 @@ export function useDocuments(
 		isLoaded,
 		fetchDocuments, // Manual fetch function for lazy mode
 		refreshDocuments,
-        deleteDocument,
-        hasMore,
-        pageIndex,
-        pageSize,
+		deleteDocument,
+		hasMore,
+		pageIndex,
+		pageSize,
 	};
 }

surfsense_web/hooks/use-llm-configs.ts

@@ -79,7 +79,7 @@ export function useLLMConfigs() {
 
 	useEffect(() => {
 		fetchLLMConfigs();
-	}, []);
+	}, [fetchLLMConfigs]);
 
 	const createLLMConfig = async (config: CreateLLMConfig): Promise<LLMConfig | null> => {
 		try {
@@ -216,7 +216,7 @@ export function useLLMPreferences() {
 
 	useEffect(() => {
 		fetchPreferences();
-	}, []);
+	}, [fetchPreferences]);
 
 	const updatePreferences = async (newPreferences: Partial<LLMPreferences>): Promise<boolean> => {
 		try {

surfsense_web/hooks/use-logs.ts

@@ -54,7 +54,7 @@ export function useLogs(searchSpaceId?: number, filters: LogFilters = {}) {
 	const [error, setError] = useState<string | null>(null);
 
 	// Memoize filters to prevent infinite re-renders
-	const memoizedFilters = useMemo(() => filters, [JSON.stringify(filters)]);
+	const memoizedFilters = useMemo(() => filters, [filters]);
 
 	const buildQueryParams = useCallback(
 		(customFilters: LogFilters = {}) => {

surfsense_web/hooks/useSearchSourceConnectors.ts

@@ -53,6 +53,47 @@ export const useSearchSourceConnectors = (lazy: boolean = false) => {
 		},
 	]);
 
+	// Update connector source items when connectors change
+	const updateConnectorSourceItems = useCallback((currentConnectors: SearchSourceConnector[]) => {
+		// Start with the default hardcoded connectors
+		const defaultConnectors: ConnectorSourceItem[] = [
+			{
+				id: 1,
+				name: "Crawled URL",
+				type: "CRAWLED_URL",
+				sources: [],
+			},
+			{
+				id: 2,
+				name: "File",
+				type: "FILE",
+				sources: [],
+			},
+			{
+				id: 3,
+				name: "Extension",
+				type: "EXTENSION",
+				sources: [],
+			},
+			{
+				id: 4,
+				name: "Youtube Video",
+				type: "YOUTUBE_VIDEO",
+				sources: [],
+			},
+		];
+
+		// Add the API connectors
+		const apiConnectors: ConnectorSourceItem[] = currentConnectors.map((connector, index) => ({
+			id: 1000 + index, // Use a high ID to avoid conflicts with hardcoded IDs
+			name: connector.name,
+			type: connector.connector_type,
+			sources: [],
+		}));
+
+		setConnectorSourceItems([...defaultConnectors, ...apiConnectors]);
+	}, []);
+
 	const fetchConnectors = useCallback(async () => {
 		if (isLoaded && lazy) return; // Avoid redundant calls in lazy mode
 
@@ -94,7 +135,11 @@ export const useSearchSourceConnectors = (lazy: boolean = false) => {
 		} finally {
 			setIsLoading(false);
 		}
-	}, [isLoaded, lazy]);
+	}, [
+		isLoaded,
+		lazy, // Update connector source items when connectors change
+		updateConnectorSourceItems,
+	]);
 
 	useEffect(() => {
 		if (!lazy) {
@@ -108,47 +153,6 @@ export const useSearchSourceConnectors = (lazy: boolean = false) => {
 		await fetchConnectors();
 	}, [fetchConnectors]);
 
-	// Update connector source items when connectors change
-	const updateConnectorSourceItems = (currentConnectors: SearchSourceConnector[]) => {
-		// Start with the default hardcoded connectors
-		const defaultConnectors: ConnectorSourceItem[] = [
-			{
-				id: 1,
-				name: "Crawled URL",
-				type: "CRAWLED_URL",
-				sources: [],
-			},
-			{
-				id: 2,
-				name: "File",
-				type: "FILE",
-				sources: [],
-			},
-			{
-				id: 3,
-				name: "Extension",
-				type: "EXTENSION",
-				sources: [],
-			},
-			{
-				id: 4,
-				name: "Youtube Video",
-				type: "YOUTUBE_VIDEO",
-				sources: [],
-			},
-		];
-
-		// Add the API connectors
-		const apiConnectors: ConnectorSourceItem[] = currentConnectors.map((connector, index) => ({
-			id: 1000 + index, // Use a high ID to avoid conflicts with hardcoded IDs
-			name: connector.name,
-			type: connector.connector_type,
-			sources: [],
-		}));
-
-		setConnectorSourceItems([...defaultConnectors, ...apiConnectors]);
-	};
-
 	/**
 	 * Create a new search source connector
 	 */