appbaseio / appbaseio/reactivesearch

refactor: SearchBox.js is 2692 lines — extract subcomponents for maintainability

Offen
#2,323 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
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

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.