added delete button to cards. Fixed issue where newly created games didn't show properly

trivia-forge/backend/endpoints/game.py

@@ -121,7 +121,7 @@ def get_games_with_details():
                 category['questions'] = questions
             game['categories'] = categories
             game_details.append(game_detail)
-        print(game_details)
+        #print(game_details)
         return jsonify(game_details)
     except Exception as e:
         print(f"Error fetching games with details: {str(e)}")

trivia-forge/frontend/src/Pages/LoginPage.jsx

@@ -28,13 +28,13 @@ function LoginPage() {
 
             // set user and games in global store
             setCurrentUser(user);
-            setUserGames(games);
-            
+            //setUserGames(games);
+
             // console.log('User games:', games);
 
             //pass user and games as state to myTrivia page
             navigate('/myTrivia', { state: { user, games } });
-            
+
         } catch (error) {
             console.error('Error during login:', error);
             alert('Error logging in. Please try again.');

trivia-forge/frontend/src/Pages/MyTrivia.jsx

@@ -1,5 +1,5 @@
 import { React, useState, useEffect } from "react";
-import { getGames, getGamesWithDetails } from "../Services/TF-db_services";
+import { getGames, getGamesWithDetails, deleteGame } from "../Services/TF-db_services";
 import Card from 'react-bootstrap/Card';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
@@ -14,27 +14,43 @@ import useStore from '../Components/useStore';
 function MyTrivia() {
     // const [games, setGames] = useState(null); // store list of games
     const [show, setShow] = useState(false); // visibility of modal
+
+    const [showWarning, setShowWarning] = useState(false); // visibility of warning modal
     const [currentGame, setCurrentGame] = useState(null); // store current game
+
+    const [loaded, setLoaded] = useState(false);
     // const [gamesWithDetails, setGamesWithDetails] = useState([]); // store games from user
     const navigate = useNavigate();
     // const location = useLocation();
     const currentUser = useStore(state => state.currentUser);
     const userGames = useStore(state => state.userGames);
     const setUserGames = useStore(state => state.setUserGames);
 
+
+    const handleShow = async (game) => {
+        setCurrentGame(game);
+        setShow(true);
+    };
     // const user = location.state?.user;
 
     // fetch game with details when the user changes
     useEffect(() => {
-        if (currentUser && userGames.length === 0) {
+        if (currentUser && !loaded) {
+            setLoaded(true);
+            //console.log("calling getGamesWithDetails");
             getGamesWithDetails(currentUser.id).then(res => {
                 setUserGames(res);
             });
         }
+
+        // Cleanup function to reset loaded when component unmounts
+        return () => {
+            setLoaded(false);
+        };
     }, [currentUser, userGames, setUserGames]);
 
     useEffect(() => {
-        if (currentGame) {
+        if (currentGame && showWarning === false) {
             setShow(true);
         }
     }, [currentGame]);
@@ -44,9 +60,21 @@ function MyTrivia() {
         setCurrentGame(null);
     }
 
-    function handleShow(game) {
+
+    function handleShowWarning(game) {
         setCurrentGame(game);
-        setShow(true);
+        console.log("current game", currentGame);
+        setShowWarning(true);
+    }
+    function handleWarningClose() {
+        setShowWarning(false);
+    }
+    function handleDelete() {
+        console.log("deleting game", currentGame);
+        deleteGame(currentGame).then(res => {
+            setUserGames(userGames.filter(g => g.id !== currentGame.id));
+        });
+        setShowWarning(false);
     }
 
     console.log(userGames);
@@ -73,6 +101,7 @@ function MyTrivia() {
                                     <div className="text-center">
                                         <Button onClick={() => handleShow(game)} variant="success" className="mx-2">Play</Button>
                                         <Button onClick={() => navigate('/review', { state: { 'game': game, 'page': 'edit' } })} variant="secondary" className="mx-2">Edit</Button>
+                                        <Button onClick={() => handleShowWarning(game)} >Delete</Button>
                                     </div>
                                 </Card.Body>
                             </Card>
@@ -82,13 +111,30 @@ function MyTrivia() {
             ) : (
                 <h1 className="text-center mt-5">No games to display.</h1>
             )}
+            <Modal show={showWarning} onHide={handleWarningClose}>
+                <Modal.Header closeButton>
+                    <Modal.Title>Warning</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>Are you sure you want to delete this game?</Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={handleWarningClose}>
+                        No
+                    </Button>
+                    <Button variant="primary" onClick={() => handleDelete(currentGame)}>
+                        Yes
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+
             <Modal show={show} onHide={handleClose} fullscreen={true}>
                 <Modal.Header data-bs-theme="dark" closeButton style={{ backgroundColor: "#240046", border: "none" }}>
                 </Modal.Header>
                 <Modal.Body style={{ backgroundColor: "#240046" }}>
                     <Slideshow data={currentGame} />
                 </Modal.Body>
             </Modal>
+
+
         </>
     );
 }

trivia-forge/frontend/src/Pages/TriviaGenPage.jsx

@@ -81,7 +81,9 @@ function TriviaGenPage() {
         }
         //create a new game and category object and add category to game
         //need to change third parameter to current User ID once Users can sign in.
+        console.log("User:", user);
         let game = new Game(Title, Theme, user.id);
+        console.log("Game:", game);
 
         for (let i = 0; i < categories.length; i++) {
             let newCategory = new Category(categories[i].name);
@@ -122,7 +124,7 @@ function TriviaGenPage() {
         // Save game to global state and local storage
         addGame(game);
         // state property to pass data as object to new route
-        navigate('/review', { state: { game, page: 'review' } });
+        navigate('/review', { state: { game: game, page: 'review' } });
         //console.log(completion.choices[0].message);
 
 

trivia-forge/frontend/src/Services/TF-db_services.jsx

@@ -70,7 +70,7 @@ export const getGamesWithDetails = async (user_id) => {
         const response = await axios.get(`${API_URL}/games/games_with_details`, {
             params: { user_id }
         });
-        console.log("response.data:", response.data)
+        //console.log("response.data:", response.data)
         return response.data;
     } catch (error) {
         console.error('Failed to fetch games with details');