Merge pull request #26 from emmanueposu/jbranch6

Jbranch6

trivia-forge/frontend/package.json

@@ -18,7 +18,8 @@
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
     "react-icons": "^5.1.0",
-    "react-router-dom": "^6.22.3"
+    "react-router-dom": "^6.22.3",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

trivia-forge/frontend/src/Components/GameCategories.jsx

@@ -2,13 +2,16 @@ import { React, useState, useEffect } from "react";
 import { getCategories } from "../Services/TF-db_services";
 
 function GameCategories(game) {
-    const [categories, setCategories] = useState(null);
+    //const [categories, setCategories] = useState(null);
+    const categories = game.data.categories;
 
-    useEffect(() => {
-        getCategories(game.data).then( res => {
-            setCategories(res);
-        });
-    }, []);
+
+
+    // useEffect(() => {
+    //     getCategories(game.data).then(res => {
+    //         setCategories(res);
+    //     });
+    // }, []);
 
     return (
         <>

trivia-forge/frontend/src/Components/GameQuestions.jsx

@@ -2,34 +2,41 @@ import { React, useState, useEffect } from "react";
 import { getCategories, getQuestions } from "../Services/TF-db_services";
 
 function GameQuestions(game) {
-    const [categories, setCategories] = useState(null);
-    const [questions, setQuestions] = useState(null);
-
-
-    useEffect(() => {
-        getCategories(game.data).then( res => {
-            setCategories(res);
-        });
-    }, []);
-
-    useEffect(() => {
-        if (categories) {
-            const category_ids = new Set();
-            for (let i = 0; i < categories.length; i++) {
-                category_ids.add(categories[i].id)
-            };
-
-            getQuestions(category_ids).then( res => {
-                setQuestions(res);
-            });
+    //const [categories, setCategories] = useState(null);
+    //const [questions, setQuestions] = useState(null);
+    let categories = game.data.categories;
+    function questionCount() {
+        let count = 0;
+        for (let i = 0; i < categories.length; i++) {
+            count += categories[i].questions.length;
         }
-    }, [categories]);
+        return count;
+    };
+
+    // useEffect(() => {
+    //     getCategories(game.data).then( res => {
+    //         setCategories(res);
+    //     });
+    // }, []);
+
+    // useEffect(() => {
+    //     if (categories) {
+    //         const category_ids = new Set();
+    //         for (let i = 0; i < categories.length; i++) {
+    //             category_ids.add(categories[i].id)
+    //         };
+
+    //         getQuestions(category_ids).then( res => {
+    //             setQuestions(res);
+    //         });
+    //     }
+    // }, [categories]);
 
     return (
         <>
-            {questions && (
-                <span>{questions.length}</span>
-            )}
+
+            <span>{questionCount()}</span>
+
         </>
     )
 }

trivia-forge/frontend/src/Components/Questions.jsx

@@ -3,13 +3,21 @@ import Choices from "../Components/Choices";
 import { Card } from "react-bootstrap";
 
 import { Question } from "../Models/Question";
+//logic for button to generate new question
+//
+//
+//
+//
+
+
 
 function Questions({ data }) {
     let choices = data.choices;
     return (
         <div>
             <Card className="CardPadding">
                 <h2 className="centered">Question</h2>
+                //Button to generate new question somewhere in here
                 <div className="card-body">
                     <textarea className="form-control" defaultValue={data.question}></textarea>
                 </div>

trivia-forge/frontend/src/Models/State.jsx

@@ -0,0 +1,29 @@
+import { create } from 'zustand';
+
+const useStore = create((set) => ({
+    currentUser: null,
+    userGames: [],
+    currentGame: null,
+
+    setCurrentUser: (user) => set({ currentUser: user }),
+    setUserGames: (games) => set({ userGames: games }),
+    setCurrentGame: (game) => set({ currentGame: game }),
+
+    addGame: (game) => set((state) => ({
+        userGames: [...state.userGames, game],
+    })),
+    updateGame: (game) => set((state) => ({
+        userGames: state.userGames.map((g) => {
+            if (g.id === game.id) {
+                return game;
+            }
+            return g;
+        }),
+    })),
+    deleteGame: (game) => set((state) => ({
+        userGames: state.userGames.filter((g) => g.id !== game.id),
+    })),
+}));
+
+
+export default useStore;

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

@@ -1,5 +1,5 @@
 import { React, useState, useEffect } from "react";
-import { getGames } from "../Services/TF-db_services";
+import { getGames, getGamesWithDetails } from "../Services/TF-db_services";
 import Card from 'react-bootstrap/Card';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
@@ -8,20 +8,30 @@ import GameCategories from "../Components/GameCategories";
 import GameQuestions from "../Components/GameQuestions";
 import Slideshow from "../Components/Slideshow";
 import Modal from 'react-bootstrap/Modal';
+import { useNavigate } from "react-router-dom";
 
 function MyTrivia() {
     const [games, setGames] = useState(null);
     const [show, setShow] = useState(false);
     const [currentGame, setCurrentGame] = useState(null)
+    const [games_with_details, setGamesWithDetails] = useState(null);
+    const navigate = useNavigate();
 
     useEffect(() => {
-        getGames().then( res => {
+        getGames().then(res => {
             setGames(res);
         });
     }, []);
 
     useEffect(() => {
-        if(currentGame) {
+        getGamesWithDetails().then(res => {
+            setGamesWithDetails(res);
+        });
+    }, [games_with_details]);
+    console.log(games_with_details);
+
+    useEffect(() => {
+        if (currentGame) {
             setShow(true);
         }
     }, [currentGame]);
@@ -36,42 +46,42 @@ function MyTrivia() {
     }
 
     return (
-        <>  
+        <>
             <title>My Trivia</title>
-            {games &&(
-                games.length > 0 ? (
+            {games_with_details && (
+                games_with_details.length > 0 ? (
                     <Row xs={2} md={4} className="g-4 m-4">
-                        {games.map((game, index) => (
+                        {games_with_details.map((game, index) => (
                             <Col key={index}>
-                                <Card className="" style={{backgroundColor: "#f5f3f4"}}>
+                                <Card className="" style={{ backgroundColor: "#f5f3f4" }}>
                                     <Card.Header as="h4">{game.title}</Card.Header>
                                     <Card.Body>
                                         <Card.Title as="h6">Categories:</Card.Title>
                                         <Card.Text>
-                                            <GameCategories data={game}/>
+                                            <GameCategories data={game} />
                                         </Card.Text>
                                         <Card.Title as="h6">Questions:</Card.Title>
                                         <Card.Text>
-                                            <GameQuestions data={game}/>
+                                            <GameQuestions data={game} />
                                         </Card.Text>
                                         <div className="text-center">
                                             <Button onClick={() => handleShow(game)} variant="success" className="mx-2">Play</Button>
-                                            <Button onClick={() => navigation.navigate('/review', { state: { game }, state: { page: 'edit' }})} variant="secondary" className="mx-2">Edit</Button>
+                                            <Button onClick={() => navigate('/review', { state: { 'game': game, 'page': 'edit' } })} variant="secondary" className="mx-2">Edit</Button>
                                         </div>
                                     </Card.Body>
-                                </Card>    
-                            </Col>               
-                        ))}                    
+                                </Card>
+                            </Col>
+                        ))}
                     </Row>
-                    ) : (
-                        <h1 className="text-center mt-5">No games to display.</h1>
+                ) : (
+                    <h1 className="text-center mt-5">No games to display.</h1>
                 )
             )}
             <Modal show={show} onHide={handleClose} fullscreen={true}>
-                <Modal.Header data-bs-theme="dark" closeButton style={{backgroundColor: "#240046", border: "none"}}>
+                <Modal.Header data-bs-theme="dark" closeButton style={{ backgroundColor: "#240046", border: "none" }}>
                 </Modal.Header>
-                <Modal.Body style={{backgroundColor: "#240046" }}>
-                    <Slideshow data={currentGame}/>
+                <Modal.Body style={{ backgroundColor: "#240046" }}>
+                    <Slideshow data={currentGame} />
                 </Modal.Body>
             </Modal>
         </>

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

@@ -77,12 +77,12 @@ 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);
-        
+
         for (let i = 0; i < categories.length; i++) {
             let newCategory = new Category(categories[i].name);
             console.log(newCategory.name);
             game.addCategory(newCategory);
-              
+
             //parse response from API
             let sections = responses[i]; // store trivia questions
             for (let i = 0; i < sections.length; i++) {

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

@@ -5,7 +5,6 @@ import { Question } from '../Models/Question';
 import { Category } from '../Models/Category';
 import { Choice } from '../Models/Choice';
 
-
 const API_URL = 'http://127.0.0.1:5000';
 
 /* ************************************ User ************************************ */
@@ -65,6 +64,16 @@ export const getGames = async () => {
     }
 }
 
+export const getGamesWithDetails = async () => {
+    try {
+        const response = await axios.get(`${API_URL}/games/games_with_details`);
+        return response.data;
+    } catch (error) {
+        console.error('Failed to fetch games with details');
+        return [];
+    }
+}
+
 export const getGame = async (game) => {
     try {
         const response = await axios.get(`${API_URL}/games/${game.id}`);
@@ -237,10 +246,14 @@ export const updateCategory = async (category) => {
 /* ************************************ Choice ************************************ */
 
 export const getChoices = async (questions) => {
+    console.log("questions:", questions)
     try {
         const response = await axios.get(`${API_URL}/choices`);
+        console.log("response.data:", response.data)
         for (let i = 0; i < response.data.length; i++) {
-            questions[response.data[i].question_id]['choices'].push(response.data[i].text);
+            if (questions[response.data[i].question_id] !== undefined) {
+                questions[response.data[i].question_id]['choices'].push(response.data[i].text);
+            }
         }
         return questions;
     } catch (error) {