From fffd36268a216044523c3f5227c3d375608c36dc Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sat, 14 Feb 2026 12:17:23 +0900
Subject: refactor(frontend): migrate state management to jotai and
 jotai-tanstack-query

Replace React Context + manual useEffect data fetching with jotai atoms
for state management and jotai-tanstack-query for server state caching.

- Add jotai, jotai-tanstack-query, @tanstack/query-core dependencies
- Create atoms for auth (primitive + action), feeds (suspense query),
  and articles (infinite query with cursor-based pagination)
- Wire up Provider, HydrateQueryClient, and StoreInitializer in main.tsx
- Migrate all components from useAuth() context to jotai atoms
- Replace manual fetch logic in FeedSidebar/FeedList with feedsAtom
- Replace usePaginatedArticles hook with articlesInfiniteAtom
- Add queryClient.invalidateQueries() after mutations for automatic
  cache refresh
- Add ErrorBoundary and LoadingSpinner components for Suspense support
- Remove callback prop chains (onFeedAdded, onFeedChanged, etc.)
  in favor of query invalidation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/main.tsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

(limited to 'frontend/src/main.tsx')

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index d1dd4d5..5333b77 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,14 +1,28 @@
-import { StrictMode } from "react";
+import { Provider, useStore } from "jotai/react";
+import { useHydrateAtoms } from "jotai/react/utils";
+import { queryClientAtom } from "jotai-tanstack-query";
+import { type ReactNode, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import "./index.css";
 import App from "./App.tsx";
-import { AuthProvider } from "./contexts/AuthContext";
+import { StoreInitializer } from "./components/StoreInitializer";
+import "./index.css";
+import { queryClient } from "./queryClient";
+
+function HydrateQueryClient({ children }: { children: ReactNode }) {
+	const store = useStore();
+	useHydrateAtoms([[queryClientAtom, queryClient]], { store });
+	return <>{children}</>;
+}
 
 // biome-ignore lint/style/noNonNullAssertion: root element is guaranteed to exist
 createRoot(document.getElementById("root")!).render(
 	<StrictMode>
-		<AuthProvider>
-			<App />
-		</AuthProvider>
+		<Provider>
+			<HydrateQueryClient>
+				<StoreInitializer>
+					<App />
+				</StoreInitializer>
+			</HydrateQueryClient>
+		</Provider>
 	</StrictMode>,
 );
-- 
cgit v1.3-1-g0d28

