From 2fb6471a685bec1433be3335f377a1a2313e4820 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Thu, 1 Jan 2026 23:44:50 +0900
Subject: refactor(client): migrate API calls to typed RPC client
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace raw fetch() calls with apiClient.rpc typed client across all
modal and page components. This provides better type safety and
eliminates manual auth header handling.

- Make handleResponse public for component usage
- Update all component tests to mock RPC methods instead of fetch
- Change POSTGRES_HOST default to kioku-db for Docker compatibility

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/client/components/CreateNoteTypeModal.test.tsx | 96 ++++++++--------------
 1 file changed, 33 insertions(+), 63 deletions(-)

(limited to 'src/client/components/CreateNoteTypeModal.test.tsx')

diff --git a/src/client/components/CreateNoteTypeModal.test.tsx b/src/client/components/CreateNoteTypeModal.test.tsx
index 9536f53..59d8312 100644
--- a/src/client/components/CreateNoteTypeModal.test.tsx
+++ b/src/client/components/CreateNoteTypeModal.test.tsx
@@ -4,11 +4,20 @@
 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";
+
+const mockPost = vi.fn();
+const mockHandleResponse = vi.fn();
 
 vi.mock("../api/client", () => ({
 	apiClient: {
-		getAuthHeader: vi.fn(),
+		rpc: {
+			api: {
+				"note-types": {
+					$post: (args: unknown) => mockPost(args),
+				},
+			},
+		},
+		handleResponse: (res: unknown) => mockHandleResponse(res),
 	},
 	ApiClientError: class ApiClientError extends Error {
 		constructor(
@@ -22,13 +31,10 @@ vi.mock("../api/client", () => ({
 	},
 }));
 
+import { ApiClientError } from "../api/client";
 // Import after mock is set up
 import { CreateNoteTypeModal } from "./CreateNoteTypeModal";
 
-// Mock fetch globally
-const mockFetch = vi.fn();
-global.fetch = mockFetch;
-
 describe("CreateNoteTypeModal", () => {
 	const defaultProps = {
 		isOpen: true,
@@ -38,8 +44,15 @@ describe("CreateNoteTypeModal", () => {
 
 	beforeEach(() => {
 		vi.clearAllMocks();
-		vi.mocked(apiClient.getAuthHeader).mockReturnValue({
-			Authorization: "Bearer access-token",
+		mockPost.mockResolvedValue({ ok: true });
+		mockHandleResponse.mockResolvedValue({
+			noteType: {
+				id: "note-type-1",
+				name: "Test Note Type",
+				frontTemplate: "{{Front}}",
+				backTemplate: "{{Back}}",
+				isReversible: false,
+			},
 		});
 	});
 
@@ -126,19 +139,6 @@ describe("CreateNoteTypeModal", () => {
 		const onClose = vi.fn();
 		const onNoteTypeCreated = vi.fn();
 
-		mockFetch.mockResolvedValue({
-			ok: true,
-			json: async () => ({
-				noteType: {
-					id: "note-type-1",
-					name: "Test Note Type",
-					frontTemplate: "{{Front}}",
-					backTemplate: "{{Back}}",
-					isReversible: true,
-				},
-			}),
-		});
-
 		render(
 			<CreateNoteTypeModal
 				isOpen={true}
@@ -153,18 +153,13 @@ describe("CreateNoteTypeModal", () => {
 		await user.click(screen.getByRole("button", { name: "Create" }));
 
 		await waitFor(() => {
-			expect(mockFetch).toHaveBeenCalledWith("/api/note-types", {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-					Authorization: "Bearer access-token",
-				},
-				body: JSON.stringify({
+			expect(mockPost).toHaveBeenCalledWith({
+				json: {
 					name: "Test Note Type",
 					frontTemplate: "{{Front}}",
 					backTemplate: "{{Back}}",
 					isReversible: true,
-				}),
+				},
 			});
 		});
 
@@ -175,30 +170,24 @@ describe("CreateNoteTypeModal", () => {
 	it("trims whitespace from text fields", async () => {
 		const user = userEvent.setup();
 
-		mockFetch.mockResolvedValue({
-			ok: true,
-			json: async () => ({ noteType: { id: "note-type-1" } }),
-		});
-
 		render(<CreateNoteTypeModal {...defaultProps} />);
 
 		await user.type(screen.getByLabelText("Name"), "  Test Note Type  ");
 		await user.click(screen.getByRole("button", { name: "Create" }));
 
 		await waitFor(() => {
-			expect(mockFetch).toHaveBeenCalledWith(
-				"/api/note-types",
-				expect.objectContaining({
-					body: expect.stringContaining('"name":"Test Note Type"'),
+			expect(mockPost).toHaveBeenCalledWith({
+				json: expect.objectContaining({
+					name: "Test Note Type",
 				}),
-			);
+			});
 		});
 	});
 
 	it("shows loading state during submission", async () => {
 		const user = userEvent.setup();
 
-		mockFetch.mockImplementation(() => new Promise(() => {})); // Never resolves
+		mockPost.mockImplementation(() => new Promise(() => {})); // Never resolves
 
 		render(<CreateNoteTypeModal {...defaultProps} />);
 
@@ -220,11 +209,9 @@ describe("CreateNoteTypeModal", () => {
 	it("displays API error message", async () => {
 		const user = userEvent.setup();
 
-		mockFetch.mockResolvedValue({
-			ok: false,
-			status: 400,
-			json: async () => ({ error: "Note type name already exists" }),
-		});
+		mockHandleResponse.mockRejectedValue(
+			new ApiClientError("Note type name already exists", 400),
+		);
 
 		render(<CreateNoteTypeModal {...defaultProps} />);
 
@@ -241,7 +228,7 @@ describe("CreateNoteTypeModal", () => {
 	it("displays generic error on unexpected failure", async () => {
 		const user = userEvent.setup();
 
-		mockFetch.mockRejectedValue(new Error("Network error"));
+		mockPost.mockRejectedValue(new Error("Network error"));
 
 		render(<CreateNoteTypeModal {...defaultProps} />);
 
@@ -255,23 +242,6 @@ describe("CreateNoteTypeModal", () => {
 		});
 	});
 
-	it("displays error when not authenticated", async () => {
-		const user = userEvent.setup();
-
-		vi.mocked(apiClient.getAuthHeader).mockReturnValue(undefined);
-
-		render(<CreateNoteTypeModal {...defaultProps} />);
-
-		await user.type(screen.getByLabelText("Name"), "Test Note Type");
-		await user.click(screen.getByRole("button", { name: "Create" }));
-
-		await waitFor(() => {
-			expect(screen.getByRole("alert").textContent).toContain(
-				"Not authenticated",
-			);
-		});
-	});
-
 	it("resets form when closed and reopened", async () => {
 		const user = userEvent.setup();
 		const onClose = vi.fn();
-- 
cgit v1.2.3-70-g09d2

