Updated MyTrivia page to display games

trivia-forge/backend/main.py

@@ -1,8 +1,10 @@
 from flask import Flask, request, jsonify
 from endpoints import home, user, game, category, question, choice
+from flask_cors import CORS
 
 
 app = Flask(__name__)
+CORS(app)
 app.register_blueprint(home.bp)
 app.register_blueprint(user.bp)
 app.register_blueprint(game.bp)

trivia-forge/frontend/src/App.css

@@ -144,4 +144,10 @@ footer {
   background: linear-gradient(to bottom, #ff6700, #ff8c00);
   border: 3px solid #ee7600;
   outline: none;
+}
+
+.card:hover {
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  /* border: solid;
+  border-color: darkgrey; */
 }

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

@@ -0,0 +1,24 @@
+import { React, useState, useEffect } from "react";
+import { getCategories } from "../Services/TF-db_services";
+
+function GameCategories(game) {
+    const [categories, setCategories] = useState(null);
+
+    useEffect(() => {
+        getCategories(game.data).then( res => {
+            setCategories(res);
+        });
+    }, []);
+
+    return (
+        <>
+            {categories && (
+                categories.map((category, index) => (
+                    <span key={index}> • {category.title}</span>
+                ))
+            )}
+        </>
+    )
+}
+
+export default GameCategories;

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

@@ -0,0 +1,37 @@
+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 data = new Set();
+            for (let i = 0; i < categories.length; i++) {
+                data.add(categories[i].id)
+            };
+
+            getQuestions(data).then( res => {
+                setQuestions(res);
+            });
+        }
+    }, [categories]);
+
+    return (
+        <>
+            {questions && (
+                <span>{questions.length}</span>
+            )}
+        </>
+    )
+}
+
+export default GameQuestions;

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

@@ -0,0 +1,62 @@
+import { React, useState, useEffect } from "react";
+import Carousel from 'react-bootstrap/Carousel';
+import { getCategories, getQuestions ,getChoices } from "../Services/TF-db_services";
+const slideshowBackground = "https://yxdrsdfocuonvorowgaa.supabase.co/storage/v1/object/sign/UI%20Assets/white-solid-color-background?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJVSSBBc3NldHMvd2hpdGUtc29saWQtY29sb3ItYmFja2dyb3VuZCIsImlhdCI6MTcxNTE3MDQ0NywiZXhwIjo0ODY4NzcwNDQ3fQ.dPaQP-yvK0-k6wBJWrI6FqrXGEqv6Vv-a8Th99zGSyA&t=2024-05-08T12%3A14%3A08.001Z"
+
+
+function Slideshow(game) {
+    const [categories, setCategories] = useState(null);
+    const [questions, setQuestions] = useState(null);
+    const [choices, setChoices] = useState(null);
+
+    useEffect(() => {
+        getCategories(game.data).then( res => {
+            setCategories(res);
+        });
+    }, []);
+
+    useEffect(() => {
+        if (categories) {
+            const data = new Set();
+            for (let i = 0; i < categories.length; i++) {
+                data.add(categories[i].id)
+            };
+            getQuestions(data).then( res => {
+                setQuestions(res);
+            });
+        }
+    }, [categories]);
+
+    // useEffect(() => {
+    //     if (questions) {
+    //         const data = new Set();
+    //         for (let i = 0; i < categories.length; i++) {
+    //             data.add(categories[i].id)
+    //         };
+    //         getQuestions(data).then( res => {
+    //             setQuestions(res);
+    //         });
+    //     }
+    // }, [questions]);
+
+
+    return (
+        <>
+            {questions &&(
+                <Carousel data-bs-theme="dark" className="h-100">
+                    {questions.map((q, index) => (
+                        <Carousel.Item key={index}>
+                            <img src={slideshowBackground} className="d-block"/>
+                            <Carousel.Caption>
+                                <h3>{q.problem}</h3>
+                            </Carousel.Caption>
+                        </Carousel.Item>
+                    ))}
+                </Carousel>   
+            )}
+        </>       
+    )
+
+}
+
+export default Slideshow;

trivia-forge/frontend/src/Model/Category.jsx → trivia-forge/frontend/src/Models/Category.jsx

