From f47a256f5c07b99e0c69ea608331113425edcd5f Mon Sep 17 00:00:00 2001
From: stampaaaron <aaron@stampa.ch>
Date: Fri, 22 Sep 2023 15:51:13 +0000
Subject: [PATCH] fix: burger keys

---
 src/App.tsx         | 10 +++++-----
 src/store/burger.ts | 21 +++++++++------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7dc6e35..d5333ff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,7 +5,7 @@ import { useBurgerStore } from "./store/burger";
 export function App() {
   const { burgers, checkBurger } = useBurgerStore();
 
-  const hasCheckItem = burgers.some((item) => item.checked);
+  const hasCheckItem = Object.values(burgers).some((item) => item.checked);
 
   return (
     <>
@@ -17,8 +17,8 @@ export function App() {
           : "Zu deinem 27. Geburtstag stehen dir 27 Gutscheine für einen Cheeseburger zu. Diese Gutscheine kannst du frei irgendwo auf unserer Weltreise einlösen. Ganz am Ende dieser App findest du auch noch einen ganz besondern Gutschein..."}
       </p>
       <div className="burger-container">
-        {burgers.map((item) => (
-          <div style={item.large ? { gridColumn: "1/3" } : {}}>
+        {Object.entries(burgers).map(([key, item]) => (
+          <div key={key} style={item.large ? { gridColumn: "1/3" } : {}}>
             <ReactFlipCard
               containerStyle={item.large ? { columnSpan: "all" } : undefined}
               flipTrigger="onClick"
@@ -49,9 +49,9 @@ export function App() {
                     {item.checked ? "Eingelöst" : "Einlösen"}
                     <input
                       type="checkbox"
-                      id={item.key.toString()}
+                      id={key}
                       checked={item.checked}
-                      onChange={() => checkBurger(item.key)}
+                      onChange={() => checkBurger(key)}
                     />
                   </label>
                 </>
diff --git a/src/store/burger.ts b/src/store/burger.ts
index 3a6a588..806a882 100644
--- a/src/store/burger.ts
+++ b/src/store/burger.ts
@@ -2,20 +2,19 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
 function getAmountOfItemsFromState(amount: number, state: string) {
-  const items = [];
+  const items: BurgerState["burgers"] = {};
   for (let i = 0; i < amount; i++) {
-    items.push({
-      key: i + 1,
+    items[`${state}-${i}`] = {
       imageSrc: "cheese-burger.jpeg",
       flag: `flags/${state}.svg`,
       label: "einen Cheese-Burger",
       checked: false,
-    });
+    };
   }
   return items;
 }
 
-const initialBurgerState: BurgerItem[] = [
+const initialBurgerState: BurgerState["burgers"] = {
   ...getAmountOfItemsFromState(3, "ca"),
   ...getAmountOfItemsFromState(3, "us"),
   ...getAmountOfItemsFromState(3, "vn"),
@@ -23,8 +22,7 @@ const initialBurgerState: BurgerItem[] = [
   ...getAmountOfItemsFromState(5, "th"),
   ...getAmountOfItemsFromState(3, "qa"),
   ...getAmountOfItemsFromState(5, "na"),
-  {
-    key: 28,
+  "hard-rock-cafe": {
     imageSrc: "hard-rock-cafe.png",
     label: "ein Essen im HardRock Cafe",
     locations: [
@@ -36,10 +34,9 @@ const initialBurgerState: BurgerItem[] = [
     large: true,
     checked: false,
   },
-];
+};
 
 export type BurgerItem = {
-  key: number;
   imageSrc?: string;
   label: string;
   flag?: string;
@@ -49,8 +46,8 @@ export type BurgerItem = {
 };
 
 interface BurgerState {
-  burgers: BurgerItem[];
-  checkBurger: (key: number) => void;
+  burgers: Record<string, BurgerItem>;
+  checkBurger: (key: string) => void;
 }
 
 export const useBurgerStore = create<BurgerState>()(
@@ -60,7 +57,7 @@ export const useBurgerStore = create<BurgerState>()(
       checkBurger: (key) =>
         set((state) => {
           const items = state.burgers;
-          items[key - 1] = { ...items[key - 1], checked: true };
+          items[key] = { ...items[key], checked: true };
           return { burgers: items };
         }),
     }),