billychen0894
commented
4 months ago Task 1: Refactor Navigation Related Components
The Navigation related components are the navigation bars for users' to navigate through the app, and they should be catering to responsive web design or be device-friendly (desktop/mobile).
Initially, there were some redundant code and components were CSR instead of SSR. To improve performance and maintainability of the Navigation components, redundant code should be refactored and components should be SSR if there are no client-side interactivity/state involved.
At first, the related Navigation components for mobile view were refactored by using Compound Pattern, which it helps managing shared state in the components 202cb37. However, it was later removed because the current Next.js app router structure is not compatible with this pattern, which it can't send states to its related components by assigning related child components as properties of the parent component c1245fe.
As a solution, the sharing state was implemented by using Context API (built-in React feature) and Context Provider component to wrap around mobile components that need the shared state.
To make the Navigation component to be server-side rendering, the use client declaration at the top of the file is removed. And, the visibility of store navigation and admin navigation are controlled by the user session. If user role is an admin, show admin navigation only, and vice versa 275ecb8
Overview
Implementation Checklist
Navigationrelated componentsRelated Commits
Additional Context: Provide any additional information that could be helpful in understanding the scope and context of the changes. References: Link to any external resources, documentation, or issues that are relevant.
Disclaimer
This issue is used for tracking purposes and to document the progress and improvements made to the project. It will remain open to allow easy access and visibility of the ongoing enhancements/refactoring efforts. Comments in this issue will be updated regularly to reflect progress and any additional improvements.