Pbranch

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/Nav";
-import TriviaGenPage from './Pages/TriviaGenPage';
-import TriviaReviewPage from './Pages/TriviaReviewPage';
-import MyTrivia from './Pages/MyTrivia';
-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';
 
@@ -28,7 +28,7 @@ function App() {
             <Route path="/" element={<Home />} />
             <Route path="/triviaGen" element={<TriviaGenPage />} />
             <Route path="/review" element={<TriviaReviewPage />} />
-            <Route path="/myTrivia" element={<MyTrivia />} />
+            <Route path="/myTrivia" element={<MyTriviaPage />} />
             <Route path="/signUp" element={<SignUpPage />} />
             <Route path="/login" element={<LoginPage />} />
           </Routes>

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

@@ -0,0 +1,18 @@
+import Button from 'react-bootstrap/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+
+
+function GenerateButtonTooltip() {
+  return (
+    <OverlayTrigger overlay={<Tooltip id="tooltip-disabled">Log in to generate a game.</Tooltip>}>
+      <span className="d-inline-block">
+        <Button disabled style={{ pointerEvents: 'none' }}>
+          Generate
+        </Button>
+      </span>
+    </OverlayTrigger>
+  );
+};
+
+export default GenerateButtonTooltip;

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { Navbar } from "react-bootstrap";
+import { Nav, Button} from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
+import useStore from '../hooks/useStore';
+
+
+function Navigation() {
+    const currentUser = useStore(state => state.currentUser);
+    const logout = useStore(state => state.logout);
+    const navigate = useNavigate();
+
+    const handleLogout = () => {
+        logout();
+        navigate('/');
+    }
+
+    return (
+        <>
+            <Navbar bg="dark" data-bs-theme="dark">
+                <Nav className="me-auto">
+                    <Nav.Link className="navbar-brand" href="/">Home</Nav.Link>
+                    <Nav.Link href="/triviaGen">Create New Trivia</Nav.Link>
+                    <Nav.Link href="/myTrivia">My Trivia</Nav.Link>
+                </Nav>
+
+                <Nav className="me-2">
+                    {currentUser ? (
+                        <Button onClick={handleLogout}>
+                            <i className="bi bi-person-circle me-2"></i>Logout: {currentUser.username}
+                        </Button>
+                    ) : (
+                        <Button onClick={() => navigate('/login')}>
+                            <i className="bi bi-person-circle me-2"></i>Log In
+                        </Button>
+                    )}
+                </Nav>
+            </Navbar>
+        </>
+    );
+}
+
+export default Navigation;

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

@@ -0,0 +1,22 @@
+import { React} from "react";
+
+
+function QuestionsCount(game) {
+    let categories = game?.data.categories || [];
+
+    function questionCount() {
+        let count = 0;
+        for (let i = 0; i < categories.length; i++) {
+            count += categories[i].questions.length;
+        }
+        return count;
+    };
+
+    return (
+        <>
+            <span>{questionCount()}</span>
+        </>
+    )
+}
+
+export default QuestionsCount;

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

@@ -0,0 +1,21 @@
+import React from "react";
+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}/>
+                );
+            })}
+        </div>
+    );
+}
+
+export default ReviewCategories;

trivia-forge/frontend/src/Components/Choices.jsx → trivia-forge/frontend/src/Components/ReviewChoices.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 
-
-function Choices({ data, path, index, changeValue }) {
+function ReviewChoices({ data, path, index, changeValue }) {
     let newPath = structuredClone(path)
     newPath.push('choices', index)
 
@@ -11,4 +10,5 @@ function Choices({ data, path, index, changeValue }) {
         </div>
     );
 }
-export default Choices;
+
+export default ReviewChoices;

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

@@ -1,50 +1,52 @@
 import React from "react";
-import Choices from "../Components/Choices";
+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
 //
 //
 //
 //
 
-
-
-function Questions({ data, path, index, changeValue, isMultipleChoice }) {
+function ReviewQuestions({ data, path, index, changeValue, isMultipleChoice }) {
     let choices = data.choices;
-    let newPath = structuredClone(path)
-    newPath.push('questions', index)
+    let newPath = structuredClone(path);
+    const key = data.problem ? "problem" : "question";
+    newPath.push('questions', index);
 
     return (
         <div>
             <Card className="CardPadding">
                 <h2 className="centered">Question</h2>
-                //Button to generate new question somewhere in here
+                {/* //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, "problem", 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 (
-                                <Choices 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>
                 </div>
+
                 <h2>Hint</h2>
                 <div className="card-body">
                     <textarea className="form-control" defaultValue={data.hint} onChange={(e) => {changeValue(newPath, "hint", e.target.value)}}></textarea>
                 </div>
             </Card>
-
         </div >
     )
 }
-export default Questions;
+export default ReviewQuestions;