From f8e4be9b36a16969ac53bd9ce12ce8064be10196 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sun, 4 Jan 2026 17:43:59 +0900 Subject: refactor(client): migrate state management from React Context to Jotai MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace AuthProvider and SyncProvider with Jotai atoms for more granular state management and better performance. This migration: - Creates atoms for auth, sync, decks, cards, noteTypes, and study state - Uses atomFamily for parameterized state (e.g., cards by deckId) - Introduces StoreInitializer component for subscription initialization - Updates all components and pages to use useAtomValue/useSetAtom - Updates all tests to use Jotai Provider with createStore pattern 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/client/atoms/decks.ts | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/client/atoms/decks.ts (limited to 'src/client/atoms/decks.ts') diff --git a/src/client/atoms/decks.ts b/src/client/atoms/decks.ts new file mode 100644 index 0000000..57abef4 --- /dev/null +++ b/src/client/atoms/decks.ts @@ -0,0 +1,37 @@ +import { apiClient } from "../api/client"; +import { createReloadableAtom, createReloadableAtomFamily } from "./utils"; + +export interface Deck { + id: string; + name: string; + description: string | null; + newCardsPerDay: number; + createdAt: string; + updatedAt: string; +} + +// ===================== +// Decks List - Suspense-compatible +// ===================== + +export const decksAtom = createReloadableAtom(async () => { + const res = await apiClient.rpc.api.decks.$get(undefined, { + headers: apiClient.getAuthHeader(), + }); + const data = await apiClient.handleResponse<{ decks: Deck[] }>(res); + return data.decks; +}); + +// ===================== +// Single Deck by ID - Suspense-compatible +// ===================== + +export const deckByIdAtomFamily = createReloadableAtomFamily( + async (deckId: string) => { + const res = await apiClient.rpc.api.decks[":id"].$get({ + param: { id: deckId }, + }); + const data = await apiClient.handleResponse<{ deck: Deck }>(res); + return data.deck; + }, +); -- cgit v1.2.3-70-g09d2