From af9a4912f914bb198fe13bd3421ea33ff3bf9d45 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sun, 7 Dec 2025 18:21:20 +0900 Subject: feat(client): add card list view in deck detail page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add DeckDetailPage component that displays all cards in a deck with their front/back content, state, review count, and lapses. Deck names on HomePage are now clickable links to navigate to the deck detail view. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/client/pages/DeckDetailPage.tsx | 246 ++++++++++++++++++++++++++++++++++++ 1 file changed, 246 insertions(+) create mode 100644 src/client/pages/DeckDetailPage.tsx (limited to 'src/client/pages/DeckDetailPage.tsx') diff --git a/src/client/pages/DeckDetailPage.tsx b/src/client/pages/DeckDetailPage.tsx new file mode 100644 index 0000000..c713ab0 --- /dev/null +++ b/src/client/pages/DeckDetailPage.tsx @@ -0,0 +1,246 @@ +import { useCallback, useEffect, useState } from "react"; +import { Link, useParams } from "wouter"; +import { ApiClientError, apiClient } from "../api"; + +interface Card { + id: string; + deckId: string; + front: string; + back: string; + state: number; + due: string; + reps: number; + lapses: number; + createdAt: string; + updatedAt: string; +} + +interface Deck { + id: string; + name: string; + description: string | null; +} + +const CardStateLabels: Record = { + 0: "New", + 1: "Learning", + 2: "Review", + 3: "Relearning", +}; + +export function DeckDetailPage() { + const { deckId } = useParams<{ deckId: string }>(); + const [deck, setDeck] = useState(null); + const [cards, setCards] = useState([]); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(null); + + const fetchDeck = useCallback(async () => { + if (!deckId) return; + + const authHeader = apiClient.getAuthHeader(); + if (!authHeader) { + throw new ApiClientError("Not authenticated", 401); + } + + const res = await fetch(`/api/decks/${deckId}`, { + headers: authHeader, + }); + + if (!res.ok) { + const errorBody = await res.json().catch(() => ({})); + throw new ApiClientError( + (errorBody as { error?: string }).error || + `Request failed with status ${res.status}`, + res.status, + ); + } + + const data = await res.json(); + setDeck(data.deck); + }, [deckId]); + + const fetchCards = useCallback(async () => { + if (!deckId) return; + + const authHeader = apiClient.getAuthHeader(); + if (!authHeader) { + throw new ApiClientError("Not authenticated", 401); + } + + const res = await fetch(`/api/decks/${deckId}/cards`, { + headers: authHeader, + }); + + if (!res.ok) { + const errorBody = await res.json().catch(() => ({})); + throw new ApiClientError( + (errorBody as { error?: string }).error || + `Request failed with status ${res.status}`, + res.status, + ); + } + + const data = await res.json(); + setCards(data.cards); + }, [deckId]); + + const fetchData = useCallback(async () => { + setIsLoading(true); + setError(null); + + try { + await Promise.all([fetchDeck(), fetchCards()]); + } catch (err) { + if (err instanceof ApiClientError) { + setError(err.message); + } else { + setError("Failed to load data. Please try again."); + } + } finally { + setIsLoading(false); + } + }, [fetchDeck, fetchCards]); + + useEffect(() => { + fetchData(); + }, [fetchData]); + + if (!deckId) { + return ( +
+

Invalid deck ID

+ Back to decks +
+ ); + } + + return ( +
+
+ + ← Back to Decks + +
+ + {isLoading &&

Loading...

} + + {error && ( +
+ {error} + +
+ )} + + {!isLoading && !error && deck && ( +
+
+

{deck.name}

+ {deck.description && ( +

+ {deck.description} +

+ )} +
+ +
+

Cards ({cards.length})

+
+ + {cards.length === 0 && ( +
+

This deck has no cards yet.

+

Add cards to start studying!

+
+ )} + + {cards.length > 0 && ( +
    + {cards.map((card) => ( +
  • +
    +
    +
    +
    + Front: +

    + {card.front} +

    +
    +
    + Back: +

    + {card.back} +

    +
    +
    +
    + + State: {CardStateLabels[card.state] || "Unknown"} + + Reviews: {card.reps} + Lapses: {card.lapses} +
    +
    +
    +
    • + ))} +
+ )} +
+ )} +
+ ); +} -- cgit v1.2.3-70-g09d2