From f8e4be9b36a16969ac53bd9ce12ce8064be10196 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
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 <noreply@anthropic.com>
---
 src/client/components/OfflineBanner.test.tsx | 41 ++++++++++++++--------------
 1 file changed, 21 insertions(+), 20 deletions(-)

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

diff --git a/src/client/components/OfflineBanner.test.tsx b/src/client/components/OfflineBanner.test.tsx
index 53ba815..95c9811 100644
--- a/src/client/components/OfflineBanner.test.tsx
+++ b/src/client/components/OfflineBanner.test.tsx
@@ -3,14 +3,25 @@
  */
 import "fake-indexeddb/auto";
 import { cleanup, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { isOnlineAtom, pendingCountAtom } from "../atoms";
 import { OfflineBanner } from "./OfflineBanner";
 
-// Mock the useSync hook
-const mockUseSync = vi.fn();
-vi.mock("../stores", () => ({
-	useSync: () => mockUseSync(),
-}));
+function renderWithStore(atomValues: {
+	isOnline: boolean;
+	pendingCount: number;
+}) {
+	const store = createStore();
+	store.set(isOnlineAtom, atomValues.isOnline);
+	store.set(pendingCountAtom, atomValues.pendingCount);
+
+	return render(
+		<Provider store={store}>
+			<OfflineBanner />
+		</Provider>,
+	);
+}
 
 describe("OfflineBanner", () => {
 	beforeEach(() => {
@@ -22,24 +33,20 @@ describe("OfflineBanner", () => {
 	});
 
 	it("renders nothing when online", () => {
-		mockUseSync.mockReturnValue({
+		renderWithStore({
 			isOnline: true,
 			pendingCount: 0,
 		});
 
-		render(<OfflineBanner />);
-
 		expect(screen.queryByTestId("offline-banner")).toBeNull();
 	});
 
 	it("renders banner when offline", () => {
-		mockUseSync.mockReturnValue({
+		renderWithStore({
 			isOnline: false,
 			pendingCount: 0,
 		});
 
-		render(<OfflineBanner />);
-
 		const banner = screen.getByTestId("offline-banner");
 		expect(banner).toBeDefined();
 		expect(
@@ -48,36 +55,30 @@ describe("OfflineBanner", () => {
 	});
 
 	it("displays pending count when offline with pending changes", () => {
-		mockUseSync.mockReturnValue({
+		renderWithStore({
 			isOnline: false,
 			pendingCount: 5,
 		});
 
-		render(<OfflineBanner />);
-
 		expect(screen.getByTestId("offline-pending-count")).toBeDefined();
 		expect(screen.getByText("(5 pending)")).toBeDefined();
 	});
 
 	it("does not display pending count when there are no pending changes", () => {
-		mockUseSync.mockReturnValue({
+		renderWithStore({
 			isOnline: false,
 			pendingCount: 0,
 		});
 
-		render(<OfflineBanner />);
-
 		expect(screen.queryByTestId("offline-pending-count")).toBeNull();
 	});
 
 	it("has correct accessibility attributes", () => {
-		mockUseSync.mockReturnValue({
+		renderWithStore({
 			isOnline: false,
 			pendingCount: 0,
 		});
 
-		render(<OfflineBanner />);
-
 		const banner = screen.getByTestId("offline-banner");
 		// <output> element has implicit role="status", so we check it's an output element
 		expect(banner.tagName.toLowerCase()).toBe("output");
-- 
cgit v1.2.3-70-g09d2