diff --git a/devfront/src/features/clients/ClientsPage.tsx b/devfront/src/features/clients/ClientsPage.tsx index 7be3d883..d2ae9306 100644 --- a/devfront/src/features/clients/ClientsPage.tsx +++ b/devfront/src/features/clients/ClientsPage.tsx @@ -86,6 +86,9 @@ type RecentClientChange = { detailLabels: Array<{ label: string; value: string }>; }; +const recentClientChangesInitialCount = 5; +const recentClientChangesBatchSize = 5; + const recentClientActions = new Set([ "CREATE_CLIENT", "UPDATE_CLIENT", @@ -317,6 +320,8 @@ function ClientsPage() { const [isRequestModalOpen, setIsRequestModalOpen] = useState(false); const [isRecentChangesGuideOpen, setIsRecentChangesGuideOpen] = useState(false); + const [visibleRecentClientChangesCount, setVisibleRecentClientChangesCount] = + useState(recentClientChangesInitialCount); const [sortConfig, setSortConfig] = useState | null>({ key: "createdAt", @@ -501,7 +506,10 @@ function ClientsPage() { }; }) .filter((item): item is RecentClientChange => Boolean(item)) - .slice(0, 4); + .sort( + (left, right) => + new Date(right.timestamp).getTime() - new Date(left.timestamp).getTime(), + ); }, [clients, recentAuditData?.items]); const recentClientActorIds = useMemo(() => { @@ -543,6 +551,32 @@ function ClientsPage() { return new Set(recentClientChangesWithActors.map((item) => item.clientId)).size; }, [recentClientChangesWithActors]); + const visibleRecentClientChanges = useMemo(() => { + return recentClientChangesWithActors.slice( + 0, + visibleRecentClientChangesCount, + ); + }, [recentClientChangesWithActors, visibleRecentClientChangesCount]); + + const hasMoreRecentClientChanges = + recentClientChangesWithActors.length > visibleRecentClientChanges.length; + + useEffect(() => { + if ( + visibleRecentClientChangesCount > recentClientChangesWithActors.length + ) { + setVisibleRecentClientChangesCount( + Math.max( + recentClientChangesInitialCount, + recentClientChangesWithActors.length, + ), + ); + } + }, [ + recentClientChangesWithActors.length, + visibleRecentClientChangesCount, + ]); + const isLoading = isLoadingClients || isLoadingStats || @@ -1085,7 +1119,7 @@ function ClientsPage() { - {recentClientChanges.length === 0 ? ( + {visibleRecentClientChanges.length === 0 ? (
{t( "msg.dev.clients.recent_changes.empty", @@ -1093,7 +1127,7 @@ function ClientsPage() { )}
) : ( - recentClientChangesWithActors.map((item) => { + visibleRecentClientChanges.map((item) => { const { date, time } = formatAuditDateParts(item.timestamp); return (
+ +
+ ) : null}