Send int ids

README.md

@@ -1 +1,3 @@
 # travel.finance
+
+Backend: https://github.com/inevitable-dao/travel-finance-backend

src/cards/CardUpgradePage.tsx

@@ -36,19 +36,23 @@ const CardUpgradePage: NextPage = () => {
   const [newCard, setNewCard] = useState<CardItem>();
 
   const router = useRouter();
-  const targetCardId = router.query.baseCardId;
+  const targetCardId = parseInt((router.query.baseCardId as string) || '');
 
   const targetCard = useMemo(() => {
     if (!targetCardId) {
       return null;
     }
-    return cards.filter((card) => card.id == targetCardId)[0];
+    return cards.filter(
+      (card) => card.id.toString() == targetCardId.toString(),
+    )[0];
   }, [cards, targetCardId]);
 
   const renderedInventory = useMemo(() => {
     // if targetCard is available, remove it from inventory
     if (targetCard) {
-      return cards.filter((card) => card.id !== targetCard.id);
+      return cards.filter(
+        (card) => card.id.toString() !== targetCard.id.toString(),
+      );
     }
     return cards;
   }, [cards, targetCard]);
@@ -67,7 +71,7 @@ const CardUpgradePage: NextPage = () => {
         'https://stevejkang.jp.ngrok.io/cards/upgrade',
         {
           targetCardId,
-          sourceCardsId: selectedSacrificeIds,
+          sourceCardsId: selectedSacrificeIds.map((v) => parseInt(v)),
         },
         {
           headers: {
@@ -140,18 +144,22 @@ const CardUpgradePage: NextPage = () => {
                   <div className="flex gap-3">
                     <Checkbox
                       id={`card-${card.id}`}
-                      checked={selectedSacrificeIds.includes(card.id)}
+                      checked={selectedSacrificeIds.includes(
+                        card.id.toString(),
+                      )}
                       onCheckedChange={() =>
                         setSelectedSacrificeIds((prev) => {
                           if (prev.includes(card.id)) {
-                            return prev.filter((id) => id !== card.id);
+                            return prev.filter(
+                              (id) => id.toString() !== card.id.toString(),
+                            );
                           }
 
                           // MAX source length is 2!
                           if (prev.length >= 2) {
                             return prev;
                           }
-                          return [...prev, card.id];
+                          return [...prev, card.id.toString()];
                         })
                       }
                     />