on triviaGen I made fields required and a single category shown at th…

…e start. I also made it so a max of 5 categeries can be added to a single game.
emmanueposu · Jun 1, 2024 · af74550 · af74550
1 parent 7f6ecdd
commit af74550
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 48 deletions.
diff --git a/trivia-forge/frontend/src/App.jsx b/trivia-forge/frontend/src/App.jsx
@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import './App.css';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Home from "./pages/homePage";
-import Navigation from "./components/Navigation";
-import TriviaGenPage from './pages/triviaGenPage';
-import TriviaReviewPage from './pages/triviaReviewPage';
-import MyTriviaPage from './pages/myTriviaPage';
-import LoginPage from './pages/loginPage';
-import SignUpPage from './pages/signUpPage';
+import Home from "./Pages/HomePage";
+import Navigation from "./Components/Navigation";
+import TriviaGenPage from './Pages/TriviaGenPage';
+import TriviaReviewPage from './Pages/TriviaReviewPage';
+import MyTriviaPage from './Pages/myTriviaPage';
+import LoginPage from './Pages/LoginPage';
+import SignUpPage from './Pages/SignUpPage';
 import React from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 

diff --git a/trivia-forge/frontend/src/Components/ReviewCategories.jsx b/trivia-forge/frontend/src/Components/ReviewCategories.jsx
@@ -1,17 +1,17 @@
 import React from "react";
