From 3cf1f440ea4250ed11ef933b7b1b68fd40ec0557 Mon Sep 17 00:00:00 2001
From: eviterin <ethan.viterin@gmail.com>
Date: Tue, 27 Feb 2024 17:19:05 +0100
Subject: [PATCH] Removed unnessecarily complex props from collection and
 resolved a bug when saving an existing deck

---
 .../webapp/src/components/collection/deckPanel.tsx  |  2 +-
 packages/webapp/src/pages/_app.tsx                  |  2 +-
 packages/webapp/src/pages/collection.tsx            | 13 ++++---------
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/webapp/src/components/collection/deckPanel.tsx b/packages/webapp/src/components/collection/deckPanel.tsx
index a95fa324..f9faeac1 100644
--- a/packages/webapp/src/components/collection/deckPanel.tsx
+++ b/packages/webapp/src/components/collection/deckPanel.tsx
@@ -70,7 +70,7 @@ interface DeckConstructionPanelProps {
             onClick={() => onCardSelect(card)}
           >
             <div className="flex items-center space-x-3">
-              <Image src={testCards.find(tc => tc.id === card.id)?.image || '/card_art/1.jpg'} alt="Card art" width={40} height={40} className="object-cover rounded-full" />
+              <Image src={testCards.find(tc => tc.id === Number(card.id))?.image || '/card_art/1.jpg'} alt="Card art" width={40} height={40} className="object-cover rounded-full" />
               <span className="font-medium">{card.lore.name}</span>
             </div>
           </div>
diff --git a/packages/webapp/src/pages/_app.tsx b/packages/webapp/src/pages/_app.tsx
index c06a4c95..746fc88e 100644
--- a/packages/webapp/src/pages/_app.tsx
+++ b/packages/webapp/src/pages/_app.tsx
@@ -28,7 +28,7 @@ import { Toaster } from "src/components/ui/sonner"
  * Make pages in the app conform to this type.
  * See [@link useIsHydrated] for more info on the meaning of the `isHydrated` prop.
  */
-export type FablePage = NextPage<{ decks: Deck[], isHydrated: boolean, setDecks: Dispatch<SetStateAction<Deck[]>> }>
+export type FablePage = NextPage<{ isHydrated: boolean }>
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/pages/collection.tsx b/packages/webapp/src/pages/collection.tsx
index 08e781cc..e9463bf7 100644
--- a/packages/webapp/src/pages/collection.tsx
+++ b/packages/webapp/src/pages/collection.tsx
@@ -29,14 +29,7 @@ const initialEffectMap = Object.assign({}, ...effects.map(name => ({[name]: fals
 const types = ['Creature', 'Magic', 'Weapon']
 const initialTypeMap = Object.assign({}, ...types.map(name => ({[name]: false})))
 
-interface CollectionSpecificProps {
-  decks: Deck[]
-  setDecks: (decks: Deck[]) => void
-  isHydrated: boolean
-}
-type CollectionProps = FablePage & CollectionSpecificProps
-
-const Collection: React.FC<CollectionProps> = ({ decks, setDecks, isHydrated }) => {
+const Collection: FablePage = ({ isHydrated }) => {
 
   const router = useRouter()
   const { address } = useAccount()
@@ -50,6 +43,8 @@ const Collection: React.FC<CollectionProps> = ({ decks, setDecks, isHydrated })
 
   // Deck Collection Display
   const [ editingDeckIndex, setEditingDeckIndex ] = useState<number|null>(null)
+  const [decks, setDecks] = useState<Deck[]>([])
+
   // Deck Construction Panel
   const [ currentDeck, setCurrentDeck] = useState<Deck|null>(null)
   const [ selectedCards, setSelectedCards ] = useState<Card[]>([])
@@ -100,7 +95,7 @@ const Collection: React.FC<CollectionProps> = ({ decks, setDecks, isHydrated })
   }
 
   const handleSaveDeck = (updatedDeck: Deck) => {
-    const updatedDecks = [...decks]
+    const updatedDecks = [...(decks || [])]
     if (editingDeckIndex !== null) {
       // Update existing deck
       updatedDecks[editingDeckIndex] = updatedDeck