65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import { useMemo, useState, useCallback, useEffect } from "react";
|
|
import { View } from "react-native";
|
|
import { StyleSheet } from "react-native-unistyles";
|
|
import { BackHeader } from "@/components/headers/back-header";
|
|
import { AgentList } from "@/components/agent-list";
|
|
import { useAllAgentsList } from "@/hooks/use-all-agents-list";
|
|
import { router } from "expo-router";
|
|
import { buildHostRootRoute } from "@/utils/host-routes";
|
|
|
|
export function AgentsScreen({ serverId }: { serverId: string }) {
|
|
const { agents, isRevalidating, refreshAll } = useAllAgentsList({
|
|
serverId,
|
|
});
|
|
|
|
// Track user-initiated refresh to avoid showing spinner on background revalidation
|
|
const [isManualRefresh, setIsManualRefresh] = useState(false);
|
|
|
|
const handleRefresh = useCallback(() => {
|
|
setIsManualRefresh(true);
|
|
refreshAll();
|
|
}, [refreshAll]);
|
|
|
|
// Reset manual refresh flag when revalidation completes
|
|
useEffect(() => {
|
|
if (!isRevalidating && isManualRefresh) {
|
|
setIsManualRefresh(false);
|
|
}
|
|
}, [isRevalidating, isManualRefresh]);
|
|
|
|
const sortedAgents = useMemo(() => {
|
|
return [...agents].sort((a, b) => {
|
|
const aNeedsInput = (a.pendingPermissionCount ?? 0) > 0;
|
|
const bNeedsInput = (b.pendingPermissionCount ?? 0) > 0;
|
|
if (aNeedsInput && !bNeedsInput) return -1;
|
|
if (!aNeedsInput && bNeedsInput) return 1;
|
|
|
|
if (a.requiresAttention && !b.requiresAttention) return -1;
|
|
if (!a.requiresAttention && b.requiresAttention) return 1;
|
|
return 0;
|
|
});
|
|
}, [agents]);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<BackHeader
|
|
title="All agents"
|
|
onBack={() => router.replace(buildHostRootRoute(serverId) as any)}
|
|
/>
|
|
<AgentList
|
|
agents={sortedAgents}
|
|
showCheckoutInfo={false}
|
|
isRefreshing={isManualRefresh && isRevalidating}
|
|
onRefresh={handleRefresh}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create((theme) => ({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: theme.colors.surface0,
|
|
},
|
|
}));
|