refactor: update SourceDetailSheet to use useQuery with centralized cache keys

- Replace useDocumentByChunk hook with useQuery implementation
- Use descriptive variable names (isDocumentByChunkFetching, documentByChunkFetchingError)
- Integrate with centralized cache key management
- Update all loading and error state references
- Add 5-minute stale time for document queries

surfsense_web/components/chat/SourceDetailSheet.tsx

@@ -1,11 +1,9 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import { ChevronDown, ChevronUp, ExternalLink, Loader2 } from "lucide-react";
 import type React from "react";
 import { type ReactNode, useEffect, useRef, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { documentsApiService } from "@/lib/apis/documents-api.service";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
 import { MarkdownViewer } from "@/components/markdown-viewer";
 import { Button } from "@/components/ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
@@ -18,6 +16,8 @@ import {
 	SheetTitle,
 } from "@/components/ui/sheet";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import { documentsApiService } from "@/lib/apis/documents-api.service";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
 import { cn } from "@/lib/utils";
 
 interface SourceDetailSheetProps {
@@ -53,7 +53,11 @@ export function SourceDetailSheet({
 	const [summaryOpen, setSummaryOpen] = useState(false);
 
 	// Add useQuery to fetch document by chunk
-	const { data: document, isLoading: isDocumentByChunkFetching, error: documentByChunkFetchingError } = useQuery({
+	const {
+		data: document,
+		isLoading: isDocumentByChunkFetching,
+		error: documentByChunkFetchingError,
+	} = useQuery({
 		queryKey: cacheKeys.documents.byChunk(chunkId.toString()),
 		queryFn: () => documentsApiService.getDocumentByChunk({ chunk_id: chunkId }),
 		enabled: !!chunkId && open,
@@ -109,7 +113,9 @@ export function SourceDetailSheet({
 
 				{!isDirectRenderSource && documentByChunkFetchingError && (
 					<div className="flex items-center justify-center h-64 px-6">
-						<p className="text-sm text-destructive">{documentByChunkFetchingError.message || "Failed to load document"}</p>
+						<p className="text-sm text-destructive">
+							{documentByChunkFetchingError.message || "Failed to load document"}
+						</p>
 					</div>
 				)}
 

surfsense_web/lib/apis/base-api.service.ts

@@ -58,7 +58,6 @@ class BaseApiService {
 			 */
 			const defaultOptions: RequestOptions = {
 				headers: {
-					"Content-Type": "application/json",
 					Authorization: `Bearer ${this.bearerToken || ""}`,
 				},
 				method: "GET",
@@ -211,8 +210,11 @@ class BaseApiService {
 		options?: Omit<RequestOptions, "method" | "responseType">
 	) {
 		return this.request(url, responseSchema, {
-			...options,
 			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			...options,
 			responseType: ResponseType.JSON,
 		});
 	}
@@ -224,6 +226,9 @@ class BaseApiService {
 	) {
 		return this.request(url, responseSchema, {
 			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
 			...options,
 			responseType: ResponseType.JSON,
 		});
@@ -236,6 +241,9 @@ class BaseApiService {
 	) {
 		return this.request(url, responseSchema, {
 			method: "PUT",
+			headers: {
+				"Content-Type": "application/json",
+			},
 			...options,
 			responseType: ResponseType.JSON,
 		});
@@ -248,6 +256,9 @@ class BaseApiService {
 	) {
 		return this.request(url, responseSchema, {
 			method: "DELETE",
+			headers: {
+				"Content-Type": "application/json",
+			},
 			...options,
 			responseType: ResponseType.JSON,
 		});

surfsense_web/lib/apis/documents-api.service.ts

@@ -35,13 +35,11 @@ class DocumentsApiService {
 	 * Get a list of documents with optional filtering and pagination
 	 */
 	getDocuments = async (request: GetDocumentsRequest) => {
-	
 		const parsedRequest = getDocumentsRequest.safeParse(request);
 
 		if (!parsedRequest.success) {
 			console.error("Invalid request:", parsedRequest.error);
 
-			
 			const errorMessage = parsedRequest.error.errors.map((err) => err.message).join(", ");
 			throw new ValidationError(`Invalid request: ${errorMessage}`);
 		}
@@ -70,13 +68,11 @@ class DocumentsApiService {
 	 * Get a single document by ID
 	 */
 	getDocument = async (request: GetDocumentRequest) => {
-		
 		const parsedRequest = getDocumentRequest.safeParse(request);
 
 		if (!parsedRequest.success) {
 			console.error("Invalid request:", parsedRequest.error);
 
-			
 			const errorMessage = parsedRequest.error.errors.map((err) => err.message).join(", ");
 			throw new ValidationError(`Invalid request: ${errorMessage}`);
 		}
@@ -88,13 +84,11 @@ class DocumentsApiService {
 	 * Create documents (extension, crawled URL, or YouTube video)
 	 */
 	createDocument = async (request: CreateDocumentRequest) => {
-		
 		const parsedRequest = createDocumentRequest.safeParse(request);
 
 		if (!parsedRequest.success) {
 			console.error("Invalid request:", parsedRequest.error);
 
-			
 			const errorMessage = parsedRequest.error.errors.map((err) => err.message).join(", ");
 			throw new ValidationError(`Invalid request: ${errorMessage}`);
 		}
@@ -108,13 +102,11 @@ class DocumentsApiService {
 	 * Upload document files
 	 */
 	uploadDocument = async (request: UploadDocumentRequest) => {
-		
 		const parsedRequest = uploadDocumentRequest.safeParse(request);
 
 		if (!parsedRequest.success) {
 			console.error("Invalid request:", parsedRequest.error);
 
-			
 			const errorMessage = parsedRequest.error.errors.map((err) => err.message).join(", ");
 			throw new ValidationError(`Invalid request: ${errorMessage}`);
 		}
@@ -135,13 +127,11 @@ class DocumentsApiService {
 	 * Search documents by title
 	 */
 	searchDocuments = async (request: SearchDocumentsRequest) => {
-		
 		const parsedRequest = searchDocumentsRequest.safeParse(request);
 
 		if (!parsedRequest.success) {
 			console.error("Invalid request:", parsedRequest.error);
 
-			
 			const errorMessage = parsedRequest.error.errors.map((err) => err.message).join(", ");
 			throw new ValidationError(`Invalid request: ${errorMessage}`);
 		}