From fffd36268a216044523c3f5227c3d375608c36dc Mon Sep 17 00:00:00 2001 From: nsfisis 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 --- frontend/src/components/FeedItem.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) (limited to 'frontend/src/components/FeedItem.tsx') diff --git a/frontend/src/components/FeedItem.tsx b/frontend/src/components/FeedItem.tsx index 1fb9001..adc7623 100644 --- a/frontend/src/components/FeedItem.tsx +++ b/frontend/src/components/FeedItem.tsx @@ -1,29 +1,33 @@ import { faCheck, faCircle, faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import type { components } from "../api/generated"; +import { queryClient } from "../queryClient"; import { api } from "../services/api-client"; type Feed = components["schemas"]["Feed"]; interface Props { feed: Feed; - onFeedUnsubscribed?: () => void; - onFeedChanged?: () => void; } -export function FeedItem({ feed, onFeedUnsubscribed, onFeedChanged }: Props) { +export function FeedItem({ feed }: Props) { + const invalidate = () => { + queryClient.invalidateQueries({ queryKey: ["feeds"] }); + queryClient.invalidateQueries({ queryKey: ["articles"] }); + }; + const handleMarkAllRead = async (feedId: string) => { await api.POST("/api/feeds/{feedId}/read", { params: { path: { feedId } }, }); - onFeedChanged?.(); + invalidate(); }; const handleMarkAllUnread = async (feedId: string) => { await api.POST("/api/feeds/{feedId}/unread", { params: { path: { feedId } }, }); - onFeedChanged?.(); + invalidate(); }; const handleUnsubscribeFeed = async (feedId: string) => { @@ -34,7 +38,7 @@ export function FeedItem({ feed, onFeedUnsubscribed, onFeedChanged }: Props) { await api.DELETE("/api/feeds/{feedId}", { params: { path: { feedId } }, }); - onFeedUnsubscribed?.(); + invalidate(); } }; -- cgit v1.3-1-g0d28