Removed unnessecarily complex props from collection and resolved a bu…

…g when saving an existing deck
0xFableOrg · Feb 27, 2024 · 3cf1f44 · 3cf1f44
1 parent 60aff3f
commit 3cf1f44
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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