From e1e3cc74dcfb6ce012632ec968306d10193b1568 Mon Sep 17 00:00:00 2001 From: emmanueposu Date: Mon, 27 May 2024 07:54:20 -0700 Subject: [PATCH 1/5] Added an edit feature for games and fixed the issue where the category and question fields on the review page were blank. --- .../frontend/src/Components/Categories.jsx | 8 +++-- .../frontend/src/Components/Choices.jsx | 15 ++++----- .../frontend/src/Components/Questions.jsx | 18 +++++++--- .../frontend/src/Components/useStore.jsx | 7 ++++ trivia-forge/frontend/src/Pages/LoginPage.jsx | 2 +- trivia-forge/frontend/src/Pages/MyTrivia.jsx | 2 +- .../frontend/src/Pages/TriviaReviewPage.jsx | 22 +++++++++++-- .../frontend/src/Services/Services.jsx | 8 ++--- .../frontend/src/Services/TF-db_services.jsx | 33 +++++++++++++++++++ 9 files changed, 90 insertions(+), 25 deletions(-) diff --git a/trivia-forge/frontend/src/Components/Categories.jsx b/trivia-forge/frontend/src/Components/Categories.jsx index 0e2ff42a..913f96d9 100644 --- a/trivia-forge/frontend/src/Components/Categories.jsx +++ b/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 (
-

{category.name}

+

{category.title}

{questions.map((question, index) => { return ( - + ); })}
diff --git a/trivia-forge/frontend/src/Components/Choices.jsx b/trivia-forge/frontend/src/Components/Choices.jsx index f0c8c45c..ee3a4779 100644 --- a/trivia-forge/frontend/src/Components/Choices.jsx +++ b/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 ( -
- {choices.map((choice, index) => { - return ( -
- -
- ); - })} +
+
); } diff --git a/trivia-forge/frontend/src/Components/Questions.jsx b/trivia-forge/frontend/src/Components/Questions.jsx index 0aac5e98..f756e8bf 100644 --- a/trivia-forge/frontend/src/Components/Questions.jsx +++ b/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 (

Question

//Button to generate new question somewhere in here
- +

Choices

- + {choices.map((choice, index) => { + return ( + + ); + })} +

Answer

- +

Hint

- +
diff --git a/trivia-forge/frontend/src/Components/useStore.jsx b/trivia-forge/frontend/src/Components/useStore.jsx index ba779d6f..ff4245ea 100644 --- a/trivia-forge/frontend/src/Components/useStore.jsx +++ b/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'); diff --git a/trivia-forge/frontend/src/Pages/LoginPage.jsx b/trivia-forge/frontend/src/Pages/LoginPage.jsx index 3b5a5b59..e2fba94e 100644 --- a/trivia-forge/frontend/src/Pages/LoginPage.jsx +++ b/trivia-forge/frontend/src/Pages/LoginPage.jsx @@ -28,7 +28,7 @@ function LoginPage() { // set user and games in global store setCurrentUser(user); - setUserGames(games); + // setUserGames(games); // console.log('User games:', games); diff --git a/trivia-forge/frontend/src/Pages/MyTrivia.jsx b/trivia-forge/frontend/src/Pages/MyTrivia.jsx index 32d817c8..0ffc83f9 100644 --- a/trivia-forge/frontend/src/Pages/MyTrivia.jsx +++ b/trivia-forge/frontend/src/Pages/MyTrivia.jsx @@ -53,7 +53,7 @@ function MyTrivia() { return ( <> My Trivia - {/* check if there are games ti display */} + {/* check if there are games to display */} {userGames.length > 0 ? ( {/* iterate over games */} diff --git a/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx b/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx index 742361f6..5b35c225 100644 --- a/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx +++ b/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx @@ -4,6 +4,7 @@ import Categories from '../Components/Categories'; import { Button } from 'react-bootstrap'; import { AddAllForGame, UpdateAllForGame } from '../Services/Services'; import { useNavigate } from "react-router-dom"; +import useStore from '../Components/useStore'; import '../App.css'; function TriviaReviewPage() { @@ -13,9 +14,12 @@ function TriviaReviewPage() { const { game, page } = location.state; let categories = game.categories; const navigate = useNavigate(); + const updateGame = useStore(state => state.updateGame); + const HandleSaveGame = () => { UpdateAllForGame(game); + updateGame(game) navigate('/myTrivia'); }; @@ -24,6 +28,20 @@ function TriviaReviewPage() { navigate('/myTrivia'); }; + 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) { + current[key] = value + // console.log(current) + // console.log(game) + return + } + } + } + + return (
Trivia Review @@ -32,8 +50,8 @@ function TriviaReviewPage() { {categories.map((cat, index) => (
- - + +
))}
diff --git a/trivia-forge/frontend/src/Services/Services.jsx b/trivia-forge/frontend/src/Services/Services.jsx index df340f8d..cd5010b3 100644 --- a/trivia-forge/frontend/src/Services/Services.jsx +++ b/trivia-forge/frontend/src/Services/Services.jsx @@ -63,13 +63,13 @@ export const AddAllForGame = async (game) => { }; export const UpdateAllForGame = async (game) => { - await db.updateGame(game); + await db.editGame(game); game.categories.forEach(async (category) => { - await db.updateCategory(category); + await db.editCategory(category); category.questions.forEach(async (question) => { - await db.updateQuestion(question); + await db.editQuestion(question); question.choices.forEach(async (choice) => { - await db.updateChoice(choice); + await db.editChoice(choice); }); }); }); diff --git a/trivia-forge/frontend/src/Services/TF-db_services.jsx b/trivia-forge/frontend/src/Services/TF-db_services.jsx index d40c6049..763a5b59 100644 --- a/trivia-forge/frontend/src/Services/TF-db_services.jsx +++ b/trivia-forge/frontend/src/Services/TF-db_services.jsx @@ -120,6 +120,14 @@ export const updateGame = async (game) => { } } +export const editGame = async (game) => { + try { + await axios.patch(`${API_URL}/games/${game.id}`, game); + } catch (error) { + console.error('Failed to edit game'); + } +} + /* ************************************************************************************ */ /* ************************************ Questions ************************************** */ @@ -184,6 +192,15 @@ export const updateQuestion = async (question) => { return []; } } + +export const editQuestion = async (question) => { + try { + await axios.patch(`${API_URL}/questions/${question.id}`, question); + } catch (error) { + console.error('Failed to update question'); + } +} + /* ************************************************************************************ */ /* ************************************ Categories ************************************ */ @@ -245,6 +262,14 @@ export const updateCategory = async (category) => { } } +export const editCategory = async (category) => { + try { + await axios.patch(`${API_URL}/categories/${category.id}`, category); + } catch (error) { + console.error('Failed to edit category'); + } +} + /* ************************************************************************************ */ /* ************************************ Choice ************************************ */ @@ -308,4 +333,12 @@ export const updateChoice = async (choice) => { } } +export const editChoice = async (choice) => { + try { + await axios.patch(`${API_URL}/choices/${choice.id}`, choice); + } catch (error) { + console.error('Failed to update choice'); + } +} + /* ************************************************************************************ */ \ No newline at end of file From def6d1a2b0896665cde3ed3cf7256b0db5130cb3 Mon Sep 17 00:00:00 2001 From: emmanueposu Date: Mon, 27 May 2024 21:11:36 -0700 Subject: [PATCH 2/5] Corrected previous fix for question and category field being blank on review page --- trivia-forge/frontend/src/Components/Categories.jsx | 2 +- trivia-forge/frontend/src/Components/Questions.jsx | 2 +- trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx | 5 +++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/trivia-forge/frontend/src/Components/Categories.jsx b/trivia-forge/frontend/src/Components/Categories.jsx index 913f96d9..49ffba50 100644 --- a/trivia-forge/frontend/src/Components/Categories.jsx +++ b/trivia-forge/frontend/src/Components/Categories.jsx @@ -7,7 +7,7 @@ function Categories({ category, index, changeValue}) { return (
-

{category.title}

+

{category.title || category.name}

{questions.map((question, index) => { return ( diff --git a/trivia-forge/frontend/src/Components/Questions.jsx b/trivia-forge/frontend/src/Components/Questions.jsx index f756e8bf..029d9918 100644 --- a/trivia-forge/frontend/src/Components/Questions.jsx +++ b/trivia-forge/frontend/src/Components/Questions.jsx @@ -22,7 +22,7 @@ function Questions({ data, path, index, changeValue }) {

Question

//Button to generate new question somewhere in here
- +

Choices

{choices.map((choice, index) => { diff --git a/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx b/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx index e0acfe82..caca9c8d 100644 --- a/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx +++ b/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx @@ -15,7 +15,8 @@ function TriviaReviewPage() { let categories = game.categories; const navigate = useNavigate(); const updateGame = useStore(state => state.updateGame); - + + console.log(game) const HandleSaveGame = () => { UpdateAllForGame(game); @@ -51,7 +52,7 @@ function TriviaReviewPage() { {categories.map((cat, index) => (
- +
))} From 3611f42f060d36d85d5dbbcde1d32ee6a54da200 Mon Sep 17 00:00:00 2001 From: emmanueposu Date: Mon, 27 May 2024 22:44:59 -0700 Subject: [PATCH 3/5] Spliced out text from ChatGPT response and updated prompt --- trivia-forge/frontend/src/Pages/TriviaGenPage.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx b/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx index d6f93113..e2f28bae 100644 --- a/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx +++ b/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx @@ -53,7 +53,7 @@ function TriviaGenPage() { for (let i = 0; i < categories.length; i++) { let prompt = `Generate ${numberOfQuestions} trivia questions that have an overall theme of ${Theme} about ${categories[i].name}.`; if (isMultipleChoice) { - prompt += "Each question should be in the format Question:...\nChoice:...\nChoice:...\nChoice:...\nChoice:...\nAnswer:...\nHint:...\n---\nQuestion:... ect. include four multiple-choice options"; + prompt += "Each question should be in the format Question:...\nChoice:...\nChoice:...\nChoice:...\nChoice:...\nAnswer:...\nHint:...\n---\nQuestion:... ect. Do not include A), B), C), or D) in the choices."; } else { prompt += "Each question should be in the format \nQuestion:...\nAnswer:...\n---\nQuestion:... ect."; } @@ -84,7 +84,6 @@ function TriviaGenPage() { console.log("User:", user); let game = new Game(Title, Theme, user.id); console.log("Game:", game); - for (let i = 0; i < categories.length; i++) { let newCategory = new Category(categories[i].name); console.log(newCategory.name); @@ -97,15 +96,15 @@ function TriviaGenPage() { } //loop through sections and create question and choice objects for (let i = 0; i < sections.length; i += 7) { - let question = sections[i]; + let question = sections[i].slice(10); let choices = []; for (let k = 0; k < 4; k++) { let choice = sections[i + k + 1]; - let newChoice = new Choice(choice); + let newChoice = new Choice(choice.slice(8)); choices.push(newChoice); } - let answer = sections[i + 5]; - let hint = sections[i + 6]; + let answer = sections[i + 5].slice(8); + let hint = sections[i + 6].slice(6); //create question object and add it to category let newQuestion = new Question(question, answer, hint, isMultipleChoice); From 5e75d5cf7678c75d4f8373e85c73a17e412aaf60 Mon Sep 17 00:00:00 2001 From: emmanueposu Date: Tue, 28 May 2024 04:02:58 -0700 Subject: [PATCH 4/5] Updated Create New Trivia page ui and added spinner to generate button --- trivia-forge/frontend/src/Components/Nav.jsx | 6 +- .../frontend/src/Pages/TriviaGenPage.jsx | 181 ++++++++++-------- 2 files changed, 102 insertions(+), 85 deletions(-) diff --git a/trivia-forge/frontend/src/Components/Nav.jsx b/trivia-forge/frontend/src/Components/Nav.jsx index b3a40375..b03c0eaf 100644 --- a/trivia-forge/frontend/src/Components/Nav.jsx +++ b/trivia-forge/frontend/src/Components/Nav.jsx @@ -29,14 +29,14 @@ function Navigation() { Create New Trivia My Trivia -