Updated AddAllForGame function to return game with details and change…

…d loaded from a local to a global state
emmanueposu · Jun 1, 2024 · 80bda1b · 80bda1b
1 parent 494ee4e
commit 80bda1b
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 25 deletions.
diff --git a/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx b/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx
@@ -142,7 +142,8 @@ function TriviaGenPage() {
         console.log("Game Categories", game.categories);
 
         // Save game to global state and local storage
-        addGame(game);
+        console.log("test:", game)
+        // addGame(game);
         // state property to pass data as object to new route
         navigate('/review', { state: { game: game, page: 'review', isMultipleChoice: isMultipleChoice } });
         //console.log(completion.choices[0].message);

diff --git a/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx b/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx
@@ -15,20 +15,19 @@ function TriviaReviewPage() {
 	let categories = game.categories;
 	const navigate = useNavigate();
 	const updateGame = useStore(state => state.updateGame);
-	const addGame = useStore(state => state.updateGame);
+	const addGame = useStore(state => state.addGame);
 
 	console.log(game)
 
-	const HandleSaveGame = async () => {
-		updateGame(game)
+	const HandleUpdateGame = async () => {
 		await UpdateAllForGame(game);
+		updateGame(game)
 		navigate('/myTrivia');
 	};
 
 	const HandleCreateGame = async () => {
-		// console.log("new:", game)
-		// addGame(game);
-		await AddAllForGame(game);
+		const newGame = await AddAllForGame(game);
+		addGame(newGame);
 		navigate('/myTrivia');
 	};
 
@@ -61,7 +60,7 @@ function TriviaReviewPage() {
 			</div>
 			<div className="trivia-button-container">
 				{page === 'edit' ? (
-					<Button variant="primary" onClick={HandleSaveGame} className="trivia-review-button">
+					<Button variant="primary" onClick={HandleUpdateGame} className="trivia-review-button">
 						Save Changes
 					</Button>
 				) : (

diff --git a/trivia-forge/frontend/src/Pages/myTriviaPage.jsx b/trivia-forge/frontend/src/Pages/myTriviaPage.jsx
@@ -23,21 +23,17 @@ function MyTriviaPage() {
     const [showWarning, setShowWarning] = useState(false); // visibility of warning modal
     const [currentGame, setCurrentGame] = useState(null); // store current game
 
-    const [loaded, setLoaded] = useState(false);
+    // 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 loaded = useStore(state => state.loaded);
+    const setLoaded = useStore(state => state.setLoaded);
 
-
-    useEffect(() => {
-        if (currentUser && userGames.length === 0) {
-            setSpinnerDisplay("flex");
-        }
-    }, []);
-
+
     useEffect(() => {
         if (!currentUser) {
             setNoGamesMsgDisplay("");
@@ -50,22 +46,23 @@ function MyTriviaPage() {
     useEffect(() => {
         console.log("loaded:", loaded)
         if (currentUser && loaded === false) {
-            setLoaded(true);
-            console.log("calling getGamesWithDetails");
+            setSpinnerDisplay("flex");
+            // console.log("calling getGamesWithDetails");
             getGamesWithDetails(currentUser.id).then(res => {
-                setSpinnerDisplay("none")
                 if (res.length > 0) {
                     setUserGames(res);
                 } else {
                     setNoGamesMsgDisplay("");
                 }
+                setLoaded(true);
+                setSpinnerDisplay("none")
             });
+        } else if (currentUser && loaded === true) {
+            if (userGames.length === 0) {
+                setNoGamesMsgDisplay("");
+            }
         }
-        // Cleanup function to reset loaded when component unmounts
-        // return () => {
-        //     setLoaded(false);
-        // };
-    }, [loaded]);
+    }, [userGames]);
 
 
     function handleGameShow (game) {

diff --git a/trivia-forge/frontend/src/hooks/useStore.jsx b/trivia-forge/frontend/src/hooks/useStore.jsx
@@ -14,6 +14,7 @@ const getFromLocalStorage = (key) => {
 const useStore = create((set) => ({
     currentUser: getFromLocalStorage('currentUser'), // initialize current user from local storage 
     userGames: getFromLocalStorage('userGames') || [], // initialize user games if null set empty array
+    loaded: getFromLocalStorage('loaded') || false,
     setCurrentUser: (user) => {
         saveToLocalStorage('currentUser', user);
         set({ currentUser: user });
@@ -34,10 +35,15 @@ const useStore = create((set) => ({
         saveToLocalStorage('userGames', updatedGames);
         return { userGames: updatedGames };
     }),
+    setLoaded: (bool) => {
+        saveToLocalStorage('loaded', bool);
+        set({ loaded: bool });
+    },
     logout: () => {
         localStorage.removeItem('currentUser');
         localStorage.removeItem('userGames');
-        set({ currentUser: null, userGames: [] });
+        localStorage.removeItem('loaded');
+        set({ currentUser: null, userGames: [], loaded: false });
     },
 }));
 

diff --git a/trivia-forge/frontend/src/services/saveGameService.jsx b/trivia-forge/frontend/src/services/saveGameService.jsx
@@ -2,24 +2,28 @@ import * as api from './triviaForgeApiService';
 
 
 export const AddAllForGame = async (game) => {
+    console.log("start game:", game)
     try {
         // Add the game to the database
         //console.log("Adding game:", game);
         const newGame = await api.addGame(game);
+        newGame.categories = []
         //console.log("Added game with ID:", newGame.id);
 
         // Process each category in the game's categories
         for (const category of game.categories) {
             category.gameID = newGame.id; // Link category to the game
             //console.log("Adding category:", category);
             const newCategory = await api.addCategory(category);
+            newCategory.questions = [];
             //console.log("Added category with ID:", newCategory.id);
 
             // Process each question in the category's questions
             for (const question of category.questions) {
                 question.categoryID = newCategory.id; // Link question to the category
                 //console.log("Adding question:", question);
                 const newQuestion = await api.addQuestion(question);
+                newQuestion.choices = [];
                 //console.log("Added question with ID:", newQuestion.id);
 
                 // Process each choice in the question's choices
@@ -28,11 +32,15 @@ export const AddAllForGame = async (game) => {
                     //console.log("Adding choice:", choice);
                     const newChoice = await api.addChoice(choice);
                     //console.log("Added choice with ID:", newChoice.id);
+                    newQuestion.choices.push(newChoice);
                 }
+                newCategory.questions.push(newQuestion);
             }
+            newGame.categories.push(newCategory);
         }
 
         // Return the newly created game
+        console.log("end game:", newGame)
         return newGame;
     } catch (error) {
         console.error("Error adding game, categories, questions, or choices:", error);