CourseKitFrontend
useAvailability
Fetch availability rules and free slots for instructors and rooms
Overview
useAvailability fetches availability rules and computed free slots for an entity within a date range.
import { useAvailability } from '@hfu.digital/coursekit-react';Usage
function InstructorAvailability({ instructorId }: { instructorId: string }) {
const { slots, freeSlots, loading } = useAvailability({
entityType: 'instructor',
entityId: instructorId,
dateRange: { start: '2026-03-02', end: '2026-03-08' },
});
if (loading) return <div>Loading...</div>;
return (
<div>
<h3>Blocked Times</h3>
{slots.filter(s => s.type === 'blocked').map(slot => (
<div key={slot.id}>
{slot.startTime} - {slot.endTime} ({slot.hardness})
</div>
))}
<h3>Free Slots</h3>
{freeSlots.map((slot, i) => (
<div key={i}>
{slot.start} - {slot.end} ({slot.durationMin} min)
</div>
))}
</div>
);
}Pass null to skip the query:
const result = useAvailability(query ?? null);AvailabilityQuery
interface AvailabilityQuery {
entityType: 'instructor' | 'room';
entityId: string;
dateRange: { start: string; end: string };
}AvailabilitySlot
interface AvailabilitySlot {
id: string;
entityType: 'instructor' | 'room';
entityId: string;
startTime: string;
endTime: string;
type: 'available' | 'blocked' | 'preferred';
hardness: 'hard' | 'soft';
}FreeSlot
interface FreeSlot {
start: string;
end: string;
durationMin: number;
}UseAvailabilityResult
interface UseAvailabilityResult {
slots: AvailabilitySlot[];
freeSlots: FreeSlot[];
loading: boolean;
error: Error | null;
refetch: () => Promise<void>;
}| Field | Type | Description |
|---|---|---|
slots | AvailabilitySlot[] | All availability rules for the entity |
freeSlots | FreeSlot[] | Computed free time windows |
loading | boolean | true while the request is in flight |
error | Error | null | The error if the request failed |
refetch | () => Promise<void> | Manually re-fetch the data |
API Endpoint
The hook calls:
GET {apiUrl}/availability?entityType=...&entityId=...&startDate=...&endDate=...