app.
js
import React, { useState } from "react";
import "./App.css"; // Global styles
import MainScreen from "./components/MainScreen";
import CommandScreen from "./components/CommandScreen";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
function App() {
const [currentScreen, setCurrentScreen] = useState("main");
const [catActions, setCatActions] = useState([]);
const [ratActions, setRatActions] = useState([]);
const handleDoneForCat = (actions) => {
setCatActions(actions); // Store actions for the cat
setCurrentScreen("main");
};
const handleDoneForRat = (actions) => {
setRatActions(actions); // Store actions for the rat
setCurrentScreen("main");
};
return (
<DndProvider backend={HTML5Backend}>
<div>
{currentScreen === "main" ? (
<MainScreen
onAddActionForCat={() => setCurrentScreen("commands-cat")}
onAddActionForRat={() => setCurrentScreen("commands-rat")}
catActions={catActions}
ratActions={ratActions}
setCatActions={setCatActions}
setRatActions={setRatActions} // Pass down both setCatActions and
setRatActions
/>
) : currentScreen === "commands-cat" ? (
<CommandScreen
onBack={() => setCurrentScreen("main")}
onDone={handleDoneForCat}
/>
) : (
<CommandScreen
onBack={() => setCurrentScreen("main")}
onDone={handleDoneForRat}
/>
)}
</div>
</DndProvider>
);
}
export default App;
