Design system/question layout

[mewdev]

Comment updated on 6.1.2024

questionsPage.mov

General Overview

Working question page sketch created based on the current live version. See video above of testing the functionality.

Refactor:

Guide:

• Improve/refine design (currently fast mockup)
• Solve navod => navod/1 redirect (middleware?)
• Fix next shallow error
• Fix all ESLint, React, Next.js errors!
• Abstract container from questions ?
• Dynamic data bind based on the fetched data

Video preview:
https://github.com/user-attachments/assets/efe8e325-d118-4ba3-a971-73a2a6debc28

Questions:

• Improve/refine design (currently fast mockup)
• Bottom bar positioning
• Questions card/container positioning (np).
• Solve / => /1 redirect (middleware?)
• Consult shallow routing approach
• Fix next shallow error
• Buttons width fix (low level components refactor)
• Buttons css fixes (low level components refactor)
• Abstract container to guide ?
• Fix all ESLint, React, Next.js errors!

2.questionPage_questions.mp4

Recapitulation:

• Improve/refine design (currently fast mockup)
• Button toggle swap with conditional styling
• Výsledky button action implement

3.questionPage_recapitulation.mp4

Results page:

• Make mockup page
• Add conditional visibility (warning message if data empty)

Zustand:

• Code cleanup (fix repetitive code)
• General feedback from Martin

General:

• Url update in tab
• questions data state behaviour
• re-design paths ( + make them dynamic based on the fetched data ? )
• handleClick ⇒ separate functions like handleNext(), handleGuide(), etc.
• useEffect() cleanups.
• Get rid of unnecessary states (probably "questions") and refactor dependent code if needed.
• Layout KalkulackaInitializer wrapper error fix

General todos:

• Continue refactoring all low level components if needed
• Error handling with react-error-boundary package + fallback UI.
• Zustand implementation
• sketch Dynamic pathname URL based on the data.
• Dynamic pathname URL based on the data.
• Implement more info toggle into questionCard + bind data.
• Consider loading UI if needed.
• dynamic data from api (guide) as well as fix for no hardcode api fetch
• Fix all ESLint, React, Next.js errors!
• Types cleanup
• Fn syntax cleanup
• make storybook components

Consult Coding Approach:

• url updating too slow when answering fast comparing to the live version , needs different solution?
• questions data state behavior (see table)
• Fn syntax cleanup
• Shallow routing approach
• Answer button highlight color when answered (toggle with state vs only CSS dynamic styling).
• Layout question container component? (Guide and questions have the same layout).
• Error handling with react-error-boundary package + fallback UI.