fix(ui): Fix pagination for documents

#320 fixed
This commit is contained in:
sanwalsulehri 2025-09-19 16:04:22 +05:00
parent b11bec1c65
commit 798cf788f5
24 changed files with 218 additions and 187 deletions

View file

@ -15,7 +15,7 @@ import {
Trash2,
} from "lucide-react";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import { useEffect, useId, useState } from "react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
@ -84,6 +84,7 @@ const MotionCard = motion(Card);
export default function ChatsPageClient({ searchSpaceId }: ChatsPageClientProps) {
const router = useRouter();
const podcastTitleId = useId();
const [chats, setChats] = useState<Chat[]>([]);
const [filteredChats, setFilteredChats] = useState<Chat[]>([]);
const [isLoading, setIsLoading] = useState(true);
@ -280,7 +281,7 @@ export default function ChatsPageClient({ searchSpaceId }: ChatsPageClientProps)
const payload = {
type: "CHAT",
ids: [currentChatId], // Single chat ID
search_space_id: parseInt(searchSpaceId),
search_space_id: parseInt(searchSpaceId, 10),
podcast_title: currentTitle,
};
@ -830,9 +831,9 @@ export default function ChatsPageClient({ searchSpaceId }: ChatsPageClientProps)
<div className="space-y-4 py-2">
<div className="space-y-2">
<Label htmlFor="podcast-title">Podcast Title</Label>
<Label htmlFor={podcastTitleId}>Podcast Title</Label>
<Input
id="podcast-title"
id={podcastTitleId}
placeholder="Enter podcast title"
value={podcastTitle}
onChange={(e) => updateCurrentChatTitle(e.target.value)}

View file

@ -4,7 +4,7 @@ import { format } from "date-fns";
import { motion } from "framer-motion";
import { Calendar as CalendarIcon, Edit, Plus, RefreshCw, Trash2 } from "lucide-react";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { useEffect, useId, useState } from "react";
import { toast } from "sonner";
import {
AlertDialog,
@ -63,6 +63,8 @@ export default function ConnectorsPage() {
const params = useParams();
const searchSpaceId = params.search_space_id as string;
const today = new Date();
const startDateId = useId();
const endDateId = useId();
const { connectors, isLoading, error, deleteConnector, indexConnector } =
useSearchSourceConnectors();
@ -346,11 +348,11 @@ export default function ConnectorsPage() {
<div className="grid gap-4 py-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="start-date">Start Date</Label>
<Label htmlFor={startDateId}>Start Date</Label>
<Popover>
<PopoverTrigger asChild>
<Button
id="start-date"
id={startDateId}
variant="outline"
className={cn(
"w-full justify-start text-left font-normal",
@ -373,11 +375,11 @@ export default function ConnectorsPage() {
</Popover>
</div>
<div className="space-y-2">
<Label htmlFor="end-date">End Date</Label>
<Label htmlFor={endDateId}>End Date</Label>
<Popover>
<PopoverTrigger asChild>
<Button
id="end-date"
id={endDateId}
variant="outline"
className={cn(
"w-full justify-start text-left font-normal",

View file

@ -41,7 +41,7 @@ export default function AirtableConnectorPage() {
setDoesConnectorExist(true);
}
});
}, []);
}, [fetchConnectors]);
const handleConnectAirtable = async () => {
setIsConnecting(true);

View file

@ -2,7 +2,7 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { motion } from "framer-motion";
import { ArrowLeft, Check, CircleAlert, Github, Info, ListChecks, Loader2 } from "lucide-react";
import { ArrowLeft, Check, CircleAlert, Info, ListChecks, Loader2 } from "lucide-react";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { useForm } from "react-hook-form";

View file

@ -1,14 +1,11 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { motion } from "framer-motion";
import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
import Link from "next/link";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
Card,
@ -44,7 +41,7 @@ export default function GoogleCalendarConnectorPage() {
setDoesConnectorExist(true);
}
});
}, []);
}, [fetchConnectors]);
// Handle Google OAuth connection
const handleConnectGoogle = async () => {

View file

@ -1,14 +1,11 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { motion } from "framer-motion";
import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
import Link from "next/link";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
Card,
@ -43,7 +40,7 @@ export default function GoogleGmailConnectorPage() {
setDoesConnectorExist(true);
}
});
}, []);
}, [fetchConnectors]);
// Handle Google OAuth connection
const handleConnectGoogle = async () => {

View file

@ -76,8 +76,15 @@ export function DocumentsTableShell({
const toggleAll = (checked: boolean) => {
const next = new Set(selectedIds);
if (checked) sorted.forEach((d) => next.add(d.id));
else sorted.forEach((d) => next.delete(d.id));
if (checked) {
sorted.forEach((d) => {
next.add(d.id);
});
} else {
sorted.forEach((d) => {
next.delete(d.id);
});
}
setSelectedIds(next);
};

View file

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

View file

@ -72,7 +72,7 @@ export default function WebpageCrawler() {
body: JSON.stringify({
document_type: "CRAWLED_URL",
content: urls,
search_space_id: parseInt(search_space_id),
search_space_id: parseInt(search_space_id, 10),
}),
}
);

View file

@ -81,7 +81,7 @@ export default function YouTubeVideoAdder() {
body: JSON.stringify({
document_type: "YOUTUBE_VIDEO",
content: videoUrls,
search_space_id: parseInt(search_space_id),
search_space_id: parseInt(search_space_id, 10),
}),
}
);

View file

@ -9,7 +9,7 @@ export default function SearchSpaceDashboardPage() {
useEffect(() => {
router.push(`/dashboard/${search_space_id}/chats`);
}, []);
}, [router.push, search_space_id]);
return <></>;
}

View file

@ -175,7 +175,7 @@ export default function PodcastsPageClient({ searchSpaceId }: PodcastsPageClient
}
// Filter by search space
result = result.filter((podcast) => podcast.search_space_id === parseInt(searchSpaceId));
result = result.filter((podcast) => podcast.search_space_id === parseInt(searchSpaceId, 10));
// Sort podcasts
result.sort((a, b) => {

View file

@ -101,7 +101,7 @@ export default function ResearcherPage() {
const customHandlerAppend = async (
message: Message | CreateMessage,
chatRequestOptions?: { data?: any }
_chatRequestOptions?: { data?: any }
) => {
const newChatId = await createChat(message.content, researchMode, selectedConnectors);
if (newChatId) {
@ -122,7 +122,7 @@ export default function ResearcherPage() {
setIsLoading(true);
loadChatData(chatIdParam);
}
}, [token, isNewChat, chatIdParam]);
}, [token, isNewChat, chatIdParam, loadChatData, setIsLoading]);
// Restore chat state from localStorage on page load
useEffect(() => {
@ -142,6 +142,7 @@ export default function ResearcherPage() {
setSelectedConnectors,
setSearchMode,
setResearchMode,
restoreChatState,
]);
const loadChatData = async (chatId: string) => {
@ -187,7 +188,15 @@ export default function ResearcherPage() {
) {
updateChat(chatIdParam, handler.messages, researchMode, selectedConnectors);
}
}, [handler.messages, handler.status, chatIdParam, isNewChat]);
}, [
handler.messages,
handler.status,
chatIdParam,
isNewChat,
researchMode,
selectedConnectors,
updateChat,
]);
if (isLoading) {
return (