Card Hooks

import { useCard } from '@loopkit/react';

function CardPreview({ id }: { id: string }) {
    const { card, renderedContent, loading, error, refetch } = useCard(id);
}

interface UseCardReturn {
    card: CardBase | null;
    renderedContent: RenderedCard | null;
    loading: boolean;
    error: string | null;
    refetch: () => Promise<void>;
}

import { useCardEditor } from '@loopkit/react';

function Editor() {
    const { loading, error, create, update } = useCardEditor();
}

interface UseCardEditorReturn {
    loading: boolean;
    error: string | null;
    create: (
        noteTypeId: string,
        fields: Field[],
        deckId: string,
        tags?: string[],
    ) => Promise<NoteBase>;
    update: (
        noteId: string,
        fields: Field[],
        tags?: string[],
    ) => Promise<NoteBase>;
}

function AddCard({ deckId }: { deckId: string }) {
    const { create, loading, error } = useCardEditor();
    const { noteTypes } = useNoteTypes();
    const [front, setFront] = useState('');
    const [back, setBack] = useState('');

    const handleSubmit = async () => {
        const basicType = noteTypes.find((t) => t.name === 'Basic');
        if (!basicType) return;

        await create(
            basicType.id,
            [
                { name: 'Front', value: front, ordinal: 0 },
                { name: 'Back', value: back, ordinal: 1 },
            ],
            deckId,
            ['manual'],
        );
        setFront('');
        setBack('');
    };

    return (
        <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
            <input value={front} onChange={(e) => setFront(e.target.value)} placeholder="Front" />
            <input value={back} onChange={(e) => setBack(e.target.value)} placeholder="Back" />
            <button type="submit" disabled={loading}>Add Card</button>
            {error && <p>{error}</p>}
        </form>
    );
}

import { useNoteTypes } from '@loopkit/react';

function NoteTypeSelector() {
    const { noteTypes, loading, error, refetch } = useNoteTypes();
}

interface UseNoteTypesReturn {
    noteTypes: NoteType[];
    loading: boolean;
    error: string | null;
    refetch: () => Promise<void>;
}