My App
CourseKitFrontend

useConflictCheck

Real-time conflict preview for proposed schedule changes

Overview

useConflictCheck sends a proposed event to the server for conflict detection without persisting it. Use it to show real-time conflict warnings as users create or move events.

import { useConflictCheck } from '@hfu.digital/coursekit-react';

Usage

function EventEditor() {
    const { result, loading, error, check } = useConflictCheck();

    const handlePreview = async () => {
        await check(
            {
                title: 'Math 101',
                startTime: '2026-03-02T09:00:00',
                durationMin: 90,
                roomId: 'room-a1',
                recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO',
            },
            { start: '2026-03-01', end: '2026-06-30' },
        );
    };

    return (
        <div>
            <button onClick={handlePreview} disabled={loading}>
                Check Conflicts
            </button>
            {result?.hasErrors && (
                <p>Blocking conflicts: {result.conflicts.filter(c => c.severity === 'error').length}</p>
            )}
            {result?.hasWarnings && (
                <p>Warnings: {result.conflicts.filter(c => c.severity === 'warning').length}</p>
            )}
        </div>
    );
}

ProposedEvent

interface ProposedEvent {
    title: string;
    startTime: string;
    durationMin: number;
    recurrenceRule?: string | null;
    courseId?: string | null;
    roomId?: string | null;
    periodId?: string | null;
    metadata?: Record<string, unknown> | null;
}

ConflictInfo

interface ConflictInfo {
    id: string;
    type: string;
    severity: 'error' | 'warning';
    message: string;
    involvedEventIds: string[];
    involvedEntityIds: string[];
}

ConflictCheckResult

interface ConflictCheckResult {
    hasErrors: boolean;
    hasWarnings: boolean;
    conflicts: ConflictInfo[];
}

UseConflictCheckResult

interface UseConflictCheckResult {
    result: ConflictCheckResult | null;
    loading: boolean;
    error: Error | null;
    check: (
        event: ProposedEvent,
        dateRange: { start: string; end: string },
    ) => Promise<ConflictCheckResult | null>;
}
FieldTypeDescription
resultConflictCheckResult | nullThe most recent check result
loadingbooleantrue while the check is in flight
errorError | nullThe error if the check failed
checkfunctionTrigger a conflict check

API Endpoint

The hook calls:

POST {apiUrl}/conflicts/check
Body: { event: ProposedEvent, dateRange: { start, end } }

On this page