diff options
| author | nsfisis <nsfisis@gmail.com> | 2026-02-14 12:17:23 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2026-02-14 12:17:23 +0900 |
| commit | fffd36268a216044523c3f5227c3d375608c36dc (patch) | |
| tree | b289735cb9d478af763775af9b15214b9595e747 /frontend/src/pages/Login.tsx | |
| parent | 2889b562e64993482bd13fd806af8ed0865bab8b (diff) | |
| download | feedaka-fffd36268a216044523c3f5227c3d375608c36dc.tar.gz feedaka-fffd36268a216044523c3f5227c3d375608c36dc.tar.zst feedaka-fffd36268a216044523c3f5227c3d375608c36dc.zip | |
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>
Diffstat (limited to 'frontend/src/pages/Login.tsx')
| -rw-r--r-- | frontend/src/pages/Login.tsx | 16 |
1 files changed, 9 insertions, 7 deletions
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 ( |
