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/components/AddFeedForm.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

(limited to 'frontend/src/components/AddFeedForm.tsx')

diff --git a/frontend/src/components/AddFeedForm.tsx b/frontend/src/components/AddFeedForm.tsx
index a60d86d..96afd39 100644
--- a/frontend/src/components/AddFeedForm.tsx
+++ b/frontend/src/components/AddFeedForm.tsx
@@ -1,13 +1,10 @@
 import { faPlus, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
+import { queryClient } from "../queryClient";
 import { api } from "../services/api-client";
 
-interface Props {
-	onFeedAdded?: () => void;
-}
-
-export function AddFeedForm({ onFeedAdded }: Props) {
+export function AddFeedForm() {
 	const [url, setUrl] = useState("");
 	const [error, setError] = useState<string | null>(null);
 	const [fetching, setFetching] = useState(false);
@@ -27,7 +24,7 @@ export function AddFeedForm({ onFeedAdded }: Props) {
 				setError(fetchError.message);
 			} else if (data) {
 				setUrl("");
-				onFeedAdded?.();
+				queryClient.invalidateQueries({ queryKey: ["feeds"] });
 			}
 		} catch (error) {
 			setError(
-- 
cgit v1.3-1-g0d28

