fix: burger keys

stampaaaron · Sep 22, 2023 · f47a256 · f47a256
1 parent 3f3a2c1
commit f47a256
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 17 deletions.
diff --git 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
@@ -2,29 +2,27 @@ 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"),
   ...getAmountOfItemsFromState(5, "kh"),
   ...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 };
         }),
     }),