Import & Export Hooks

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

function ImportPage() {
    const { loading, error, result, importCSV, importJSON } = useImport();
}

interface UseImportReturn {
    loading: boolean;
    error: string | null;
    result: ImportResult | null;
    importCSV: (
        file: File,
        mapping: Record<string, string>,
        deckId: string,
        noteTypeId: string,
        tags?: string[],
    ) => Promise<ImportResult>;
    importJSON: (file: File) => Promise<ImportResult>;
}

function CSVImporter({ deckId, noteTypeId }: { deckId: string; noteTypeId: string }) {
    const { importCSV, loading, result, error } = useImport();

    const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;

        await importCSV(
            file,
            { question: 'Front', answer: 'Back' },
            deckId,
            noteTypeId,
        );
    };

    return (
        <div>
            <input type="file" accept=".csv" onChange={handleFile} disabled={loading} />
            {result && (
                <p>
                    Imported {result.notesCreated} notes, {result.cardsCreated} cards
                    {result.errors.length > 0 && ` (${result.errors.length} errors)`}
                </p>
            )}
            {error && <p>{error}</p>}
        </div>
    );
}

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

function ExportPage() {
    const { loading, error, exportCSV, exportJSON } = useExport();
}

interface UseExportReturn {
    loading: boolean;
    error: string | null;
    exportCSV: (deckId: string) => Promise<void>;
    exportJSON: (deckId: string, includeReviewLogs?: boolean) => Promise<void>;
}

function ExportButtons({ deckId }: { deckId: string }) {
    const { exportCSV, exportJSON, loading } = useExport();

    return (
        <div>
            <button onClick={() => exportCSV(deckId)} disabled={loading}>
                Export CSV
            </button>
            <button onClick={() => exportJSON(deckId, true)} disabled={loading}>
                Export JSON (with review logs)
            </button>
        </div>
    );
}

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

function TagFilter() {
    const { tags, loading, error, refetch } = useTags();
}

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