110 implement state manegement redux toolkit

frontend/package.json

@@ -13,12 +13,14 @@
     "format:check": "prettier --check . --ignore-path ../.prettierignore"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.14.0",
     "@tailwindcss/vite": "^4.3.3",
     "backend": "^0.0.0",
     "firebase": "^13.2.0",
     "lucide-react": "^1.64.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "react-redux": "^9.3.1",
     "react-router": "^8.5.1",
     "tailwind-merge": "^3.7.0",
     "tailwindcss": "^4.3.3"

frontend/src/App.tsx

@@ -9,6 +9,9 @@ import BackToTopButton from "./components/buttons/BackToTopButton";
 import LoginPage from "./pages/loginPage/loginPage";
 import AccountPage from "./pages/accountPage/accountPage";
 import { Routes, Route, useLocation, useParams } from "react-router";
+import Notification from "./components/Notification";
+import { useSelector } from "react-redux";
+import type { RootState } from "./state/store";
 
 function CategoryRoute() {
   const { category } = useParams<{ category: string }>();
@@ -21,13 +24,16 @@ function BuilderRoute() {
 }
 
 function App() {
+  const accountKey = useSelector(
+    (state: RootState) => state.auth.user?.uid ?? "guest",
+  );
   return (
     <div className="flex min-h-screen flex-col">
       <header className="sticky top-0 z-50 bg-background">
         <NavBar />
       </header>
       <main className="flex-1">
-        <Routes>
+        <Routes key={accountKey}>
           <Route path="/" element={<HomePage />} />
           <Route path="/explore" element={<CategoryPage />} />
           <Route
@@ -43,6 +49,7 @@ function App() {
       </main>
       <Footer />
       <BackToTopButton />
+      <Notification />
     </div>
   );
 }

frontend/src/api/auth.ts

@@ -0,0 +1,84 @@
+import {
+  GoogleAuthProvider,
+  createUserWithEmailAndPassword,
+  onAuthStateChanged,
+  signInWithEmailAndPassword,
+  signInWithPopup,
+  signOut,
+} from "firebase/auth";
+import { auth } from "@/lib/firebase";
+import { authFailed, authResolved } from "@/state/authSlice";
+import { restoreBuild } from "@/state/selectedPartsSlice";
+import { dismissNotification } from "@/state/notificationSlice";
+import { loadBuildDraft, saveBuildDraft } from "@/state/buildStorage";
+import type { createBuildStore } from "@/state/store";
+
+// Called once at startup. Firebase remains responsible for restoring the session
+// and issuing tokens; Redux contains only the profile used by the interface.
+export function startAuthSync(store: ReturnType<typeof createBuildStore>) {
+  let storageKey: string | null = null;
+  let previousDraft = store.getState().selectedParts;
+
+  const stopSaving = store.subscribe(() => {
+    const draft = store.getState().selectedParts;
+    if (storageKey && draft !== previousDraft) {
+      previousDraft = draft;
+      saveBuildDraft(storageKey, draft);
+    }
+  });
+
+  const stopAuth = onAuthStateChanged(
+    auth,
+    (user) => {
+      const nextKey = `pc-builder-v2:${user?.uid ?? "guest"}`;
+      if (nextKey !== storageKey) {
+        // Pause persistence while replacing the previous account's draft.
+        storageKey = null;
+        store.dispatch(restoreBuild(loadBuildDraft(nextKey)));
+        store.dispatch(dismissNotification());
+        previousDraft = store.getState().selectedParts;
+        storageKey = nextKey;
+        saveBuildDraft(storageKey, previousDraft);
+      }
+      store.dispatch(
+        authResolved(
+          user
+            ? {
+                uid: user.uid,
+                displayName: user.displayName,
+                email: user.email,
+              }
+            : null,
+        ),
+      );
+    },
+    () => {
+      store.dispatch(
+        authFailed(
+          "Could not check your sign-in status. Please refresh and try again.",
+        ),
+      );
+    },
+  );
+
+  return () => {
+    stopAuth();
+    stopSaving();
+  };
+}
+
+export async function login() {
+  await signInWithPopup(auth, new GoogleAuthProvider());
+}
+
+export async function loginWithEmail(email: string, password: string) {
+  await signInWithEmailAndPassword(auth, email.trim(), password);
+}
+
+export async function registerWithEmail(email: string, password: string) {
+  await createUserWithEmailAndPassword(auth, email.trim(), password);
+}
+
+export async function logout() {
+  await signOut(auth);
+}

frontend/src/api/graphql.ts

@@ -30,4 +30,4 @@ export async function graphql<T>(
   }
 
   return result.data;
-}
+}