Enhance Quiz Form Functionality and Validation

[martin-markovic]

Summary

This pull request enhances the quiz management functionality by implementing robust form handling and validation, including toggling form visibility, quiz creation and updating, and managing form state and navigation.

Changes

1. Component Updates

   • Updated Quizzes.jsx to toggle form visibility and handle quiz editing.
   • Added functionality to QuizForm.jsx for creating and updating quizzes.
   • Passed quiz data to QuizForm.jsx for editing purposes.
   • Implemented onClose callback to manage form visibility from QuizForm.jsx.
   • Implemented navigation to /quizzes and home in Header.jsx.

2. Schema Validation

   • Implemented questionSchema to validate related fields.
   • Integrated questionSchema in quizSchema.
   • Implemented title and timeLimit fields validation in quizSchema.

3. Controller and State Management

   • Refactored createQuiz validation and response based on the relevant fields in quizController.js.
   • Refactored initial state to initialQuestionState and initialQuizState to separate state management concerns.
   • Implemented new state for handling question index.
   • Initialized state in useEffect based on the redux state of quizzes.
   • Refactored handleChange to manage input fields based on the name property.

4. Form Handling and Validation

   • Implemented conditional input field value rendering to avoid null state.
   • Implemented robust quiz form validation and error handling in the handleSubmit function.
   • Implemented handleCreateQuestion function to validate relevant fields, handle errors, and manage component state on question creation.
   • Implemented handleBack and handleNext functions to navigate through created questions.
   • Implemented conditional rendering of HTML elements and attached respective handler functions.
   • Added isLoading state and HTML element for clarity in Quizzes.jsx.

Testing

• Verified toggling form visibility and handling quiz editing in Quizzes.jsx.
• Confirmed the creation and updating functionalities in QuizForm.jsx.
• Tested passing quiz data to QuizForm.jsx for editing purposes.
• Validated the onClose callback for form visibility management in QuizForm.jsx.
• Ensured navigation to /quizzes and home in Header.jsx.
• Confirmed validation of related fields in questionSchema and integration in quizSchema.
• Verified title and timeLimit fields validation in quizSchema.
• Tested createQuiz validation and response refactor in quizController.js.
• Validated initial state refactoring and new state for handling question index.
• Confirmed state initialization in useEffect based on redux state of quizzes.
• Verified input field management and conditional rendering in handleChange.
• Tested robust form validation and error handling in the handleSubmit function.
• Verified handleCreateQuestion functionality for field validation, error handling, and state management.
• Confirmed handleBack and handleNext functions for question navigation.
• Validated conditional rendering of HTML elements and handler functions.
• Tested isLoading state and HTML element clarity in Quizzes.jsx.

Additional Information

• These changes significantly enhance the quiz management functionality by implementing robust form handling, validation, and state management.
• The improvements ensure better user experience and error handling during quiz creation and editing.