From 6f8514ebd1be4bb4f2cb6ee1ca9d942e2194e37d Mon Sep 17 00:00:00 2001
From: agnesaven <agnesas@stud.ntnu.no>
Date: Mon, 2 Nov 2026 11:13:38 +0100
Subject: [PATCH] feat: persist team and format preferences per user
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Persist added Pokémon and selected format in localStorage, with separate preferences for each user.
---
 frontend/src/App.tsx | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3f8ff96..7e2d6ca 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import "./App.css";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Link,
   Navigate,
@@ -27,14 +27,32 @@ type ApplicationContext = {
 };
 
 function ApplicationLayout() {
+  const { user, logout } = useAuth();
   const [menuOpen, setMenuOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
   const [format, setFormat] = useState(
-    () => localStorage.getItem("pokemon-draft-planner-format") || "gen9",
+    () =>
+      localStorage.getItem(`pokemon-draft-planner-format-${user?.id}`) ||
+      "gen9",
   );
-  const [team, setTeam] = useState<TeamPokemon[]>([]);
 
-  const { user, logout } = useAuth();
+  const [team, setTeam] = useState<TeamPokemon[]>(() => {
+    const savedTeam = localStorage.getItem(
+      `pokemon-draft-planner-team-${user?.id}`,
+    );
+
+    return savedTeam ? JSON.parse(savedTeam) : [];
+  });
+
+  useEffect(() => {
+    if (!user) return;
+
+    localStorage.setItem(
+      `pokemon-draft-planner-team-${user.id}`,
+      JSON.stringify(team),
+    );
+  }, [team, user]);
+
   const navigate = useNavigate();
 
   function closeMenu() {
@@ -50,7 +68,7 @@ function ApplicationLayout() {
 
   function handleFormatChange(newFormat: string) {
     setFormat(newFormat);
-    localStorage.setItem("pokemon-draft-planner-format", newFormat);
+    localStorage.setItem(`pokemon-draft-planner-format-${user?.id}`, newFormat);
   }
 
   function addPokemon(pokemon: TeamPokemon) {