Merge pull request #18 from JollyGrin/feat/add-unique-ids

Feat/add unique ids

package.json

@@ -23,14 +23,16 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1",
-    "react-icons": "^5.3.0"
+    "react-icons": "^5.3.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.45.2",
     "@shadow-panda/preset": "^0.7.1",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/uuid": "^10.0.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.8",
     "typescript": "^5"

src/components/molecules/LoadDeck/index.tsx

@@ -6,6 +6,8 @@ import { useState } from "react";
 import { Box, Flex } from "styled-system/jsx";
 import { button, input } from "styled-system/recipes";
 
+import { v4 as uuid } from "uuid";
+
 export const LoadDeck = (props: GameStateActions) => {
   const [deckId, setDeckId] = useState<string>("");
   const { data: deck } = useCuriosaDeck(deckId);
@@ -27,7 +29,7 @@ export const LoadDeck = (props: GameStateActions) => {
         })).map(
           (rest, index) =>
             ({
-              id: rest.identifier + index + Date.now(),
+              id: rest.identifier + index + uuid(),
               img: rest.identifier,
               type: "site",
             }) as GameCard,
@@ -40,9 +42,9 @@ export const LoadDeck = (props: GameStateActions) => {
           ...spell,
           quantity: undefined, // Remove the quantity field
         })).map(
-          (rest, i) =>
+          (rest) =>
             ({
-              id: rest.identifier + i + Date.now(),
+              id: rest.identifier + uuid(),
               img: rest.identifier,
               type: "minion",
             }) as GameCard,
@@ -53,7 +55,7 @@ export const LoadDeck = (props: GameStateActions) => {
     newGrid[GRIDS.HAND] = deck?.avatar?.map(
       (avatar) =>
         ({
-          id: avatar.identifier,
+          id: avatar.identifier + "-avatar-" + uuid(),
           img: avatar.identifier,
           type: "avatar",
         }) as GameCard,

src/components/organisms/GameBoard/index.tsx

@@ -133,6 +133,7 @@ const SortItemWrapper = ({
         e.preventDefault();
         setPreview(true);
       }}
+      data-testid={"sortable-item-wrapper-" + card.id}
       style={{
         height: heightCalc() + 7 + "px",
         transform: isTapped ? "rotate(5deg)" : "",
@@ -142,6 +143,7 @@ const SortItemWrapper = ({
     >
       <SortableItem
         key={`card-${gridIndex}-${cardIndex}`}
+        data-testid={"sortable-item-" + card.id}
         id={card.id}
         gridIndex={gridIndex}
         index={cardIndex}