From 6cdf5ff83e845e1dd30d150e96aece98bedfb232 Mon Sep 17 00:00:00 2001 From: Justin Date: Sun, 19 May 2024 15:19:00 -0700 Subject: [PATCH] made my trivia page load quicker --- trivia-forge/frontend/package-lock.json | 52 +++++++++++++++++- trivia-forge/frontend/package.json | 3 +- .../src/Components/GameCategories.jsx | 15 +++-- .../frontend/src/Components/GameQuestions.jsx | 55 +++++++++++-------- .../frontend/src/Components/Questions.jsx | 8 +++ trivia-forge/frontend/src/Models/State.jsx | 29 ++++++++++ trivia-forge/frontend/src/Pages/MyTrivia.jsx | 48 +++++++++------- .../frontend/src/Services/TF-db_services.jsx | 20 +++++-- 8 files changed, 174 insertions(+), 56 deletions(-) create mode 100644 trivia-forge/frontend/src/Models/State.jsx diff --git a/trivia-forge/frontend/package-lock.json b/trivia-forge/frontend/package-lock.json index 6d389c95..da7715c2 100644 --- a/trivia-forge/frontend/package-lock.json +++ b/trivia-forge/frontend/package-lock.json @@ -16,7 +16,8 @@ "react-bootstrap": "^2.10.2", "react-dom": "^18.2.0", "react-icons": "^5.1.0", - "react-router-dom": "^6.22.3" + "react-router-dom": "^6.22.3", + "zustand": "^4.5.2" }, "devDependencies": { "@types/react": "^18.2.66", @@ -4626,6 +4627,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/vite": { "version": "5.2.9", "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.9.tgz", @@ -4828,6 +4837,33 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz", + "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==", + "dependencies": { + "use-sync-external-store": "1.2.0" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "@types/react": ">=16.8", + "immer": ">=9.0.6", + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + } + } } }, "dependencies": { @@ -7976,6 +8012,12 @@ "punycode": "^2.1.0" } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "requires": {} + }, "vite": { "version": "5.2.9", "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.9.tgz", @@ -8099,6 +8141,14 @@ "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", "dev": true + }, + "zustand": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz", + "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==", + "requires": { + "use-sync-external-store": "1.2.0" + } } } } diff --git a/trivia-forge/frontend/package.json b/trivia-forge/frontend/package.json index 6ea5e672..6c4e26b9 100644 --- a/trivia-forge/frontend/package.json +++ b/trivia-forge/frontend/package.json @@ -18,7 +18,8 @@ "react-bootstrap": "^2.10.2", "react-dom": "^18.2.0", "react-icons": "^5.1.0", - "react-router-dom": "^6.22.3" + "react-router-dom": "^6.22.3", + "zustand": "^4.5.2" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/trivia-forge/frontend/src/Components/GameCategories.jsx b/trivia-forge/frontend/src/Components/GameCategories.jsx index 7c710021..0ba387d3 100644 --- a/trivia-forge/frontend/src/Components/GameCategories.jsx +++ b/trivia-forge/frontend/src/Components/GameCategories.jsx @@ -2,13 +2,16 @@ import { React, useState, useEffect } from "react"; import { getCategories } from "../Services/TF-db_services"; function GameCategories(game) { - const [categories, setCategories] = useState(null); + //const [categories, setCategories] = useState(null); + const categories = game.data.categories; - useEffect(() => { - getCategories(game.data).then( res => { - setCategories(res); - }); - }, []); + + + // useEffect(() => { + // getCategories(game.data).then(res => { + // setCategories(res); + // }); + // }, []); return ( <> diff --git a/trivia-forge/frontend/src/Components/GameQuestions.jsx b/trivia-forge/frontend/src/Components/GameQuestions.jsx index 17f92ba1..d9794321 100644 --- a/trivia-forge/frontend/src/Components/GameQuestions.jsx +++ b/trivia-forge/frontend/src/Components/GameQuestions.jsx @@ -2,34 +2,41 @@ 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 category_ids = new Set(); - for (let i = 0; i < categories.length; i++) { - category_ids.add(categories[i].id) - }; - - getQuestions(category_ids).then( res => { - setQuestions(res); - }); + //const [categories, setCategories] = useState(null); + //const [questions, setQuestions] = useState(null); + let categories = game.data.categories; + function questionCount() { + let count = 0; + for (let i = 0; i < categories.length; i++) { + count += categories[i].questions.length; } - }, [categories]); + return count; + }; + + // useEffect(() => { + // getCategories(game.data).then( res => { + // setCategories(res); + // }); + // }, []); + + // useEffect(() => { + // if (categories) { + // const category_ids = new Set(); + // for (let i = 0; i < categories.length; i++) { + // category_ids.add(categories[i].id) + // }; + + // getQuestions(category_ids).then( res => { + // setQuestions(res); + // }); + // } + // }, [categories]); return ( <> - {questions && ( - {questions.length} - )} + + {questionCount()} + ) } diff --git a/trivia-forge/frontend/src/Components/Questions.jsx b/trivia-forge/frontend/src/Components/Questions.jsx index 014e8da3..0aac5e98 100644 --- a/trivia-forge/frontend/src/Components/Questions.jsx +++ b/trivia-forge/frontend/src/Components/Questions.jsx @@ -3,6 +3,13 @@ import Choices from "../Components/Choices"; import { Card } from "react-bootstrap"; import { Question } from "../Models/Question"; +//logic for button to generate new question +// +// +// +// + + function Questions({ data }) { let choices = data.choices; @@ -10,6 +17,7 @@ function Questions({ data }) {

