Timer

[Dzunisan]

User description

• Resolves Create the Storytelling prompts card #19
• Resolves Create the Challenge cards #20
• Resolves Create the unity cards #21
• Resolves Add South African Flag as background #22
• Resolves Create the Diversity questions card #18

---

PR Type

enhancement, tests

---

Description

• Added timer functionality to QuizComponent to limit time per question.
• Integrated ScoreModal component to display quiz results upon completion.
• Updated static data to include a timer property for each question.
• Fixed import paths across multiple components to ensure correct module resolution.

---

Changes walkthrough 📝

	Relevant files
Bug fix	page.tsx Fix import path for QuizComponent                                                components/src/app/cards/[id]/page.tsx Fixed import path for QuizComponent. +1/-1      page.tsx Fix import path and add React import                                          components/src/app/cards/page.tsx Added React import. Fixed import path for QuizCards. +2/-1      page.tsx Fix import path for QuizComponent                                                components/src/app/page.tsx Fixed import path for QuizComponent. +1/-1
Enhancement	QuizCards.tsx Update import order and inline styles                                        components/src/components/QuizCards/QuizCards.tsx Adjusted import order. Updated inline styles for background color. +26/-23  QuizComponent.tsx Add timer and score modal to QuizComponent                              components/src/components/QuizCards/QuizComponent.tsx Added timer functionality for questions. Integrated ScoreModal component. Enhanced question navigation logic. +100/-31 ScoreModal.tsx Create ScoreModal component for quiz results                          components/src/components/QuizCards/ScoreModal.tsx Created ScoreModal component for displaying quiz results. +36/-0    StaticData.ts Add timer property to questions in static data                      components/src/components/QuizCards/StaticData.ts Added timer property to questions in static data. +16/-9    index.ts Export ScoreModal from index                                                          components/src/components/QuizCards/index.ts Exported ScoreModal from index. +1/-0

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[qodo-merge-pro]

PR-Agent was enabled for this repository. To continue using it, please link your git user with your CodiumAI identity here.

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Performance Concern The timer logic using setInterval might cause unnecessary re-renders. Consider using useRef for the timer to optimize performance. Possible Bug The timer doesn't reset when moving to the next question, which might lead to inconsistent time for each question. Code Smell Using window.location.href for navigation is not recommended in Next.js. Consider using the Next.js router instead.

[qodo-merge-pro]

PR-Agent was enabled for this repository. To continue using it, please link your git user with your CodiumAI identity here.

PR Code Suggestions ✨

Category	Suggestion	Score
Best practice	Use Next.js router for client-side navigation instead of directly manipulating window.location Instead of using window.location.href for navigation, consider using Next.js's router.push() method for client-side navigation. components/src/components/QuizCards/ScoreModal.tsx [25-30] +import { useRouter } from 'next/navigation'; + +const router = useRouter(); + +// In the component: <button className="w-full bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600" - onClick={() => window.location.href = '/cards'} + onClick={() => router.push('/cards')} > Go to Cards </button> Apply this suggestion Suggestion importance[1-10]: 9 Why: Using Next.js's router.push() is a best practice for client-side navigation, ensuring smoother transitions and better integration with Next.js features.	9
	Rename function to better reflect its responsibilities and simplify timer handling Consider using a more descriptive name for the handleAnswerCheck function, such as handleOptionSelection, as it does more than just checking the answer. components/src/components/QuizCards/QuizComponent.tsx [78-89] -const handleAnswerCheck = (option: string) => { +const handleOptionSelection = (option: string) => { setSelectedOption(option); setShowAnswer(true); if (option === currentQuestion?.correctAnswer) { setScore((prevScore) => prevScore + 1); } - if (timerRef.current) clearInterval(timerRef.current); - setTimeout(() => { - moveToNextQuestion(); - }, 3000); + stopTimer(); + setTimeout(moveToNextQuestion, 3000); }; Apply this suggestion Suggestion importance[1-10]: 7 Why: The suggested name handleOptionSelection is more descriptive of the function's responsibilities, enhancing code readability and maintainability.	7
Enhancement	Extract timer logic into a custom hook for better code organization and reusability Consider using a custom hook for managing the timer logic. This would improve code organization and reusability. components/src/components/QuizCards/QuizComponent.tsx [41-54] +const { timeLeft, startTimer, stopTimer } = useTimer(30); + useEffect(() => { if (timeLeft === 0) { moveToNextQuestion(); return; } - timerRef.current = setInterval(() => { - setTimeLeft((prevTime) => prevTime - 1); - }, 1000); + startTimer(); return () => { - if (timerRef.current) clearInterval(timerRef.current); + stopTimer(); }; -}, [timeLeft]); +}, [timeLeft, startTimer, stopTimer]); Apply this suggestion Suggestion importance[1-10]: 8 Why: Using a custom hook for the timer logic would improve code organization and reusability, making the component cleaner and easier to maintain.	8
Maintainability	Use a named constant for the delay time in setTimeout for better code readability and maintainability Consider using a constant for the delay time in setTimeout to improve maintainability and readability. components/src/components/QuizCards/QuizComponent.tsx [86-88] -setTimeout(() => { - moveToNextQuestion(); -}, 3000); +const NEXT_QUESTION_DELAY = 3000; +// Later in the code: +setTimeout(moveToNextQuestion, NEXT_QUESTION_DELAY); + Apply this suggestion Suggestion importance[1-10]: 6 Why: Defining a constant for the delay time improves code readability and makes it easier to update the delay duration in the future.	6

💡 Need additional feedback ? start a PR chat