lukas.pupkalipinski/BanGUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Decompose ConfigPage into focused routing and component layers

Browse Source 
Split the over-centralized ConfigPage into focused, composable layers:

1. useTabRouter hook: Encapsulates tab state management and URL synchronization
   - Maintains selected tab and active item (e.g., jail name)
   - Syncs state to location.state for deep linking and browser history
   - Supports bookmarkable URLs and back/forward navigation

2. ConfigPageContainer: Orchestrates tab navigation
   - Manages TabList and routes tab selection events
   - Conditionally renders tab content panels
   - Delegates domain-specific logic to tab components

3. ConfigPage: Focused page layout component
   - Renders page structure (header, title, description)
   - Delegates tab orchestration to ConfigPageContainer
   - No routing or tab state logic

Benefits:
- Page is now 30 lines vs 125 lines (76% reduction)
- Tab state management is reusable for other multi-tab pages
- Each tab component remains focused on domain-specific UI
- Deep linking and browser history work out of the box
- Easier to test and maintain

Added comprehensive tests:
- useTabRouter: 6 tests covering state initialization, tab selection, and deep linking
- ConfigPageContainer: 8 tests covering tab rendering and navigation
- ConfigPage: 3 tests for page structure

Updated Web-Development.md with tab orchestration pattern documentation.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Lukas
2026-04-28 08:27:36 +02:00
parent 69a5f0ceb1
commit 42beb9cf3b
9 changed files with 457 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
Docs/Tasks.md
View File

@@ -1,23 +1,3 @@
## 12) Prop drilling in jail overview page
- Where found:
- [frontend/src/pages/jails/JailOverviewSection.tsx](frontend/src/pages/jails/JailOverviewSection.tsx)
- [frontend/src/pages/JailsPage.tsx](frontend/src/pages/JailsPage.tsx)
- Why this is needed:
- Large prop chains increase coupling and refactor cost.
- Goal:
- Move jail state/actions into dedicated context or controller hook.
- What to do:
- Introduce JailContext (or equivalent local state container).
- Remove multi-hop prop forwarding.
- Possible traps and issues:
- Context overuse can trigger broad rerenders if not split.
- Docs changes needed:
- Add frontend state ownership notes.
- Doc references:
- [Docs/Web-Development.md](Docs/Web-Development.md)
---
## 13) Config page is over-centralized
- Where found:
- [frontend/src/pages/ConfigPage.tsx](frontend/src/pages/ConfigPage.tsx)