@@ -1,4 +1,4 @@
-export class Category {
+export default class Category {
     constructor(id, name, gameID) {
         this.id = id;
         this.name = name;

trivia-forge/frontend/src/Model/Choice.jsx → trivia-forge/frontend/src/Models/Choice.jsx

@@ -1,4 +1,4 @@
-export class Choice {
+export default class Choice {
     constructor(id, choice, questionID) {
         this.id = id;
         this.choice = choice;

trivia-forge/frontend/src/Model/Game.jsx → trivia-forge/frontend/src/Models/Game.jsx

@@ -1,4 +1,4 @@
-export class Game {
+export default class Game {
     constructor(id, userID, date, name, questions) {
         this.id = id;
         this.date = date;

trivia-forge/frontend/src/Model/Question.jsx → trivia-forge/frontend/src/Models/Question.jsx

@@ -1,4 +1,4 @@
-export class Question {
+export default class Question {
     constructor(id, question, answer, categoryID) {
         this.id = id;
         this.question = question;

trivia-forge/frontend/src/Model/User.jsx → trivia-forge/frontend/src/Models/User.jsx

@@ -1,4 +1,4 @@
-export class User {
+export default class User {
     constructor(id, date, email, password, profilePic) {
         this.id = id;
         this.date = date;

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

@@ -1,16 +1,96 @@
-import React from "react";
-import BootstrapTable from '../Components/BootstrapTable';
+import { React, useState, useEffect } from "react";
+import { getGames } from "../Services/TF-db_services";
+import Card from 'react-bootstrap/Card';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import Button from 'react-bootstrap/Button';
+import GameCategories from "../Components/GameCategories";
+import GameQuestions from "../Components/GameQuestions";
+import Slideshow from "../Components/Slideshow";
+import Modal from 'react-bootstrap/Modal';
+// import BootstrapTable from '../Components/BootstrapTable';
 
 function MyTrivia() {
-    return (
-        <>
-            <p>
-                My Trivia Page test
+    const [games, setGames] = useState(null);
+    const [show, setShow] = useState(false);
+    const [currentGame, setCurrentGame] = useState(null)
+
+    useEffect(() => {
+        getGames().then( res => {
+            setGames(res);
+        });
+    }, []);
+
+    useEffect(() => {
+        if(currentGame) {
+            setShow(true);
+        }
+    }, [currentGame]);
+
+    function handleClose() {
+        setShow(false);
+        setCurrentGame(null);
+    }
+
+    function handleShow(game) {
+        setCurrentGame(game);
+    }
 
-            </p>
-            <BootstrapTable />
+
+    return (
+        <>  
+            {games &&(
+                games.length > 0 ? (
+                    <Row xs={2} md={4} className="g-4 m-4">
+                        {games.map((game, index) => (
+                            <Col key={index}>
+                                <Card>
+                                    <Card.Header as="h4">{game.title}</Card.Header>
+                                    <Card.Body>
+                                        <Card.Title as="h6">Category:</Card.Title>
+                                        <Card.Text>
+                                            <GameCategories data={game}/>
+                                        </Card.Text>
+                                        <Card.Title as="h6">Number of Questions:</Card.Title>
+                                        <Card.Text>
+                                            <GameQuestions data={game}/>
+                                        </Card.Text>
+                                        <div className="text-center">
+                                            <Button variant="success" onClick={() => handleShow(game)}>Play Game</Button>
+                                        </div>
+                                    </Card.Body>
+                                </Card>    
+                            </Col>               
+                        ))}                    
+                    </Row>
+                    ) : (
+                        <p>No games to display.</p>
+                )
+            )}
+            <Modal show={show} onHide={handleClose} fullscreen={true}>
+                <Modal.Header closeButton>
+                </Modal.Header>
+                <Modal.Body>
+                    <Slideshow data={currentGame}/>
+                </Modal.Body>
+                <Modal.Footer>
+                </Modal.Footer>
+            </Modal>
         </>
     );
 
 }
-export default MyTrivia;
+export default MyTrivia;
+// function MyTrivia() {
+//     return (
+//         <>
+//             <p>
+//                 My Trivia Page test
+
+//             </p>
+//             <BootstrapTable />
+//         </>
+//     );
+
+// }
+// export default MyTrivia;