From f84f9c02df44c8134aa271ded4ba886289fa87e7 Mon Sep 17 00:00:00 2001 From: VEERENDRA VAMSHI <136776337+MKVEERENDRA@users.noreply.github.com> Date: Sat, 1 Mar 2025 04:09:56 +0530 Subject: [PATCH 1/5] Update LeaderboardSkeleton.tsx --- .../ui/skeletons/LeaderboardSkeleton.tsx | 66 +++++++++++-------- 1 file changed, 39 insertions(+), 27 deletions(-) diff --git a/frontend/components/ui/skeletons/LeaderboardSkeleton.tsx b/frontend/components/ui/skeletons/LeaderboardSkeleton.tsx index e605b73..5022dcb 100644 --- a/frontend/components/ui/skeletons/LeaderboardSkeleton.tsx +++ b/frontend/components/ui/skeletons/LeaderboardSkeleton.tsx @@ -1,32 +1,44 @@ -export const LeaderboardSkeleton = () => { +"use client"; + +import { useState, useEffect } from "react"; +import { useRouter, useSearchParams } from "next/navigation"; +import { AgentListView } from "@/components/AgentListView"; +import { TEXT_COPIES } from "@/constants"; + +export default function LeaderboardPage() { + const router = useRouter(); + const searchParams = useSearchParams(); + const activeTabFromUrl = searchParams.get("active") || "attackers"; + const [activeTab, setActiveTab] = useState(activeTabFromUrl); + + // Update URL when tab changes + useEffect(() => { + const params = new URLSearchParams(searchParams); + params.set("active", activeTab); + router.push(`?${params.toString()}`, { scroll: false }); + }, [activeTab]); + return ( -
-
-
-
-
-
-
-
-
-
+
+
+ +
- {new Array(10).fill(1).map((_, index) => ( -
-
-
-
-
-
-
-
-
-
- ))} +
); -}; +} From 9331f35334614054a6ee9fb44241a92c8cd75da9 Mon Sep 17 00:00:00 2001 From: VEERENDRA VAMSHI <136776337+MKVEERENDRA@users.noreply.github.com> Date: Sat, 1 Mar 2025 04:12:36 +0530 Subject: [PATCH 2/5] Update LeaderboardSkeleton.tsx\ --- .../ui/skeletons/LeaderboardSkeleton.tsx | 66 ++++++++----------- 1 file changed, 27 insertions(+), 39 deletions(-) diff --git a/frontend/components/ui/skeletons/LeaderboardSkeleton.tsx b/frontend/components/ui/skeletons/LeaderboardSkeleton.tsx index 5022dcb..e605b73 100644 --- a/frontend/components/ui/skeletons/LeaderboardSkeleton.tsx +++ b/frontend/components/ui/skeletons/LeaderboardSkeleton.tsx @@ -1,44 +1,32 @@ -"use client"; - -import { useState, useEffect } from "react"; -import { useRouter, useSearchParams } from "next/navigation"; -import { AgentListView } from "@/components/AgentListView"; -import { TEXT_COPIES } from "@/constants"; - -export default function LeaderboardPage() { - const router = useRouter(); - const searchParams = useSearchParams(); - const activeTabFromUrl = searchParams.get("active") || "attackers"; - const [activeTab, setActiveTab] = useState(activeTabFromUrl); - - // Update URL when tab changes - useEffect(() => { - const params = new URLSearchParams(searchParams); - params.set("active", activeTab); - router.push(`?${params.toString()}`, { scroll: false }); - }, [activeTab]); - +export const LeaderboardSkeleton = () => { return ( -
-
- - +
+
+
+
+
+
+
+
+
+
- + {new Array(10).fill(1).map((_, index) => ( +
+
+
+
+
+
+
+
+
+
+ ))}
); -} +}; From 61befc860943e970cb36cd7809a067521464c58f Mon Sep 17 00:00:00 2001 From: VEERENDRA VAMSHI <136776337+MKVEERENDRA@users.noreply.github.com> Date: Sat, 1 Mar 2025 04:18:25 +0530 Subject: [PATCH 3/5] Update AgentListView.tsx --- frontend/components/AgentListView.tsx | 109 +++++++++----------------- 1 file changed, 35 insertions(+), 74 deletions(-) diff --git a/frontend/components/AgentListView.tsx b/frontend/components/AgentListView.tsx index fc9cb59..d21e240 100644 --- a/frontend/components/AgentListView.tsx +++ b/frontend/components/AgentListView.tsx @@ -1,4 +1,5 @@ 'use client' +import { useSearchParams, useRouter } from 'next/navigation' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { AgentsList, TabType } from './AgentsList' import { useMemo, useState } from 'react' @@ -17,10 +18,14 @@ type AgentListViewProps = { } export const AgentListView = ({ heading, subheading }: AgentListViewProps) => { + const searchParams = useSearchParams() + const router = useRouter() + + // Get tab from URL, default to ActiveAgents + const selectedTab = (searchParams.get('tab') as TabType) || TabType.ActiveAgents const [searchQuery, setSearchQuery] = useState('') const [currentPage, setCurrentPage] = useState(0) - const [selectedTab, setSelectedTab] = useState(TabType.ActiveAgents) - //TODO: show toast for failed to load agents + const { agents: allAgents, loading: isFetchingAllAgents, @@ -47,6 +52,7 @@ export const AgentListView = ({ heading, subheading }: AgentListViewProps) => { } else { totalTabEntries = totalAllAgents } + const totalPages = Math.ceil(totalTabEntries / PAGE_SIZE) const paginationRange = usePagination({ @@ -58,14 +64,13 @@ export const AgentListView = ({ heading, subheading }: AgentListViewProps) => { const filterAgents = (agents: AgentDetails[], query: string) => { if (!query.trim()) return agents - - const lowercaseQuery = query.toLowerCase().trim() return agents.filter( (agent) => - agent.name.toLowerCase().includes(lowercaseQuery) || - agent.address.toLowerCase().includes(lowercaseQuery) + agent.name.toLowerCase().includes(query.toLowerCase()) || + agent.address.toLowerCase().includes(query.toLowerCase()) ) } + const filteredAgents = useMemo( () => filterAgents(allAgents, searchQuery), [allAgents, searchQuery] @@ -75,6 +80,14 @@ export const AgentListView = ({ heading, subheading }: AgentListViewProps) => { [activeAgents, searchQuery] ) + const handleTabChange = (tab: string) => { + router.push(`?tab=${tab}`, { scroll: false }) + setCurrentPage(0) + if (tab === TabType.TopAttackers) { + setSearchQuery('') + } + } + const handlePreviousPage = () => { if (currentPage > 0) { setCurrentPage(currentPage - 1) @@ -87,33 +100,21 @@ export const AgentListView = ({ heading, subheading }: AgentListViewProps) => { } } - const handleTabChange = (tab: string) => { - setSelectedTab(tab as TabType) - setCurrentPage(0) - if (tab === TabType.TopAttackers) { - setSearchQuery('') - } - } - return (

{heading}

-

{subheading}

+
- +
Agents ranking @@ -130,75 +131,35 @@ export const AgentListView = ({ heading, subheading }: AgentListViewProps) => { placeholder="Search by agent" className="placeholder:text-[#6F6F6F] border border-[#6F6F6F] rounded-[28px] bg-transparent px-5 py-1 min-h-[2rem] text-sm outline-none focus:border-white w-full md:w-auto" /> - +
)}
- + - + - + + + {/* Pagination */}
- - {paginationRange.map((pageNumber, index) => { - if (pageNumber === DOTS) { - return ( - - ... - - ) - } - return ( - - ) - })} - + ))} + +
From 6ce20280df921f425df0a0ecaaf96fcb510da8c1 Mon Sep 17 00:00:00 2001 From: VEERENDRA VAMSHI <136776337+MKVEERENDRA@users.noreply.github.com> Date: Sat, 1 Mar 2025 12:12:59 +0530 Subject: [PATCH 4/5] Update AgentListView.tsx --- frontend/components/AgentListView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/AgentListView.tsx b/frontend/components/AgentListView.tsx index d21e240..4c2cd57 100644 --- a/frontend/components/AgentListView.tsx +++ b/frontend/components/AgentListView.tsx @@ -5,7 +5,7 @@ import { AgentsList, TabType } from './AgentsList' import { useMemo, useState } from 'react' import { AgentDetails, useAgents } from '@/hooks/useAgents' import { ChevronLeft, ChevronRight, Search } from 'lucide-react' -import { DOTS, usePagination } from '@/hooks/usePagination' +import { usePagination } from '@/hooks/usePagination' import { useAttackers } from '@/hooks/useAttackers' import { AttackersList } from './AttackersList' From 6b068158374b4a678364161cf9bba27bac1c8220 Mon Sep 17 00:00:00 2001 From: VEERENDRA VAMSHI <136776337+MKVEERENDRA@users.noreply.github.com> Date: Sat, 1 Mar 2025 12:35:00 +0530 Subject: [PATCH 5/5] Update AgentListView.tsx --- frontend/components/AgentListView.tsx | 99 +++++++++++++++------------ 1 file changed, 54 insertions(+), 45 deletions(-) diff --git a/frontend/components/AgentListView.tsx b/frontend/components/AgentListView.tsx index 4c2cd57..96ff09c 100644 --- a/frontend/components/AgentListView.tsx +++ b/frontend/components/AgentListView.tsx @@ -1,104 +1,113 @@ -'use client' -import { useSearchParams, useRouter } from 'next/navigation' -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -import { AgentsList, TabType } from './AgentsList' -import { useMemo, useState } from 'react' -import { AgentDetails, useAgents } from '@/hooks/useAgents' -import { ChevronLeft, ChevronRight, Search } from 'lucide-react' -import { usePagination } from '@/hooks/usePagination' -import { useAttackers } from '@/hooks/useAttackers' -import { AttackersList } from './AttackersList' - -const PAGE_SIZE = 10 -const SIBLING_COUNT = 1 +'use client'; +import { Suspense } from 'react'; +import { useSearchParams, useRouter } from 'next/navigation'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { AgentsList, TabType } from './AgentsList'; +import { useMemo, useState } from 'react'; +import { AgentDetails, useAgents } from '@/hooks/useAgents'; +import { ChevronLeft, ChevronRight, Search } from 'lucide-react'; +import { usePagination } from '@/hooks/usePagination'; +import { useAttackers } from '@/hooks/useAttackers'; +import { AttackersList } from './AttackersList'; + +const PAGE_SIZE = 10; +const SIBLING_COUNT = 1; type AgentListViewProps = { - heading: string - subheading: string -} + heading: string; + subheading: string; +}; export const AgentListView = ({ heading, subheading }: AgentListViewProps) => { - const searchParams = useSearchParams() - const router = useRouter() + return ( + Loading...
}> + + + ); +}; + +const AgentListViewInner = ({ heading, subheading }: AgentListViewProps) => { + const searchParams = useSearchParams(); + const router = useRouter(); // Get tab from URL, default to ActiveAgents - const selectedTab = (searchParams.get('tab') as TabType) || TabType.ActiveAgents - const [searchQuery, setSearchQuery] = useState('') - const [currentPage, setCurrentPage] = useState(0) + const selectedTab = (searchParams.get('tab') as TabType) || TabType.ActiveAgents; + const [searchQuery, setSearchQuery] = useState(''); + const [currentPage, setCurrentPage] = useState(0); const { agents: allAgents, loading: isFetchingAllAgents, totalAgents: totalAllAgents, - } = useAgents({ page: currentPage, pageSize: PAGE_SIZE, active: null }) + } = useAgents({ page: currentPage, pageSize: PAGE_SIZE, active: null }); const { agents: activeAgents, loading: isFetchingActiveAgents, totalAgents: totalActiveAgents, - } = useAgents({ page: currentPage, pageSize: PAGE_SIZE, active: true }) + } = useAgents({ page: currentPage, pageSize: PAGE_SIZE, active: true }); const { attackers = [], loading: isFetchingAttackers, totalAttackers, - } = useAttackers({ page: currentPage, pageSize: PAGE_SIZE }) + } = useAttackers({ page: currentPage, pageSize: PAGE_SIZE }); - let totalTabEntries = 0 + let totalTabEntries = 0; if (selectedTab === TabType.TopAttackers) { - totalTabEntries = totalAttackers + totalTabEntries = totalAttackers; } else if (selectedTab === TabType.ActiveAgents) { - totalTabEntries = totalActiveAgents + totalTabEntries = totalActiveAgents; } else { - totalTabEntries = totalAllAgents + totalTabEntries = totalAllAgents; } - const totalPages = Math.ceil(totalTabEntries / PAGE_SIZE) + const totalPages = Math.ceil(totalTabEntries / PAGE_SIZE); const paginationRange = usePagination({ currentPage, totalCount: totalTabEntries, pageSize: PAGE_SIZE, siblingCount: SIBLING_COUNT, - }) + }); const filterAgents = (agents: AgentDetails[], query: string) => { - if (!query.trim()) return agents + if (!query.trim()) return agents; return agents.filter( (agent) => agent.name.toLowerCase().includes(query.toLowerCase()) || agent.address.toLowerCase().includes(query.toLowerCase()) - ) - } + ); + }; const filteredAgents = useMemo( () => filterAgents(allAgents, searchQuery), [allAgents, searchQuery] - ) + ); const filteredActiveAgents = useMemo( () => filterAgents(activeAgents, searchQuery), [activeAgents, searchQuery] - ) + ); const handleTabChange = (tab: string) => { - router.push(`?tab=${tab}`, { scroll: false }) - setCurrentPage(0) + router.push(`?tab=${tab}`, { scroll: false }); + setCurrentPage(0); if (tab === TabType.TopAttackers) { - setSearchQuery('') + setSearchQuery(''); } - } + }; const handlePreviousPage = () => { if (currentPage > 0) { - setCurrentPage(currentPage - 1) + setCurrentPage(currentPage - 1); } - } + }; const handleNextPage = () => { if (currentPage < totalPages - 1) { - setCurrentPage(currentPage + 1) + setCurrentPage(currentPage + 1); } - } + }; return (
@@ -165,5 +174,5 @@ export const AgentListView = ({ heading, subheading }: AgentListViewProps) => {
- ) -} + ); +};