Pbranch

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

@@ -1,14 +1,16 @@
 import React from "react";
 import Questions from "../Components/Questions";
 
-function Categories({ category }) {
+function Categories({ category, index, changeValue}) {
     let questions = category.questions;
+    const path = ['categories', index];
+
     return (
         <div>
-            <h2>{category.name}</h2>
+            <h2>{category.title || category.name}</h2>
             {questions.map((question, index) => {
                 return (
-                    <Questions key={index} data={question} />
+                    <Questions key={index} data={question} path={path} index={index} changeValue={changeValue}/>
                 );
             })}
         </div>

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

@@ -1,16 +1,13 @@
 import React from "react";
 
 
-function Choices({ choices }) {
+function Choices({ data, path, index, changeValue }) {
+    let newPath = structuredClone(path)
+    newPath.push('choices', index)
+
     return (
-        <div>
-            {choices.map((choice, index) => {
-                return (
-                    <div className="card-body" key={index}>
-                        <textarea className="form-control" defaultValue={choice.text}></textarea>
-                    </div>
-                );
-            })}
+        <div className="card-body">
+            <textarea className="form-control" defaultValue={data.text} onChange={(e) => {changeValue(newPath, "text", e.target.value)}}></textarea>
         </div>
     );
 }

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

@@ -29,14 +29,14 @@ function Navigation() {
                     <Nav.Link href="/triviaGen">Create New Trivia</Nav.Link>
                     <Nav.Link href="/myTrivia">My Trivia</Nav.Link>
                 </Nav>
-                <Nav style={{ marginRight: ".5rem" }}>
+                <Nav className="me-2">
                     {currentUser ? (
                         <Button onClick={handleLogout}>
-                            <i className="bi bi-person-circle" style={{ marginRight: ".5rem" }}></i>Logout: {currentUser.username}
+                            <i className="bi bi-person-circle me-2"></i>Logout: {currentUser.username}
                         </Button>
                     ) : (
                         <Button onClick={handleShow}>
-                            <i className="bi bi-person-circle" style={{ marginRight: ".5rem" }}></i>Log In
+                            <i className="bi bi-person-circle me-2"></i>Log In
                         </Button>
                     )}
                 </Nav>

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

@@ -11,25 +11,33 @@ import { Question } from "../Models/Question";
 
 
 
-function Questions({ data }) {
+function Questions({ data, path, index, changeValue }) {
     let choices = data.choices;
+    let newPath = structuredClone(path)
+    newPath.push('questions', index)
+
     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>
+                    <textarea className="form-control" defaultValue={data.problem || data.question} onChange={(e) => {changeValue(newPath, "problem", e.target.value)}}></textarea>
                 </div>
                 <h2>Choices</h2>
-                <Choices choices={choices} />
+                {choices.map((choice, index) => {
+                    return (
+                        <Choices key={index} data={choice} path={newPath} index={index} changeValue={changeValue}/>
+                    );
+                 })}
+
                 <h2>Answer</h2>
                 <div className="card-body">
-                    <textarea className="form-control" defaultValue={data.answer}></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}></textarea>
+                    <textarea className="form-control" defaultValue={data.hint} onChange={(e) => {changeValue(newPath, "hint", e.target.value)}}></textarea>
                 </div>
             </Card>
 

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

@@ -27,6 +27,13 @@ const useStore = create((set) => ({
         saveToLocalStorage('userGames', updatedGames); // save updated game list
         return { userGames: updatedGames }; // return updated game state
     }),
+    updateGame: (updatedGame) => set((state) => {
+        const updatedGames = state.userGames.map((game) =>
+            game.id === updatedGame.id ? updatedGame : game
+        );
+        saveToLocalStorage('userGames', updatedGames);
+        return { userGames: updatedGames };
+    }),
     logout: () => {
         localStorage.removeItem('currentUser');
         localStorage.removeItem('userGames');

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

@@ -42,9 +42,9 @@ function LoginPage() {
     };
 
     return (
-        <>
+        <div className="d-flex justify-content-center mt-5">
             <title>Login</title>
-            <Card style={{ width: '35rem', margin: '0 auto', float: 'none' }}>
+            <Card style={{ width: '35rem'}}>
                 <Form onSubmit={handleSubmit} className="form-group">
                     <Form.Group className="mb-3" controlId="formBasicEmail">
                         <Form.Label>Email address</Form.Label>
@@ -55,13 +55,14 @@ function LoginPage() {
                         <Form.Label>Password</Form.Label>
                         <Form.Control type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
                     </Form.Group>
-
-                    <Button variant="primary" type="submit">
-                        Login
-                    </Button>
+                    <div className="d-flex justify-content-center">
+                        <Button variant="primary" type="submit">
+                            Login
+                        </Button>
+                    </div>
                 </Form>
             </Card>
-        </>
+        </div>
     );
 }
 export default LoginPage;

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

@@ -82,7 +82,7 @@ function MyTrivia() {
     return (
         <>
             <title>My Trivia</title>
-            {/* check if there are games ti display */}
+            {/* check if there are games to display */}
             {userGames.length > 0 ? (
                 <Row xs={2} md={4} className="g-4 m-4">
                     {/* iterate over games */}
@@ -102,15 +102,15 @@ function MyTrivia() {
                                     <div className="text-center">
                                         <Button onClick={() => handleShow(game)} variant="success" className="mx-2">Play</Button>
                                         <Button onClick={() => navigate('/review', { state: { 'game': game, 'page': 'edit' } })} variant="secondary" className="mx-2">Edit</Button>
-                                        <Button onClick={() => handleShowWarning(game)} >Delete</Button>
+                                        <Button onClick={() => handleShowWarning(game)} variant="dark">Delete</Button>
                                     </div>
                                 </Card.Body>
                             </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={showWarning} onHide={handleWarningClose}>
                 <Modal.Header closeButton>

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

@@ -33,9 +33,9 @@ function SignUpPage() {
     }
 
     return (
-        <>
+        <div className="d-flex justify-content-center mt-5">
             <title>Sign Up</title>
-            <Card style={{ width: '35rem', margin: '0 auto', float: 'none' }}>
+            <Card style={{ width: '35rem'}}>
                 <Form onSubmit={handleSubmit} className="form-group">
                     <Form.Group className="mb-3" controlId="formBasicEmail">
                         <Form.Label>Email address</Form.Label>
@@ -59,13 +59,14 @@ 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>
-
-                    <Button variant="primary" type="submit">
-                        Create Account
-                    </Button>
+                    <div className="d-flex justify-content-center">
+                        <Button variant="primary" type="submit">
+                            Create Account
+                        </Button>
+                    </div>
                 </Form>
             </Card>
-        </>
+        </div>
     );
 }
 export default SignUpPage;