From 7bee9b1a1bdc61e114f1da301e6523fab637dead Mon Sep 17 00:00:00 2001 From: Justin Date: Sun, 26 May 2024 10:01:38 -0700 Subject: [PATCH 1/3] added delete button to cards. Fixed issue where newly created games wouldn't show on my trivia because gameswithdetails only got called if usergames.length==0. --- trivia-forge/backend/endpoints/game.py | 2 +- trivia-forge/frontend/src/Pages/LoginPage.jsx | 6 +-- trivia-forge/frontend/src/Pages/MyTrivia.jsx | 40 ++++++++++++++++++- .../frontend/src/Pages/TriviaGenPage.jsx | 4 +- .../frontend/src/Services/TF-db_services.jsx | 2 +- 5 files changed, 45 insertions(+), 9 deletions(-) diff --git a/trivia-forge/backend/endpoints/game.py b/trivia-forge/backend/endpoints/game.py index 3b2fa15e..6b0c85d0 100644 --- a/trivia-forge/backend/endpoints/game.py +++ b/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)}") diff --git a/trivia-forge/frontend/src/Pages/LoginPage.jsx b/trivia-forge/frontend/src/Pages/LoginPage.jsx index 3b5a5b59..540600cc 100644 --- a/trivia-forge/frontend/src/Pages/LoginPage.jsx +++ b/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.'); diff --git a/trivia-forge/frontend/src/Pages/MyTrivia.jsx b/trivia-forge/frontend/src/Pages/MyTrivia.jsx index 32d817c8..f065838b 100644 --- a/trivia-forge/frontend/src/Pages/MyTrivia.jsx +++ b/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,7 +14,9 @@ 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(); @@ -26,11 +28,18 @@ function MyTrivia() { // 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(() => { @@ -48,6 +57,18 @@ function MyTrivia() { setCurrentGame(game); setShow(true); } + function handleShowWarning(game) { + setCurrentGame(game); + setShowWarning(true); + } + function handleWarningClose() { + setShowWarning(false); + } + function handleDelete(game) { + deleteGame(game).then(res => { + setUserGames(userGames.filter(g => g.id !== game.id)); + }); + } console.log(userGames); return ( @@ -73,6 +94,7 @@ function MyTrivia() {
+
@@ -89,6 +111,20 @@ function MyTrivia() { + + + Warning + + Are you sure you want to delete this game? + + + + + ); } diff --git a/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx b/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx index d9c75a98..834bac3e 100644 --- a/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx +++ b/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx @@ -81,7 +81,7 @@ 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. - let game = new Game(Title, Theme, user.id); + let game = new Game(Title, Theme, 1); for (let i = 0; i < categories.length; i++) { let newCategory = new Category(categories[i].name); @@ -122,7 +122,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); diff --git a/trivia-forge/frontend/src/Services/TF-db_services.jsx b/trivia-forge/frontend/src/Services/TF-db_services.jsx index d40c6049..130b6aa6 100644 --- a/trivia-forge/frontend/src/Services/TF-db_services.jsx +++ b/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'); From 9094efae52a3b54f077e2e91f92e8cf15d8f9001 Mon Sep 17 00:00:00 2001 From: Justin Date: Sun, 26 May 2024 10:54:39 -0700 Subject: [PATCH 2/3] a couple minor changes --- trivia-forge/frontend/src/Pages/MyTrivia.jsx | 41 +++++++++++++------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/trivia-forge/frontend/src/Pages/MyTrivia.jsx b/trivia-forge/frontend/src/Pages/MyTrivia.jsx index f065838b..60e61f3f 100644 --- a/trivia-forge/frontend/src/Pages/MyTrivia.jsx +++ b/trivia-forge/frontend/src/Pages/MyTrivia.jsx @@ -14,8 +14,10 @@ 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(); @@ -23,7 +25,13 @@ function MyTrivia() { const currentUser = useStore(state => state.currentUser); const userGames = useStore(state => state.userGames); const setUserGames = useStore(state => state.setUserGames); + let CurGame = null; + const handleShow = async (game) => { + setCurrentGame(game); + console.log("current game", currentGame); + setShow(true); + }; // const user = location.state?.user; // fetch game with details when the user changes @@ -43,7 +51,7 @@ function MyTrivia() { }, [currentUser, userGames, setUserGames]); useEffect(() => { - if (currentGame) { + if (currentGame && showWarning === false) { setShow(true); } }, [currentGame]); @@ -53,21 +61,21 @@ function MyTrivia() { setCurrentGame(null); } - function handleShow(game) { - setCurrentGame(game); - setShow(true); - } + function handleShowWarning(game) { setCurrentGame(game); + console.log("current game", currentGame); setShowWarning(true); } function handleWarningClose() { setShowWarning(false); } - function handleDelete(game) { - deleteGame(game).then(res => { - setUserGames(userGames.filter(g => g.id !== game.id)); + function handleDelete() { + console.log("deleting game", currentGame); + deleteGame(currentGame).then(res => { + setUserGames(userGames.filter(g => g.id !== currentGame.id)); }); + setShowWarning(false); } console.log(userGames); @@ -104,13 +112,6 @@ function MyTrivia() { ) : (

No games to display.

)} - - - - - - - Warning @@ -125,6 +126,16 @@ function MyTrivia() { + + + + + + + + + + ); } From 4d0673363cb737678d3e36551c64940ba37199ac Mon Sep 17 00:00:00 2001 From: Justin Date: Sun, 26 May 2024 11:15:28 -0700 Subject: [PATCH 3/3] changed user.id back to user.id when creating a game. --- trivia-forge/frontend/src/Pages/MyTrivia.jsx | 5 ++--- trivia-forge/frontend/src/Pages/TriviaGenPage.jsx | 4 +++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/trivia-forge/frontend/src/Pages/MyTrivia.jsx b/trivia-forge/frontend/src/Pages/MyTrivia.jsx index 60e61f3f..4677c30a 100644 --- a/trivia-forge/frontend/src/Pages/MyTrivia.jsx +++ b/trivia-forge/frontend/src/Pages/MyTrivia.jsx @@ -25,11 +25,10 @@ function MyTrivia() { const currentUser = useStore(state => state.currentUser); const userGames = useStore(state => state.userGames); const setUserGames = useStore(state => state.setUserGames); - let CurGame = null; + const handleShow = async (game) => { setCurrentGame(game); - console.log("current game", currentGame); setShow(true); }; // const user = location.state?.user; @@ -38,7 +37,7 @@ function MyTrivia() { useEffect(() => { if (currentUser && !loaded) { setLoaded(true); - console.log("calling getGamesWithDetails"); + //console.log("calling getGamesWithDetails"); getGamesWithDetails(currentUser.id).then(res => { setUserGames(res); }); diff --git a/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx b/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx index 834bac3e..d6f93113 100644 --- a/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx +++ b/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. - let game = new Game(Title, Theme, 1); + 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);