sign up page now stores user in database

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

@@ -238,3 +238,10 @@ footer {
   flex: 0 0 auto;
   text-align: center;
 }
+
+
+.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/Questions.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import Choices from "../Components/Choices";
 import { Card } from "react-bootstrap";
 
-import { Question } from "../Model/Question";
+import { Question } from "../Models/Question";
 
 function Questions({ data }) {
     let choices = data.choices;

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/User.jsx → trivia-forge/frontend/src/Models/User.jsx

@@ -1,10 +1,11 @@
 import datetime from 'node-datetime';
 export class User {
-    constructor(date, email, password, profilePic = null) {
-        this.id = null;
+    constructor(date, email, password, username, profilePic = null) {
+        // this.id = null;
+        this.username = username;
         this.email = email;
         this.password = password;
-        this.profilePic = profilePic;
+        // this.profilePic = null;
         this.games = [];
     }
 
@@ -13,10 +14,11 @@ export class User {
     }
     toJsonObject() {
         return {
-            id: this.id,
+            // id: this.id,
+            username: this.username,
             email: this.email,
             password: this.password,
-            profilePic: this.profilePic
+            // profilePic: this.profilePic
         }
     }
 }

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;

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

@@ -2,11 +2,13 @@ import React, { useState } from 'react';
 import { useNavigate } from "react-router-dom";
 import { Form, Button, Card } from "react-bootstrap";
 import { addUser } from '../Services/TF-db_services';
+import { User } from '../Models/User';
 
 function SignUpPage() {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
+    const [username, setUsername] = useState('');
     const navigate = useNavigate();
 
     const handleSubmit = async (event) => {
@@ -15,10 +17,8 @@ function SignUpPage() {
             alert('Passwords do not match');
             return;
         }
-        const user = {
-            email: email,
-            password: password
-        };
+        const user = new User(null, email, password, username); 
+        console.log('Sending user data:', user.toJsonObject());
         const addedUser = await addUser(user);
         if (addedUser) {
             alert('User added:', addedUser);
@@ -40,6 +40,11 @@ function SignUpPage() {
                         </Form.Text>
                     </Form.Group>
 
+                    <Form.Group className="mb-3" controlId="formBasicUsername">
+                        <Form.Label>Username</Form.Label>
+                        <Form.Control type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} />
+                    </Form.Group>
+
                     <Form.Group className="mb-3" controlId="formBasicPassword">
                         <Form.Label>Password</Form.Label>
                         <Form.Control type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />

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

@@ -1,10 +1,10 @@
 import React, { useState } from "react"; // variables that cause the component to re-render when they change
 import OpenAI from "openai";
-import { Game } from "../Model/Game";
+import { Game } from "../Models/Game";
 import { useNavigate } from "react-router-dom";
-import { Question } from "../Model/Question";
-import { Choice } from "../Model/Choice";
-import { Category } from "../Model/Category";
+import { Question } from "../Models/Question";
+import { Choice } from "../Models/Choice";
+import { Category } from "../Models/Category";
 import { Card } from "react-bootstrap";