-import ReviewQuestions from "../components/ReviewQuestions";
+import ReviewQuestions from "../Components/ReviewQuestions";
 
 
 function ReviewCategories({ category, index, changeValue, isMultipleChoice }) {
     let questions = category.questions;
     const path = ['categories', index];
-    
+
     return (
         <div>
             <h2>{category.title || category.name}</h2>
             {questions.map((question, index) => {
                 return (
-                    <ReviewQuestions key={index} data={question} path={path} index={index} changeValue={changeValue} isMultipleChoice={isMultipleChoice}/>
+                    <ReviewQuestions key={index} data={question} path={path} index={index} changeValue={changeValue} isMultipleChoice={isMultipleChoice} />
                 );
             })}
         </div>

diff --git a/trivia-forge/frontend/src/Components/ReviewQuestions.jsx b/trivia-forge/frontend/src/Components/ReviewQuestions.jsx
@@ -1,7 +1,7 @@
 import React from "react";
-import ReviewChoices from "../components/ReviewChoices";
+import ReviewChoices from "../Components/ReviewChoices";
 import { Card } from "react-bootstrap";
-import { Question } from "../models/question";
+import { Question } from "../Models/Question";
 
 
 //logic for button to generate new question
@@ -22,28 +22,28 @@ function ReviewQuestions({ data, path, index, changeValue, isMultipleChoice }) {
                 <h2 className="centered">Question</h2>
                 {/* //Button to generate new question somewhere in here */}
                 <div className="card-body">
-                    <textarea className="form-control" defaultValue={data.problem || data.question} onChange={(e) => {changeValue(newPath, key, e.target.value)}}></textarea>
+                    <textarea className="form-control" defaultValue={data.problem || data.question} onChange={(e) => { changeValue(newPath, key, e.target.value) }}></textarea>
                 </div>
 
                 {isMultipleChoice && (
                     <>
                         <h2>Choices</h2>
                         {choices.map((choice, index) => {
                             return (
-                                <ReviewChoices key={index} data={choice} path={newPath} index={index} changeValue={changeValue}/>
+                                <ReviewChoices key={index} data={choice} path={newPath} index={index} changeValue={changeValue} />
                             );
                         })}
                     </>
                 )}
 
                 <h2>Answer</h2>
                 <div className="card-body">
-                    <textarea className="form-control" defaultValue={data.answer} onChange={(e) => {changeValue(newPath, "answer", e.target.value)}}></textarea>
+                    <textarea className="form-control" defaultValue={data.answer} onChange={(e) => { changeValue(newPath, "answer", e.target.value) }}></textarea>
                 </div>
 
                 <h2>Hint</h2>
                 <div className="card-body">
-                    <textarea className="form-control" defaultValue={data.hint} onChange={(e) => {changeValue(newPath, "hint", e.target.value)}}></textarea>
+                    <textarea className="form-control" defaultValue={data.hint} onChange={(e) => { changeValue(newPath, "hint", e.target.value) }}></textarea>
                 </div>
             </Card>
         </div >

diff --git a/trivia-forge/frontend/src/Pages/SignUpPage.jsx b/trivia-forge/frontend/src/Pages/SignUpPage.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useNavigate } from "react-router-dom";
 import { Form, Button, Card } from "react-bootstrap";
 import { addUser } from '../services/triviaForgeApiService';
-import { User } from '../models/user';
+import { User } from '../Models/User';
 
 
 function SignUpPage() {
@@ -20,7 +20,7 @@ function SignUpPage() {
             return;
         }
         // create new user object with form input values
-        const user = new User(null, email, password, username); 
+        const user = new User(null, email, password, username);
         // console.log('Sending user data:', user.toJsonObject());
         // call addUser function to add new user to database
         const addedUser = await addUser(user);
@@ -37,7 +37,7 @@ function SignUpPage() {
             <title>Sign Up</title>
 
             <div className="d-flex justify-content-center mt-5">
-                <Card style={{ width: '35rem'}}>
+                <Card style={{ width: '35rem' }}>
                     <Form onSubmit={handleSubmit} className="form-group">
                         <Form.Group className="mb-3" controlId="formBasicEmail">
                             <Form.Label>Email address</Form.Label>
@@ -61,7 +61,7 @@ function SignUpPage() {
                             <Form.Label>Confirm Password</Form.Label>
                             <Form.Control type="password" placeholder="Confirm Password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
                         </Form.Group>
-                        
+
                         <div className="d-flex justify-content-center">
                             <Button variant="primary" type="submit">
                                 Create Account

diff --git a/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx b/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx
@@ -1,15 +1,15 @@
 import React, { useState } from "react"; // variables that cause the component to re-render when they change
 import OpenAI from "openai";
-import { Game } from "../models/game";
+import { Game } from "../Models/Game";
 import { useNavigate } from "react-router-dom";
-import { Question } from "../models/question";
-import { Choice } from "../models/choice";
-import { Category } from "../models/category";
+import { Question } from "../Models/Question";
+import { Choice } from "../Models/Choice";
+import { Category } from "../Models/Category";
 import { Card } from "react-bootstrap";
 import useStore from '../hooks/useStore'; // global state management
 import Spinner from 'react-bootstrap/Spinner';
 import Button from 'react-bootstrap/Button';
-import GenerateButtonTooltip from "../components/GenerateButtonTooltip";
+import GenerateButtonTooltip from "../Components/GenerateButtonTooltip";
 
 // initialize openai client using configuration specified in vite environment variables 
 // reference: https://platform.openai.com/docs/api-reference/making-requests
@@ -23,16 +23,24 @@ function TriviaGenPage() {
     const [numberOfQuestions, setNumberOfQuestions] = useState('');
     const [Title, setTitle] = useState('');
     const [Theme, setTheme] = useState('');
-    const [categories, setCategories] = useState([]);
+    const [categories, setCategories] = useState([{ name: '' }]);
     const [isMultipleChoice, setIsMultipleChoice] = useState(false);
     const [spinnerVisibility, setSpinnerVisibility] = useState("none");
     const [submitBtnLabel, setSubmitBtnLabel] = useState("Generate");
     const navigate = useNavigate();
     const user = useStore(state => state.currentUser); // get current user from global state
+    const [categoryCount, setCategoryCount] = useState(1);
 
     const handleAddCategory = () => {
-        const newCategory = { name: '' };
-        setCategories([...categories, newCategory]);
+        if (categoryCount >= 5) {
+            return;
+        }
+        else {
+            const newCategory = { name: '' };
+            setCategories([...categories, newCategory]);
+            let count = categoryCount
+            setCategoryCount(count + 1);
+        }
     };
 
     const handleChangeCategoryDetail = (index, field, value) => {
@@ -124,7 +132,7 @@ function TriviaGenPage() {
                     let question = sections[j].slice(10);
                     let answer = sections[j + 1].slice(8);
                     let hint = sections[j + 2].slice(6);
-    
+
                     //create question object and add it to category
                     let newQuestion = new Question(question, answer, hint, isMultipleChoice);
                     newCategory.addQuestion(newQuestion);
@@ -149,9 +157,9 @@ function TriviaGenPage() {
             <h1 className="text-center mt-5">
                 Trivia Generator
             </h1>
-            
+
             <div className="d-flex justify-content-center">
-                <Card className="mt-4" style={{width: "35rem"}}>
+                <Card className="mt-4" style={{ width: "35rem" }}>
                     <form onSubmit={handleSubmit}>
                         <div className="form-group">
                             <label htmlFor="triviaTitle">Title:</label>
@@ -162,6 +170,7 @@ function TriviaGenPage() {
                                 className="form-control"
                                 id="triviaTitle"
                                 placeholder="Title"
+                                required
                             />
                         </div>
 
@@ -174,6 +183,7 @@ function TriviaGenPage() {
                                 className="form-control"
                                 id="triviaTheme"
                                 placeholder="Theme"
+                                required
                             />
                         </div>
 
@@ -186,6 +196,7 @@ function TriviaGenPage() {
                                 className="form-control"
                                 id="triviaTitle"
                                 placeholder="Number of Questions"
+                                required
                             />
                         </div>
 
@@ -201,13 +212,14 @@ function TriviaGenPage() {
                                             className="form-control"
                                             id="categoryName"
                                             placeholder="Category"
+                                            required
                                         />
                                         <br />
                                     </div>
                                 </Card>
                             ))}
                         </div>
-                        
+
                         <button type="button" className="btn btn-secondary ms-4" onClick={handleAddCategory}>Add Category</button>
 
                         <div className="form-group">
@@ -230,7 +242,7 @@ function TriviaGenPage() {
                                         size="sm"
                                         role="status"
                                         aria-hidden="true"
-                                        style={{display: spinnerVisibility}}
+                                        style={{ display: spinnerVisibility }}
                                         className="me-2"
                                     />
                                     {submitBtnLabel}

diff --git a/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx b/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom'; // used to access passed state
-import ReviewCategories from '../components/ReviewCategories';
+import ReviewCategories from '../Components/ReviewCategories';
 import { Button } from 'react-bootstrap';
 import { AddAllForGame, UpdateAllForGame } from '../services/saveGameService';
 import { useNavigate } from "react-router-dom";
@@ -16,7 +16,7 @@ function TriviaReviewPage() {
 	const navigate = useNavigate();
 	const updateGame = useStore(state => state.updateGame);
 	const addGame = useStore(state => state.addGame);
-	
+
 	console.log(game)
 
 	const HandleUpdateGame = async () => {
@@ -33,7 +33,7 @@ function TriviaReviewPage() {
 
 	function changeValue(path, key, value) {
 		let current = game
-		
+
 		for (let i = 0; i < path.length; i++) {
 			current = current[path[i]]
 			if (i == path.length - 1) {
@@ -54,7 +54,7 @@ function TriviaReviewPage() {
 					<div key={index} className="category-container">
 						<label className="input-label">Category Name:</label>
 						<input type="text" className="input-field" value={cat.title || cat.name} readOnly />
-						<ReviewCategories category={cat} index={index} changeValue={changeValue} isMultipleChoice={isMultipleChoice}/>
+						<ReviewCategories category={cat} index={index} changeValue={changeValue} isMultipleChoice={isMultipleChoice} />
 					</div>
 				))}
 			</div>

diff --git a/trivia-forge/frontend/src/Pages/myTriviaPage.jsx b/trivia-forge/frontend/src/Pages/myTriviaPage.jsx
@@ -5,9 +5,9 @@ import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import Button from 'react-bootstrap/Button';
 import Spinner from 'react-bootstrap/Spinner';
-import UnorderedCategoriesList from "../components/UnorderedCategoriesList";
-import QuestionsCount from "../components/QuestionsCount";
-import Slideshow from "../components/Slideshow";
+import UnorderedCategoriesList from "../Components/UnorderedCategoriesList";
+import QuestionsCount from "../Components/QuestionsCount";
+import Slideshow from "../Components/Slideshow";
 import Modal from 'react-bootstrap/Modal';
 import { Link, useNavigate } from "react-router-dom";
 import useStore from '../hooks/useStore';
@@ -52,7 +52,7 @@ function MyTriviaPage() {
         }
     }, [userGames]);
 
-    function handleGameShow (game) {
+    function handleGameShow(game) {
         setCurrentGame(game);
         setShowGame(true);
     };
@@ -81,7 +81,7 @@ function MyTriviaPage() {
             <title>My Trivia</title>
 
             <div className="justify-content-center align-items-center" style={{ height: "50rem", display: spinnerDisplay }}>
-                <Spinner animation="border" role="status" variant="warning" className="" style={{ height: "9rem", width: "9rem"}} />
+                <Spinner animation="border" role="status" variant="warning" className="" style={{ height: "9rem", width: "9rem" }} />
             </div>
             {/* check if there are games to display */}
             {userGames.length > 0 && (
@@ -132,7 +132,7 @@ function MyTriviaPage() {
                     <Button variant="secondary" onClick={handleWarningClose}>
                         No
                     </Button>
-                    
+
                     <Button variant="primary" onClick={() => handleDelete(currentGame)}>
                         Yes
                     </Button>
@@ -142,7 +142,7 @@ function MyTriviaPage() {
             <Modal show={showGame} onHide={handleGameClose} fullscreen={true}>
                 <Modal.Header data-bs-theme="dark" closeButton style={{ backgroundColor: "#240046", border: "none" }}>
                 </Modal.Header>
-                
+
                 <Modal.Body style={{ backgroundColor: "#240046" }}>
                     <Slideshow data={currentGame} />
                 </Modal.Body>

diff --git a/trivia-forge/frontend/src/services/triviaForgeApiService.jsx b/trivia-forge/frontend/src/services/triviaForgeApiService.jsx
@@ -1,8 +1,8 @@
 import axios from 'axios';
-import { Game } from '../models/game';
-import { Question } from '../models/question';
-import { Category } from '../models/category';
-import { Choice } from '../models/choice';
+import { Game } from '../Models/Game';
+import { Question } from '../Models/Question';
+import { Category } from '../Models/Category';
+import { Choice } from '../Models/Choice';
 
 const API_URL = 'http://127.0.0.1:5000';