appbaseio / appbaseio/reactivesearch
refactor: SearchBox.js is 2692 lines — extract subcomponents for maintainability
- Vorherrschende Sprache
- JavaScript
- Sterne
- 4.9k
- Forks
- 478
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
## Problem
`packages/web/src/components/search/SearchBox.js` is **2,692 lines** handling at least 6 distinct responsibilities:
1. Search input management (value, focus, blur, keyboard)
2. Suggestion rendering (8+ types: popular, recent, FAQ, featured, document, index, endpoint, predictive)
3. AI Answer mode (full chat UI with session management)
4. Voice/mic input
5. Image search with camera
6. URL param sync
The render method alone spans hundreds of lines with deeply nested ternaries.
## Suggested Fix
Extract these as additive subcomponents (non-breaking, each can be a separate PR):
1. **`AISection.js`** — The entire AI answer screen (~L1870-1988)
2. **`SuggestionsSection.js`** — All 8 suggestion types rendering (~L1990-2180)
3. **`SearchInput.js`** — The input element with mic, camera, and autofill addons
Each extraction is verifiable by existing snapshot tests since the composite output is unchanged.
## Severity
High — maintainability bottleneck
Beitragsleitfaden
Rechercherichtung
Start by reading packages/web/src/components/search/SearchBox.js and reviewing the existing snapshot tests. Work on one suggested extraction at a time—AISection.js, SuggestionsSection.js, or SearchInput.js—using the indicated responsibilities and line ranges as boundaries. Done means the composite output remains unchanged and the snapshot tests still pass.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react
- Bereich
- frontend, search
- Issue-Typ
- Refactoring
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 55/100