Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | 1x 1x 1x 1x 1x 1x 1x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 25x 5x 2x 3x 30x 30x 1x 1x 1x 1x 30x 1x 1x 30x 1x 1x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 1x 32x 32x 2x 2x 30x 30x | 'use client';
import type {
SkillEvent,
SkillEventQueryParams,
SkillEventType,
} from '@shared/types/data/skill-event';
import { useQuery } from '@tanstack/react-query';
import { getSkillEvents } from '@web/api/v1/super-agents/skill-events';
import type { ReactNode } from 'react';
import { createContext, useContext, useState } from 'react';
interface SkillEventsContextType {
events: SkillEvent[];
isLoading: boolean;
error: Error | null;
refetch: () => void;
// Filter setters
skillId: string | null;
setSkillId: (skillId: string | null) => void;
clusterId: string | null;
setClusterId: (clusterId: string | null) => void;
eventType: SkillEventType | null;
setEventType: (eventType: SkillEventType | null) => void;
scope: 'all' | 'skill-wide' | 'cluster-specific';
setScope: (scope: 'all' | 'skill-wide' | 'cluster-specific') => void;
// Pagination
page: number;
pageSize: number;
setPage: (page: number) => void;
setPageSize: (pageSize: number) => void;
hasMore: boolean;
// Helper functions
getEventsByClusterId: (clusterId: string) => SkillEvent[];
getEventsBySkillId: (skillId: string) => SkillEvent[];
clearFilters: () => void;
}
const SkillEventsContext = createContext<SkillEventsContextType | undefined>(
undefined,
);
export function SkillEventsProvider({ children }: { children: ReactNode }) {
const [skillId, setSkillId] = useState<string | null>(null);
const [clusterId, setClusterId] = useState<string | null>(null);
const [eventType, setEventType] = useState<SkillEventType | null>(null);
const [scope, setScope] = useState<'all' | 'skill-wide' | 'cluster-specific'>(
'all',
);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(20);
const queryParams: SkillEventQueryParams = {};
if (skillId) queryParams.skill_id = skillId;
if (clusterId) queryParams.cluster_id = clusterId;
if (eventType) queryParams.event_type = eventType;
queryParams.limit = pageSize;
queryParams.offset = (page - 1) * pageSize;
const {
data: fetchedEvents = [],
isLoading,
error,
refetch,
} = useQuery({
queryKey: ['skillEvents', queryParams],
queryFn: () => getSkillEvents(queryParams),
enabled: Boolean(skillId || clusterId),
});
// Apply client-side scope filter (since API doesn't have a direct scope param)
const events =
scope === 'all'
? fetchedEvents
: scope === 'skill-wide'
? fetchedEvents.filter((event) => event.cluster_id === null)
: fetchedEvents.filter((event) => event.cluster_id !== null);
// If we got fewer results than the page size, we're on the last page
const hasMore = fetchedEvents.length === pageSize;
const clearFilters = () => {
setEventType(null);
setScope('all');
setPage(1);
};
const getEventsByClusterId = (targetClusterId: string): SkillEvent[] => {
return events.filter((event) => event.cluster_id === targetClusterId);
};
const getEventsBySkillId = (targetSkillId: string): SkillEvent[] => {
return events.filter((event) => event.skill_id === targetSkillId);
};
const value: SkillEventsContextType = {
events,
isLoading,
error: error as Error | null,
refetch,
skillId,
setSkillId,
clusterId,
setClusterId,
eventType,
setEventType,
scope,
setScope,
page,
pageSize,
setPage,
setPageSize,
hasMore,
getEventsByClusterId,
getEventsBySkillId,
clearFilters,
};
return (
<SkillEventsContext.Provider value={value}>
{children}
</SkillEventsContext.Provider>
);
}
export const useSkillEvents = (): SkillEventsContextType => {
const context = useContext(SkillEventsContext);
if (!context) {
throw new Error('useSkillEvents must be used within a SkillEventsProvider');
}
return context;
};
|