My App
CourseKitFrontend

useMutation

Create, update, and delete events and exceptions

Overview

useMutation provides methods for creating, updating, and deleting timetable events and exceptions.

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

Usage

function EventActions({ eventId }: { eventId: string }) {
    const { createEvent, updateEvent, deleteEvent, loading, error } = useMutation({
        onSuccess: () => console.log('Operation succeeded'),
        onError: (err) => console.error('Operation failed:', err),
    });

    const handleCreate = async () => {
        await createEvent({
            title: 'New Lecture',
            startTime: '2026-03-02T09:00:00',
            durationMin: 90,
            roomId: 'room-a1',
        });
    };

    const handleUpdate = async () => {
        await updateEvent(eventId, { title: 'Updated Lecture' });
    };

    const handleDelete = async () => {
        await deleteEvent(eventId);
    };

    return (
        <div>
            <button onClick={handleCreate} disabled={loading}>Create</button>
            <button onClick={handleUpdate} disabled={loading}>Update</button>
            <button onClick={handleDelete} disabled={loading}>Delete</button>
            {error && <p>Error: {error.message}</p>}
        </div>
    );
}

MutationOptions

interface MutationOptions {
    onSuccess?: (data: unknown) => void;
    onError?: (error: Error) => void;
}

UseMutationResult

interface UseMutationResult {
    loading: boolean;
    error: Error | null;
    createEvent: (data: Record<string, unknown>) => Promise<unknown>;
    updateEvent: (id: string, data: Record<string, unknown>) => Promise<unknown>;
    deleteEvent: (id: string) => Promise<void>;
    createException: (data: Record<string, unknown>) => Promise<unknown>;
    deleteException: (id: string) => Promise<void>;
}
MethodHTTPEndpointDescription
createEventPOST/eventsCreate a new event
updateEventPATCH/events/:idUpdate an existing event
deleteEventDELETE/events/:idDelete an event
createExceptionPOST/exceptionsCreate an exception (cancel, modify, add)
deleteExceptionDELETE/exceptions/:idDelete an exception

Exception Management

Use createException to cancel, modify, or add individual occurrences of a recurring event:

const { createException } = useMutation();

// Cancel a single occurrence
await createException({
    eventId: 'event-1',
    originalDate: '2026-03-09',
    type: 'cancelled',
});

// Modify a single occurrence (different room)
await createException({
    eventId: 'event-1',
    originalDate: '2026-03-16',
    type: 'modified',
    newRoomId: 'room-b2',
});

// Add an extra occurrence
await createException({
    eventId: 'event-1',
    originalDate: '2026-03-20',
    type: 'added',
    newStartTime: '2026-03-20T14:00:00',
    newDurationMin: 60,
});

On this page