aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/components/CreateCardModal.test.tsx381
-rw-r--r--src/client/components/CreateCardModal.tsx194
-rw-r--r--src/client/pages/DeckDetailPage.tsx14
3 files changed, 589 insertions, 0 deletions
diff --git a/src/client/components/CreateCardModal.test.tsx b/src/client/components/CreateCardModal.test.tsx
new file mode 100644
index 0000000..6b429c8
--- /dev/null
+++ b/src/client/components/CreateCardModal.test.tsx
@@ -0,0 +1,381 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { apiClient } from "../api/client";
+
+vi.mock("../api/client", () => ({
+ apiClient: {
+ getAuthHeader: vi.fn(),
+ rpc: {
+ api: {
+ decks: {
+ ":deckId": {
+ cards: {
+ $post: vi.fn(),
+ },
+ },
+ },
+ },
+ },
+ },
+ ApiClientError: class ApiClientError extends Error {
+ constructor(
+ message: string,
+ public status: number,
+ public code?: string,
+ ) {
+ super(message);
+ this.name = "ApiClientError";
+ }
+ },
+}));
+
+// Import after mock is set up
+import { CreateCardModal } from "./CreateCardModal";
+
+type CardPostFn = (typeof apiClient.rpc.api.decks)[":deckId"]["cards"]["$post"];
+
+// Helper to create mock responses
+function mockResponse(data: {
+ ok: boolean;
+ status?: number;
+ // biome-ignore lint/suspicious/noExplicitAny: Test helper needs flexible typing
+ json: () => Promise<any>;
+}) {
+ return data as unknown as Awaited<ReturnType<CardPostFn>>;
+}
+
+describe("CreateCardModal", () => {
+ const defaultProps = {
+ isOpen: true,
+ deckId: "deck-123",
+ onClose: vi.fn(),
+ onCardCreated: vi.fn(),
+ };
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ vi.mocked(apiClient.getAuthHeader).mockReturnValue({
+ Authorization: "Bearer access-token",
+ });
+ });
+
+ afterEach(() => {
+ cleanup();
+ vi.restoreAllMocks();
+ });
+
+ it("does not render when closed", () => {
+ render(<CreateCardModal {...defaultProps} isOpen={false} />);
+
+ expect(screen.queryByRole("dialog")).toBeNull();
+ });
+
+ it("renders modal when open", () => {
+ render(<CreateCardModal {...defaultProps} />);
+
+ expect(screen.getByRole("dialog")).toBeDefined();
+ expect(
+ screen.getByRole("heading", { name: "Create New Card" }),
+ ).toBeDefined();
+ expect(screen.getByLabelText("Front")).toBeDefined();
+ expect(screen.getByLabelText("Back")).toBeDefined();
+ expect(screen.getByRole("button", { name: "Cancel" })).toBeDefined();
+ expect(screen.getByRole("button", { name: "Create" })).toBeDefined();
+ });
+
+ it("disables create button when front is empty", async () => {
+ const user = userEvent.setup();
+ render(<CreateCardModal {...defaultProps} />);
+
+ await user.type(screen.getByLabelText("Back"), "Answer");
+
+ const createButton = screen.getByRole("button", { name: "Create" });
+ expect(createButton).toHaveProperty("disabled", true);
+ });
+
+ it("disables create button when back is empty", async () => {
+ const user = userEvent.setup();
+ render(<CreateCardModal {...defaultProps} />);
+
+ await user.type(screen.getByLabelText("Front"), "Question");
+
+ const createButton = screen.getByRole("button", { name: "Create" });
+ expect(createButton).toHaveProperty("disabled", true);
+ });
+
+ it("enables create button when both front and back have content", async () => {
+ const user = userEvent.setup();
+ render(<CreateCardModal {...defaultProps} />);
+
+ await user.type(screen.getByLabelText("Front"), "Question");
+ await user.type(screen.getByLabelText("Back"), "Answer");
+
+ const createButton = screen.getByRole("button", { name: "Create" });
+ expect(createButton).toHaveProperty("disabled", false);
+ });
+
+ it("calls onClose when Cancel is clicked", async () => {
+ const user = userEvent.setup();
+ const onClose = vi.fn();
+ render(<CreateCardModal {...defaultProps} onClose={onClose} />);
+
+ await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+ expect(onClose).toHaveBeenCalledTimes(1);
+ });
+
+ it("calls onClose when clicking outside the modal", async () => {
+ const user = userEvent.setup();
+ const onClose = vi.fn();
+ render(<CreateCardModal {...defaultProps} onClose={onClose} />);
+
+ // Click on the backdrop (the dialog element itself)
+ const dialog = screen.getByRole("dialog");
+ await user.click(dialog);
+
+ expect(onClose).toHaveBeenCalledTimes(1);
+ });
+
+ it("does not call onClose when clicking inside the modal content", async () => {
+ const user = userEvent.setup();
+ const onClose = vi.fn();
+ render(<CreateCardModal {...defaultProps} onClose={onClose} />);
+
+ // Click on an element inside the modal
+ await user.click(screen.getByLabelText("Front"));
+
+ expect(onClose).not.toHaveBeenCalled();
+ });
+
+ it("creates card with front and back", async () => {
+ const user = userEvent.setup();
+ const onClose = vi.fn();
+ const onCardCreated = vi.fn();
+
+ vi.mocked(apiClient.rpc.api.decks[":deckId"].cards.$post).mockResolvedValue(
+ mockResponse({
+ ok: true,
+ json: async () => ({
+ card: {
+ id: "card-1",
+ deckId: "deck-123",
+ front: "What is 2+2?",
+ back: "4",
+ },
+ }),
+ }),
+ );
+
+ render(
+ <CreateCardModal
+ isOpen={true}
+ deckId="deck-123"
+ onClose={onClose}
+ onCardCreated={onCardCreated}
+ />,
+ );
+
+ await user.type(screen.getByLabelText("Front"), "What is 2+2?");
+ await user.type(screen.getByLabelText("Back"), "4");
+ await user.click(screen.getByRole("button", { name: "Create" }));
+
+ await waitFor(() => {
+ expect(
+ apiClient.rpc.api.decks[":deckId"].cards.$post,
+ ).toHaveBeenCalledWith(
+ {
+ param: { deckId: "deck-123" },
+ json: { front: "What is 2+2?", back: "4" },
+ },
+ { headers: { Authorization: "Bearer access-token" } },
+ );
+ });
+
+ expect(onCardCreated).toHaveBeenCalledTimes(1);
+ expect(onClose).toHaveBeenCalledTimes(1);
+ });
+
+ it("trims whitespace from front and back", async () => {
+ const user = userEvent.setup();
+
+ vi.mocked(apiClient.rpc.api.decks[":deckId"].cards.$post).mockResolvedValue(
+ mockResponse({
+ ok: true,
+ json: async () => ({ card: { id: "card-1" } }),
+ }),
+ );
+
+ render(<CreateCardModal {...defaultProps} />);
+
+ await user.type(screen.getByLabelText("Front"), " Question ");
+ await user.type(screen.getByLabelText("Back"), " Answer ");
+ await user.click(screen.getByRole("button", { name: "Create" }));
+
+ await waitFor(() => {
+ expect(
+ apiClient.rpc.api.decks[":deckId"].cards.$post,
+ ).toHaveBeenCalledWith(
+ {
+ param: { deckId: "deck-123" },
+ json: { front: "Question", back: "Answer" },
+ },
+ { headers: { Authorization: "Bearer access-token" } },
+ );
+ });
+ });
+
+ it("shows loading state during submission", async () => {
+ const user = userEvent.setup();
+
+ vi.mocked(
+ apiClient.rpc.api.decks[":deckId"].cards.$post,
+ ).mockImplementation(
+ () => new Promise(() => {}), // Never resolves
+ );
+
+ render(<CreateCardModal {...defaultProps} />);
+
+ await user.type(screen.getByLabelText("Front"), "Question");
+ await user.type(screen.getByLabelText("Back"), "Answer");
+ await user.click(screen.getByRole("button", { name: "Create" }));
+
+ expect(screen.getByRole("button", { name: "Creating..." })).toBeDefined();
+ expect(screen.getByRole("button", { name: "Creating..." })).toHaveProperty(
+ "disabled",
+ true,
+ );
+ expect(screen.getByRole("button", { name: "Cancel" })).toHaveProperty(
+ "disabled",
+ true,
+ );
+ expect(screen.getByLabelText("Front")).toHaveProperty("disabled", true);
+ expect(screen.getByLabelText("Back")).toHaveProperty("disabled", true);
+ });
+
+ it("displays API error message", async () => {
+ const user = userEvent.setup();
+
+ vi.mocked(apiClient.rpc.api.decks[":deckId"].cards.$post).mockResolvedValue(
+ mockResponse({
+ ok: false,
+ status: 400,
+ json: async () => ({ error: "Card front cannot be empty" }),
+ }),
+ );
+
+ render(<CreateCardModal {...defaultProps} />);
+
+ await user.type(screen.getByLabelText("Front"), "Question");
+ await user.type(screen.getByLabelText("Back"), "Answer");
+ await user.click(screen.getByRole("button", { name: "Create" }));
+
+ await waitFor(() => {
+ expect(screen.getByRole("alert").textContent).toContain(
+ "Card front cannot be empty",
+ );
+ });
+ });
+
+ it("displays generic error on unexpected failure", async () => {
+ const user = userEvent.setup();
+
+ vi.mocked(apiClient.rpc.api.decks[":deckId"].cards.$post).mockRejectedValue(
+ new Error("Network error"),
+ );
+
+ render(<CreateCardModal {...defaultProps} />);
+
+ await user.type(screen.getByLabelText("Front"), "Question");
+ await user.type(screen.getByLabelText("Back"), "Answer");
+ await user.click(screen.getByRole("button", { name: "Create" }));
+
+ await waitFor(() => {
+ expect(screen.getByRole("alert").textContent).toContain(
+ "Failed to create card. Please try again.",
+ );
+ });
+ });
+
+ it("resets form when closed and reopened", async () => {
+ const user = userEvent.setup();
+ const onClose = vi.fn();
+
+ const { rerender } = render(
+ <CreateCardModal
+ isOpen={true}
+ deckId="deck-123"
+ onClose={onClose}
+ onCardCreated={vi.fn()}
+ />,
+ );
+
+ // Type something in the form
+ await user.type(screen.getByLabelText("Front"), "Question");
+ await user.type(screen.getByLabelText("Back"), "Answer");
+
+ // Click cancel to close
+ await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+ // Reopen the modal
+ rerender(
+ <CreateCardModal
+ isOpen={true}
+ deckId="deck-123"
+ onClose={onClose}
+ onCardCreated={vi.fn()}
+ />,
+ );
+
+ // Form should be reset
+ expect(screen.getByLabelText("Front")).toHaveProperty("value", "");
+ expect(screen.getByLabelText("Back")).toHaveProperty("value", "");
+ });
+
+ it("resets form after successful creation", async () => {
+ const user = userEvent.setup();
+ const onClose = vi.fn();
+
+ vi.mocked(apiClient.rpc.api.decks[":deckId"].cards.$post).mockResolvedValue(
+ mockResponse({
+ ok: true,
+ json: async () => ({ card: { id: "card-1" } }),
+ }),
+ );
+
+ const { rerender } = render(
+ <CreateCardModal
+ isOpen={true}
+ deckId="deck-123"
+ onClose={onClose}
+ onCardCreated={vi.fn()}
+ />,
+ );
+
+ // Create a card
+ await user.type(screen.getByLabelText("Front"), "Question");
+ await user.type(screen.getByLabelText("Back"), "Answer");
+ await user.click(screen.getByRole("button", { name: "Create" }));
+
+ await waitFor(() => {
+ expect(onClose).toHaveBeenCalled();
+ });
+
+ // Reopen the modal
+ rerender(
+ <CreateCardModal
+ isOpen={true}
+ deckId="deck-123"
+ onClose={onClose}
+ onCardCreated={vi.fn()}
+ />,
+ );
+
+ // Form should be reset
+ expect(screen.getByLabelText("Front")).toHaveProperty("value", "");
+ expect(screen.getByLabelText("Back")).toHaveProperty("value", "");
+ });
+});
diff --git a/src/client/components/CreateCardModal.tsx b/src/client/components/CreateCardModal.tsx
new file mode 100644
index 0000000..c28cf0f
--- /dev/null
+++ b/src/client/components/CreateCardModal.tsx
@@ -0,0 +1,194 @@
+import { type FormEvent, useState } from "react";
+import { ApiClientError, apiClient } from "../api";
+
+interface CreateCardModalProps {
+ isOpen: boolean;
+ deckId: string;
+ onClose: () => void;
+ onCardCreated: () => void;
+}
+
+export function CreateCardModal({
+ isOpen,
+ deckId,
+ onClose,
+ onCardCreated,
+}: CreateCardModalProps) {
+ const [front, setFront] = useState("");
+ const [back, setBack] = useState("");
+ const [error, setError] = useState<string | null>(null);
+ const [isSubmitting, setIsSubmitting] = useState(false);
+
+ const resetForm = () => {
+ setFront("");
+ setBack("");
+ setError(null);
+ };
+
+ const handleClose = () => {
+ resetForm();
+ onClose();
+ };
+
+ const handleSubmit = async (e: FormEvent) => {
+ e.preventDefault();
+ setError(null);
+ setIsSubmitting(true);
+
+ try {
+ const res = await apiClient.rpc.api.decks[":deckId"].cards.$post(
+ {
+ param: { deckId },
+ json: {
+ front: front.trim(),
+ back: back.trim(),
+ },
+ },
+ {
+ headers: apiClient.getAuthHeader(),
+ },
+ );
+
+ 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,
+ );
+ }
+
+ resetForm();
+ onCardCreated();
+ onClose();
+ } catch (err) {
+ if (err instanceof ApiClientError) {
+ setError(err.message);
+ } else {
+ setError("Failed to create card. Please try again.");
+ }
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ if (!isOpen) {
+ return null;
+ }
+
+ const isFormValid = front.trim() && back.trim();
+
+ return (
+ <div
+ role="dialog"
+ aria-modal="true"
+ aria-labelledby="create-card-title"
+ style={{
+ position: "fixed",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ zIndex: 1000,
+ }}
+ onClick={(e) => {
+ if (e.target === e.currentTarget) {
+ handleClose();
+ }
+ }}
+ onKeyDown={(e) => {
+ if (e.key === "Escape") {
+ handleClose();
+ }
+ }}
+ >
+ <div
+ style={{
+ backgroundColor: "white",
+ padding: "1.5rem",
+ borderRadius: "8px",
+ width: "100%",
+ maxWidth: "500px",
+ margin: "1rem",
+ }}
+ >
+ <h2 id="create-card-title" style={{ marginTop: 0 }}>
+ Create New Card
+ </h2>
+
+ <form onSubmit={handleSubmit}>
+ {error && (
+ <div role="alert" style={{ color: "red", marginBottom: "1rem" }}>
+ {error}
+ </div>
+ )}
+
+ <div style={{ marginBottom: "1rem" }}>
+ <label
+ htmlFor="card-front"
+ style={{ display: "block", marginBottom: "0.25rem" }}
+ >
+ Front
+ </label>
+ <textarea
+ id="card-front"
+ value={front}
+ onChange={(e) => setFront(e.target.value)}
+ required
+ disabled={isSubmitting}
+ rows={3}
+ placeholder="Question or prompt"
+ style={{
+ width: "100%",
+ boxSizing: "border-box",
+ resize: "vertical",
+ }}
+ />
+ </div>
+
+ <div style={{ marginBottom: "1rem" }}>
+ <label
+ htmlFor="card-back"
+ style={{ display: "block", marginBottom: "0.25rem" }}
+ >
+ Back
+ </label>
+ <textarea
+ id="card-back"
+ value={back}
+ onChange={(e) => setBack(e.target.value)}
+ required
+ disabled={isSubmitting}
+ rows={3}
+ placeholder="Answer or explanation"
+ style={{
+ width: "100%",
+ boxSizing: "border-box",
+ resize: "vertical",
+ }}
+ />
+ </div>
+
+ <div
+ style={{
+ display: "flex",
+ gap: "0.5rem",
+ justifyContent: "flex-end",
+ }}
+ >
+ <button type="button" onClick={handleClose} disabled={isSubmitting}>
+ Cancel
+ </button>
+ <button type="submit" disabled={isSubmitting || !isFormValid}>
+ {isSubmitting ? "Creating..." : "Create"}
+ </button>
+ </div>
+ </form>
+ </div>
+ </div>
+ );
+}
diff --git a/src/client/pages/DeckDetailPage.tsx b/src/client/pages/DeckDetailPage.tsx
index c713ab0..9fce7b7 100644
--- a/src/client/pages/DeckDetailPage.tsx
+++ b/src/client/pages/DeckDetailPage.tsx
@@ -1,6 +1,7 @@
import { useCallback, useEffect, useState } from "react";
import { Link, useParams } from "wouter";
import { ApiClientError, apiClient } from "../api";
+import { CreateCardModal } from "../components/CreateCardModal";
interface Card {
id: string;
@@ -34,6 +35,7 @@ export function DeckDetailPage() {
const [cards, setCards] = useState<Card[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
+ const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const fetchDeck = useCallback(async () => {
if (!deckId) return;
@@ -158,6 +160,9 @@ export function DeckDetailPage() {
}}
>
<h2 style={{ margin: 0 }}>Cards ({cards.length})</h2>
+ <button type="button" onClick={() => setIsCreateModalOpen(true)}>
+ Add Card
+ </button>
</div>
{cards.length === 0 && (
@@ -241,6 +246,15 @@ export function DeckDetailPage() {
)}
</main>
)}
+
+ {deckId && (
+ <CreateCardModal
+ isOpen={isCreateModalOpen}
+ deckId={deckId}
+ onClose={() => setIsCreateModalOpen(false)}
+ onCardCreated={fetchCards}
+ />
+ )}
</div>
);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-16 10:12:50 +0000