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/pages/Settings.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

(limited to 'frontend/src/pages/Settings.tsx')

diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index c179fab..48a1f8e 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -1,24 +1,25 @@
-import { useCallback, useState } from "react";
-import { AddFeedForm, FeedList } from "../components";
+import { Suspense } from "react";
+import { AddFeedForm } from "../components/AddFeedForm";
+import { ErrorBoundary } from "../components/ErrorBoundary";
+import { FeedList } from "../components/FeedList";
+import { LoadingSpinner } from "../components/LoadingSpinner";
 
 export function Settings() {
-	const [refreshKey, setRefreshKey] = useState(0);
-
-	const handleChange = useCallback(() => {
-		setRefreshKey((k) => k + 1);
-	}, []);
-
 	return (
 		<div className="mx-auto max-w-3xl space-y-10">
 			<section>
-				<AddFeedForm onFeedAdded={handleChange} />
+				<AddFeedForm />
 			</section>
 
 			<section>
 				<h2 className="mb-4 text-sm font-semibold uppercase tracking-wide text-stone-900">
 					Your Feeds
 				</h2>
-				<FeedList key={refreshKey} onFeedUnsubscribed={handleChange} />
+				<ErrorBoundary>
+					<Suspense fallback={<LoadingSpinner />}>
+						<FeedList />
+					</Suspense>
+				</ErrorBoundary>
 			</section>
 		</div>
 	);
-- 
cgit v1.3-1-g0d28