elevated state to App

src/components/AllDecks.tsx

@@ -1,46 +1,49 @@
-import React, { useState } from "react"
+import React from "react"
 import RetakesConfig from "../types/RetakesConfig"
 import Side from "../types/Side"
 import CardComp from "./Card"
 import DeckComp from "./Deck"
 
-const AllDecks: React.FC = () => {
+interface Props {
-    const [retakesConfig,setRetakesConfig] = useState(new RetakesConfig())
+    retakesConfig: RetakesConfig
+    onChange?: (newConfig: RetakesConfig)=>void
+}
 
+const AllDecks: React.FC<Props> = ({retakesConfig,onChange}) => {
     return (
         <div>
             <DeckComp title="CT Pistol" side={Side.CT} deck={retakesConfig.ctPistol} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctPistol:newDeck}}))} />
+                onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{ctPistol:newDeck}}))} />
             <DeckComp title="T Pistol" side={Side.T} deck={retakesConfig.tPistol} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{tPistol:newDeck}}))} />
+                onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{tPistol:newDeck}}))} />
             
             <DeckComp title="CT Upgraded Pistol" side={Side.CT} deck={retakesConfig.ctUpgradedPistol} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctUpgradedPistol:newDeck}}))} />
+                onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{ctUpgradedPistol:newDeck}}))} />
             <DeckComp title="T Upgraded Pistol" side={Side.T} deck={retakesConfig.tUpgradedPistol} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{tUpgradedPistol:newDeck}}))} />
+                onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{tUpgradedPistol:newDeck}}))} />
             
             <DeckComp title="CT Light" side={Side.CT} deck={retakesConfig.ctLight} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctLight:newDeck}}))} />
+                onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{ctLight:newDeck}}))} />
             <DeckComp title="T Light" side={Side.T} deck={retakesConfig.tLight} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{tLight:newDeck}}))} />
+                onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{tLight:newDeck}}))} />
             
             <DeckComp title="CT Full" side={Side.CT} deck={retakesConfig.ctFull} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctFull:newDeck}}))} />
+                onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{ctFull:newDeck}}))} />
             <DeckComp title="T Full" side={Side.T} deck={retakesConfig.tFull} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{tFull:newDeck}}))} />
+                onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{tFull:newDeck}}))} />
 
             <div className="flex">
                 <CardComp card={retakesConfig.ctEnemy} side={Side.T} 
-                    onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctEnemy:newCard}}))} />
+                    onChange={(newCard)=>onChange?.(new RetakesConfig({...retakesConfig,...{ctEnemy:newCard}}))} />
                 <CardComp card={retakesConfig.tEnemy} side={Side.CT} 
-                    onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{tEnemy:newCard}}))} />
+                    onChange={(newCard)=>onChange?.(new RetakesConfig({...retakesConfig,...{tEnemy:newCard}}))} />
             </div>
 
             <div className="flex">
                 <CardComp card={retakesConfig.ctBonus} side={Side.CT} 
-                    onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctBonus:newCard}}))} />
+                    onChange={(newCard)=>onChange?.(new RetakesConfig({...retakesConfig,...{ctBonus:newCard}}))} />
                 <CardComp card={retakesConfig.tBonus} side={Side.T} 
-                    onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{tBonus:newCard}}))} />
+                    onChange={(newCard)=>onChange?.(new RetakesConfig({...retakesConfig,...{tBonus:newCard}}))} />
             </div>
         </div>
     )

src/components/App.tsx

@@ -1,22 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
+import RetakesConfig from '../types/RetakesConfig';
 import AllDecks from './AllDecks';
 import MenuBar from './MenuBar';
 
 function App() {
-  // const [CTDeck,setCTDeck] = useState<Deck>(new Deck(
+
-  //   2,new CardGroup(
+  const [retakesConfig,setRetakesConfig] = useState(new RetakesConfig())
-  //     2,new Card("AWE fake",false,false,Item.AWP,Item.DECOY),
-  //     new Card("M4 Flash",true,true,Item.AK_47_M4,Item.FLASHBANG)
-  //   ),
-  //   new CardGroup(
-  //     3,new Card("One deag",true,false,Item.DESERT_EAGLE)
-  //   )
-  // ))
 
   return (
     <div className="text-white">
       <MenuBar />
-      <AllDecks />
+      <AllDecks retakesConfig={retakesConfig} onChange={(newConfig)=>setRetakesConfig(newConfig)} />
     </div>
   );
 }