aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/src/main.tsx
diff options
context:
space:
mode:
authornsfisis <nsfisis@gmail.com>2026-02-14 12:17:23 +0900
committernsfisis <nsfisis@gmail.com>2026-02-14 12:17:23 +0900
commitfffd36268a216044523c3f5227c3d375608c36dc (patch)
treeb289735cb9d478af763775af9b15214b9595e747 /frontend/src/main.tsx
parent2889b562e64993482bd13fd806af8ed0865bab8b (diff)
downloadfeedaka-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/main.tsx')
-rw-r--r--frontend/src/main.tsx26
1 files changed, 20 insertions, 6 deletions
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index d1dd4d5..5333b77 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,14 +1,28 @@
-import { StrictMode } from "react";
+import { Provider, useStore } from "jotai/react";
+import { useHydrateAtoms } from "jotai/react/utils";
+import { queryClientAtom } from "jotai-tanstack-query";
+import { type ReactNode, StrictMode } from "react";
import { createRoot } from "react-dom/client";
-import "./index.css";
import App from "./App.tsx";
-import { AuthProvider } from "./contexts/AuthContext";
+import { StoreInitializer } from "./components/StoreInitializer";
+import "./index.css";
+import { queryClient } from "./queryClient";
+
+function HydrateQueryClient({ children }: { children: ReactNode }) {
+ const store = useStore();
+ useHydrateAtoms([[queryClientAtom, queryClient]], { store });
+ return <>{children}</>;
+}
// biome-ignore lint/style/noNonNullAssertion: root element is guaranteed to exist
createRoot(document.getElementById("root")!).render(
<StrictMode>
- <AuthProvider>
- <App />
- </AuthProvider>
+ <Provider>
+ <HydrateQueryClient>
+ <StoreInitializer>
+ <App />
+ </StoreInitializer>
+ </HydrateQueryClient>
+ </Provider>
</StrictMode>,
);