Question

+ //Button to generate new question somewhere in here
diff --git a/trivia-forge/frontend/src/Models/State.jsx b/trivia-forge/frontend/src/Models/State.jsx new file mode 100644 index 00000000..675bd747 --- /dev/null +++ b/trivia-forge/frontend/src/Models/State.jsx @@ -0,0 +1,29 @@ +import { create } from 'zustand'; + +const useStore = create((set) => ({ + currentUser: null, + userGames: [], + currentGame: null, + + setCurrentUser: (user) => set({ currentUser: user }), + setUserGames: (games) => set({ userGames: games }), + setCurrentGame: (game) => set({ currentGame: game }), + + addGame: (game) => set((state) => ({ + userGames: [...state.userGames, game], + })), + updateGame: (game) => set((state) => ({ + userGames: state.userGames.map((g) => { + if (g.id === game.id) { + return game; + } + return g; + }), + })), + deleteGame: (game) => set((state) => ({ + userGames: state.userGames.filter((g) => g.id !== game.id), + })), +})); + + +export default useStore; \ No newline at end of file diff --git a/trivia-forge/frontend/src/Pages/MyTrivia.jsx b/trivia-forge/frontend/src/Pages/MyTrivia.jsx index 9b049622..474c3172 100644 --- a/trivia-forge/frontend/src/Pages/MyTrivia.jsx +++ b/trivia-forge/frontend/src/Pages/MyTrivia.jsx @@ -1,5 +1,5 @@ import { React, useState, useEffect } from "react"; -import { getGames } from "../Services/TF-db_services"; +import { getGames, getGamesWithDetails } from "../Services/TF-db_services"; import Card from 'react-bootstrap/Card'; import Col from 'react-bootstrap/Col'; import Row from 'react-bootstrap/Row'; @@ -8,20 +8,30 @@ import GameCategories from "../Components/GameCategories"; import GameQuestions from "../Components/GameQuestions"; import Slideshow from "../Components/Slideshow"; import Modal from 'react-bootstrap/Modal'; +import { useNavigate } from "react-router-dom"; function MyTrivia() { const [games, setGames] = useState(null); const [show, setShow] = useState(false); const [currentGame, setCurrentGame] = useState(null) + const [games_with_details, setGamesWithDetails] = useState(null); + const navigate = useNavigate(); useEffect(() => { - getGames().then( res => { + getGames().then(res => { setGames(res); }); }, []); useEffect(() => { - if(currentGame) { + getGamesWithDetails().then(res => { + setGamesWithDetails(res); + }); + }, [games_with_details]); + console.log(games_with_details); + + useEffect(() => { + if (currentGame) { setShow(true); } }, [currentGame]); @@ -36,42 +46,42 @@ function MyTrivia() { } return ( - <> + <> My Trivia - {games &&( - games.length > 0 ? ( + {games_with_details && ( + games_with_details.length > 0 ? ( - {games.map((game, index) => ( + {games_with_details.map((game, index) => ( - + {game.title} Categories: - + Questions: - +
- +
- - - ))} + + + ))} - ) : ( -

No games to display.

+ ) : ( +

No games to display.

) )} - + - - + + diff --git a/trivia-forge/frontend/src/Services/TF-db_services.jsx b/trivia-forge/frontend/src/Services/TF-db_services.jsx index 83f81220..873bcbeb 100644 --- a/trivia-forge/frontend/src/Services/TF-db_services.jsx +++ b/trivia-forge/frontend/src/Services/TF-db_services.jsx @@ -5,10 +5,6 @@ import { Question } from '../Models/Question'; import { Category } from '../Models/Category'; import { Choice } from '../Models/Choice'; -<<<<<<<< < Temporary merge branch 1 - -const API_URL = 'http://localhost:5000'; -========= const API_URL = 'http://127.0.0.1:5000'; /* ************************************ User ************************************ */ @@ -68,6 +64,16 @@ export const getGames = async () => { } } +export const getGamesWithDetails = async () => { + try { + const response = await axios.get(`${API_URL}/games/games_with_details`); + return response.data; + } catch (error) { + console.error('Failed to fetch games with details'); + return []; + } +} + export const getGame = async (game) => { try { const response = await axios.get(`${API_URL}/games/${game.id}`); @@ -240,10 +246,14 @@ export const updateCategory = async (category) => { /* ************************************ Choice ************************************ */ export const getChoices = async (questions) => { + console.log("questions:", questions) try { const response = await axios.get(`${API_URL}/choices`); + console.log("response.data:", response.data) for (let i = 0; i < response.data.length; i++) { - questions[response.data[i].question_id]['choices'].push(response.data[i].text); + if (questions[response.data[i].question_id] !== undefined) { + questions[response.data[i].question_id]['choices'].push(response.data[i].text); + } } return questions; } catch (error) {