mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 00:36:31 +02:00
refactor: enhance DocumentsTableShell with infinite scroll support and update DocumentsSidebar for improved search functionality
This commit is contained in:
Anish Sarkar
parent
b8f52946fd
commit
0feb17cb75
2 changed files with 201 additions and 92 deletions
|
|
@ -1,11 +1,10 @@
|
|||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { ChevronLeft, SquareLibrary } from "lucide-react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { deleteDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
|
@ -13,7 +12,6 @@ import type { DocumentTypeEnum } from "@/contracts/types/document.types";
|
|||
import { useDocuments } from "@/hooks/use-documents";
|
||||
import { documentsApiService } from "@/lib/apis/documents-api.service";
|
||||
import { useMediaQuery } from "@/hooks/use-media-query";
|
||||
import { cacheKeys } from "@/lib/query-client/cache-keys";
|
||||
import {
|
||||
DocumentsFilters,
|
||||
} from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters";
|
||||
|
|
@ -21,13 +19,12 @@ import {
|
|||
DocumentsTableShell,
|
||||
type SortKey,
|
||||
} from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell";
|
||||
import {
|
||||
PAGE_SIZE,
|
||||
PaginationControls,
|
||||
} from "@/app/dashboard/[search_space_id]/documents/(manage)/components/PaginationControls";
|
||||
import type { ColumnVisibility } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/types";
|
||||
import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
|
||||
|
||||
const INITIAL_LOAD_SIZE = 20;
|
||||
const SCROLL_LOAD_SIZE = 5;
|
||||
|
||||
function useDebounced<T>(value: T, delay = 250) {
|
||||
const [debounced, setDebounced] = useState(value);
|
||||
useEffect(() => {
|
||||
|
|
@ -58,7 +55,6 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
|
|||
created_at: true,
|
||||
status: true,
|
||||
});
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [sortKey, setSortKey] = useState<SortKey>("created_at");
|
||||
const [sortDesc, setSortDesc] = useState(true);
|
||||
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
|
||||
|
|
@ -73,28 +69,24 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
|
|||
|
||||
const isSearchMode = !!debouncedSearch.trim();
|
||||
|
||||
const searchQueryParams = useMemo(
|
||||
() => ({
|
||||
search_space_id: searchSpaceId,
|
||||
page: pageIndex,
|
||||
page_size: PAGE_SIZE,
|
||||
title: debouncedSearch.trim(),
|
||||
...(activeTypes.length > 0 && { document_types: activeTypes }),
|
||||
}),
|
||||
[searchSpaceId, pageIndex, activeTypes, debouncedSearch]
|
||||
);
|
||||
|
||||
const {
|
||||
data: searchResponse,
|
||||
isLoading: isSearchLoading,
|
||||
refetch: refetchSearch,
|
||||
error: searchError,
|
||||
} = useQuery({
|
||||
queryKey: cacheKeys.documents.globalQueryParams(searchQueryParams),
|
||||
queryFn: () => documentsApiService.searchDocuments({ queryParams: searchQueryParams }),
|
||||
staleTime: 30 * 1000,
|
||||
enabled: !!searchSpaceId && isSearchMode && open,
|
||||
});
|
||||
// --- Infinite scroll state ---
|
||||
const [visibleCount, setVisibleCount] = useState(INITIAL_LOAD_SIZE);
|
||||
const [searchItems, setSearchItems] = useState<Array<{
|
||||
id: number;
|
||||
search_space_id: number;
|
||||
document_type: string;
|
||||
title: string;
|
||||
created_by_id: string | null;
|
||||
created_by_name: string | null;
|
||||
created_by_email: string | null;
|
||||
created_at: string;
|
||||
status: { state: "ready" | "pending" | "processing" | "failed"; reason?: string };
|
||||
}>>([]);
|
||||
const [searchTotal, setSearchTotal] = useState(0);
|
||||
const [searchPageIndex, setSearchPageIndex] = useState(0);
|
||||
const [searchLoadingMore, setSearchLoadingMore] = useState(false);
|
||||
const [searchInitialLoading, setSearchInitialLoading] = useState(false);
|
||||
const searchQueryRef = useRef(debouncedSearch);
|
||||
|
||||
const sortedRealtimeDocuments = useMemo(() => {
|
||||
const docs = [...realtimeDocuments];
|
||||
|
|
@ -112,14 +104,82 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
|
|||
return docs;
|
||||
}, [realtimeDocuments, sortKey, sortDesc]);
|
||||
|
||||
const paginatedRealtimeDocuments = useMemo(() => {
|
||||
const start = pageIndex * PAGE_SIZE;
|
||||
const end = start + PAGE_SIZE;
|
||||
return sortedRealtimeDocuments.slice(start, end);
|
||||
}, [sortedRealtimeDocuments, pageIndex]);
|
||||
// Reset visible count when sort/filter changes
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: intentional reset
|
||||
useEffect(() => {
|
||||
setVisibleCount(INITIAL_LOAD_SIZE);
|
||||
}, [sortKey, sortDesc, activeTypes]);
|
||||
|
||||
const displayDocs = isSearchMode
|
||||
? (searchResponse?.items || []).map((item) => ({
|
||||
// Initial search fetch when search query changes
|
||||
useEffect(() => {
|
||||
if (!isSearchMode || !searchSpaceId || !open) {
|
||||
setSearchItems([]);
|
||||
setSearchTotal(0);
|
||||
setSearchPageIndex(0);
|
||||
return;
|
||||
}
|
||||
|
||||
searchQueryRef.current = debouncedSearch;
|
||||
setSearchInitialLoading(true);
|
||||
|
||||
const queryParams = {
|
||||
search_space_id: searchSpaceId,
|
||||
page: 0,
|
||||
page_size: INITIAL_LOAD_SIZE,
|
||||
title: debouncedSearch.trim(),
|
||||
...(activeTypes.length > 0 && { document_types: activeTypes }),
|
||||
};
|
||||
|
||||
documentsApiService
|
||||
.searchDocuments({ queryParams })
|
||||
.then((response) => {
|
||||
if (searchQueryRef.current !== debouncedSearch) return;
|
||||
const mapped = response.items.map((item) => ({
|
||||
id: item.id,
|
||||
search_space_id: item.search_space_id,
|
||||
document_type: item.document_type,
|
||||
title: item.title,
|
||||
created_by_id: item.created_by_id ?? null,
|
||||
created_by_name: item.created_by_name ?? null,
|
||||
created_by_email: item.created_by_email ?? null,
|
||||
created_at: item.created_at,
|
||||
status: (
|
||||
item as {
|
||||
status?: { state: "ready" | "pending" | "processing" | "failed"; reason?: string };
|
||||
}
|
||||
).status ?? { state: "ready" as const },
|
||||
}));
|
||||
setSearchItems(mapped);
|
||||
setSearchTotal(response.total);
|
||||
setSearchPageIndex(0);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("[DocumentsSidebar] Search failed:", err);
|
||||
})
|
||||
.finally(() => {
|
||||
setSearchInitialLoading(false);
|
||||
});
|
||||
}, [debouncedSearch, searchSpaceId, open, isSearchMode, activeTypes]);
|
||||
|
||||
// Load more search results
|
||||
const loadMoreSearch = useCallback(async () => {
|
||||
if (searchLoadingMore || !isSearchMode) return;
|
||||
const nextPage = searchPageIndex + 1;
|
||||
if (searchItems.length >= searchTotal) return;
|
||||
|
||||
setSearchLoadingMore(true);
|
||||
try {
|
||||
const queryParams = {
|
||||
search_space_id: searchSpaceId,
|
||||
page: nextPage,
|
||||
page_size: SCROLL_LOAD_SIZE,
|
||||
title: debouncedSearch.trim(),
|
||||
...(activeTypes.length > 0 && { document_types: activeTypes }),
|
||||
};
|
||||
const response = await documentsApiService.searchDocuments({ queryParams });
|
||||
if (searchQueryRef.current !== debouncedSearch) return;
|
||||
|
||||
const mapped = response.items.map((item) => ({
|
||||
id: item.id,
|
||||
search_space_id: item.search_space_id,
|
||||
document_type: item.document_type,
|
||||
|
|
@ -133,13 +193,38 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
|
|||
status?: { state: "ready" | "pending" | "processing" | "failed"; reason?: string };
|
||||
}
|
||||
).status ?? { state: "ready" as const },
|
||||
}))
|
||||
: paginatedRealtimeDocuments;
|
||||
}));
|
||||
setSearchItems((prev) => [...prev, ...mapped]);
|
||||
setSearchTotal(response.total);
|
||||
setSearchPageIndex(nextPage);
|
||||
} catch (err) {
|
||||
console.error("[DocumentsSidebar] Load more search failed:", err);
|
||||
} finally {
|
||||
setSearchLoadingMore(false);
|
||||
}
|
||||
}, [searchLoadingMore, isSearchMode, searchPageIndex, searchItems.length, searchTotal, searchSpaceId, debouncedSearch, activeTypes]);
|
||||
|
||||
const displayTotal = isSearchMode ? searchResponse?.total || 0 : sortedRealtimeDocuments.length;
|
||||
const loading = isSearchMode ? isSearchLoading : realtimeLoading;
|
||||
const error = isSearchMode ? searchError : realtimeError;
|
||||
const pageEnd = Math.min((pageIndex + 1) * PAGE_SIZE, displayTotal);
|
||||
// Load more for realtime (client-side, just increase visible count)
|
||||
const loadMoreRealtime = useCallback(() => {
|
||||
setVisibleCount((prev) => Math.min(prev + SCROLL_LOAD_SIZE, sortedRealtimeDocuments.length));
|
||||
}, [sortedRealtimeDocuments.length]);
|
||||
|
||||
const visibleRealtimeDocs = useMemo(
|
||||
() => sortedRealtimeDocuments.slice(0, visibleCount),
|
||||
[sortedRealtimeDocuments, visibleCount]
|
||||
);
|
||||
|
||||
const displayDocs = isSearchMode ? searchItems : visibleRealtimeDocs;
|
||||
const loading = isSearchMode ? searchInitialLoading : realtimeLoading;
|
||||
const error = isSearchMode ? false : realtimeError;
|
||||
|
||||
const hasMore = isSearchMode
|
||||
? searchItems.length < searchTotal
|
||||
: visibleCount < sortedRealtimeDocuments.length;
|
||||
|
||||
const loadingMore = isSearchMode ? searchLoadingMore : false;
|
||||
|
||||
const onLoadMore = isSearchMode ? loadMoreSearch : loadMoreRealtime;
|
||||
|
||||
const onToggleType = (type: DocumentTypeEnum, checked: boolean) => {
|
||||
setActiveTypes((prev) => {
|
||||
|
|
@ -148,7 +233,6 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
|
|||
}
|
||||
return prev.filter((t) => t !== type);
|
||||
});
|
||||
setPageIndex(0);
|
||||
setSelectedIds(new Set());
|
||||
};
|
||||
|
||||
|
|
@ -159,10 +243,7 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
|
|||
}
|
||||
|
||||
const allDocs = isSearchMode
|
||||
? (searchResponse?.items || []).map((item) => ({
|
||||
id: item.id,
|
||||
status: (item as { status?: { state: string } }).status,
|
||||
}))
|
||||
? searchItems.map((item) => ({ id: item.id, status: item.status }))
|
||||
: sortedRealtimeDocuments.map((doc) => ({ id: doc.id, status: doc.status }));
|
||||
|
||||
const selectedDocs = allDocs.filter((doc) => selectedIds.has(doc.id));
|
||||
|
|
@ -203,7 +284,10 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
|
|||
} else {
|
||||
toast.error(t("delete_partial_failed"));
|
||||
}
|
||||
if (isSearchMode) await refetchSearch();
|
||||
if (isSearchMode) {
|
||||
setSearchItems((prev) => prev.filter((item) => !deletableIds.includes(item.id)));
|
||||
setSearchTotal((prev) => prev - okCount);
|
||||
}
|
||||
setSelectedIds(new Set());
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
|
@ -216,14 +300,17 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
|
|||
try {
|
||||
await deleteDocumentMutation({ id });
|
||||
toast.success(t("delete_success") || "Document deleted");
|
||||
if (isSearchMode) await refetchSearch();
|
||||
if (isSearchMode) {
|
||||
setSearchItems((prev) => prev.filter((item) => item.id !== id));
|
||||
setSearchTotal((prev) => prev - 1);
|
||||
}
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.error("Error deleting document:", e);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
[deleteDocumentMutation, isSearchMode, refetchSearch, t]
|
||||
[deleteDocumentMutation, isSearchMode, t]
|
||||
);
|
||||
|
||||
const handleSortChange = useCallback((key: SortKey) => {
|
||||
|
|
@ -237,11 +324,6 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
|
|||
});
|
||||
}, []);
|
||||
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: Reset page on search change
|
||||
useEffect(() => {
|
||||
setPageIndex(0);
|
||||
}, [debouncedSearch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const panelWidth = isMobile ? window.innerWidth : 720;
|
||||
|
|
@ -281,7 +363,7 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto overflow-x-hidden pt-0">
|
||||
<div className="flex-1 min-h-0 overflow-x-hidden pt-0 flex flex-col">
|
||||
<div className="px-4 pb-2">
|
||||
<DocumentsFilters
|
||||
typeCounts={realtimeTypeCounts}
|
||||
|
|
@ -306,20 +388,10 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
|
|||
onSortChange={handleSortChange}
|
||||
deleteDocument={handleDeleteDocument}
|
||||
searchSpaceId={String(searchSpaceId)}
|
||||
hasMore={hasMore}
|
||||
loadingMore={loadingMore}
|
||||
onLoadMore={onLoadMore}
|
||||
/>
|
||||
|
||||
<div className="px-4 py-2">
|
||||
<PaginationControls
|
||||
pageIndex={pageIndex}
|
||||
total={displayTotal}
|
||||
onFirst={() => setPageIndex(0)}
|
||||
onPrev={() => setPageIndex((i) => Math.max(0, i - 1))}
|
||||
onNext={() => setPageIndex((i) => (pageEnd < displayTotal ? i + 1 : i))}
|
||||
onLast={() => setPageIndex(Math.max(0, Math.ceil(displayTotal / PAGE_SIZE) - 1))}
|
||||
canPrev={pageIndex > 0}
|
||||
canNext={pageEnd < displayTotal}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue