Deck Hooks

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

function DeckPage({ id }: { id: string }) {
    const { deck, counts, loading, error, refetch } = useDeck(id);
}

interface UseDeckReturn {
    deck: DeckBase | null;
    counts: DeckCounts | null;
    loading: boolean;
    error: string | null;
    refetch: () => Promise<void>;
}

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

function DeckListPage() {
    const { decks, loading, error, refetch } = useDecks();
}

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

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

function DeckBrowser() {
    const { tree, loading, error, refetch } = useDeckTree();
}

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

interface DeckTreeNode extends DeckBase {
    children: DeckTreeNode[];
    counts?: DeckCounts;
}

function DeckNode({ node }: { node: DeckTreeNode }) {
    return (
        <div style={{ paddingLeft: '1rem' }}>
            <div>
                <strong>{node.name}</strong>
                {node.counts && (
                    <span>
                        {' '}— {node.counts.new} new, {node.counts.review} review
                    </span>
                )}
            </div>
            {node.children.map((child) => (
                <DeckNode key={child.id} node={child} />
            ))}
        </div>
    );
}

function DeckBrowser() {
    const { tree, loading } = useDeckTree();

    if (loading) return <p>Loading...</p>;

    return (
        <div>
            {tree.map((root) => (
                <DeckNode key={root.id} node={root} />
            ))}
        </div>
    );
}