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/Login.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

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

diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 76a775a..7dc71e7 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,13 +1,14 @@
+import { useSetAtom } from "jotai";
 import { useState } from "react";
 import { useLocation } from "wouter";
-import { useAuth } from "../contexts/AuthContext";
+import { loginAtom } from "../atoms";
 
 export function Login() {
 	const [username, setUsername] = useState("");
 	const [password, setPassword] = useState("");
 	const [error, setError] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
-	const { login } = useAuth();
+	const login = useSetAtom(loginAtom);
 	const [, setLocation] = useLocation();
 
 	const handleSubmit = async (e: React.FormEvent) => {
@@ -15,13 +16,14 @@ export function Login() {
 		setError("");
 		setIsLoading(true);
 
-		const result = await login(username, password);
-		if (result.success) {
+		try {
+			await login({ username, password });
 			setLocation("/");
-		} else {
-			setError(result.error);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Login failed");
+		} finally {
+			setIsLoading(false);
 		}
-		setIsLoading(false);
 	};
 
 	return (
-- 
cgit v1.3-1-g0d28