Developer_Quiz_Site icon indicating copy to clipboard operation
Developer_Quiz_Site copied to clipboard

[Refactoring] - move the project code to use react-router-dom

Open shootermv opened this issue 1 year ago • 0 comments

What bug did you find in the codebase?

currently, the views are changed by changing the state... for example - after user pressing the get started button, the isHomePage state changed to false and the quiz-categories component is shown image This logic is totally doing the job, but, in my opinion - this can be much clearer: image we can take the advantage of using react-router-dom tool, and make view-changing logic more simple & clear by mapping different views to specific urls (routes): for example: navigating to url / - will show welcome page /quizzes - will show select quiz category page /quizzes/HTML/questionsNumber - will show select questions number page, for selected HTML quiz /quizzes/HTML/questions/1/to/10 - will show first question of HTML quiz (when it has 10 questions) /quizzes/HTML/results this will make the QuizTemplate component and other comopnents`s code shorter...

also it will make user able to navigate to different parts by changing url in the browser...

i know it will require a lot of changes in different parts in the project, so i guess - the right thing will be to start and change things gradually and check after every step....

it is like gradually replace an old combustion engine with new electric one, while keep the car able to move at each step...

here is a checklist

  • [x] upgrade to latest version of react & react-router-dom
  • [x] try to use router only to show welcome & quiz pages
  • [ ] show select-category by specific route
  • [ ] show quiz
  • [ ] move to next quiz
  • [ ] show results
  • [ ] start change components state to be taken from routeParams

shootermv avatar Jan 06 '24 17:01 shootermv