refactor: SearchBox.js is 2692 lines — extract subcomponents for maintainability
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 55/100
- Issue type
- Refactor
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- javascript, react
Research direction
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.
Written by the indexing model from the issue text.
Description
Problem
packages/web/src/components/search/SearchBox.js is 2,692 lines handling at least 6 distinct responsibilities:
- Search input management (value, focus, blur, keyboard)
- Suggestion rendering (8+ types: popular, recent, FAQ, featured, document, index, endpoint, predictive)
- AI Answer mode (full chat UI with session management)
- Voice/mic input
- Image search with camera
- 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):
AISection.js— The entire AI answer screen (~L1870-1988)SuggestionsSection.js— All 8 suggestion types rendering (~L1990-2180)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
- Dominant language
- JavaScript
- Stars
- 4.9k
- Forks
- 477
- PR merge metrics
- No merged PRs in 30d
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from appbaseio/reactivesearch
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
appbaseio/reactivesearch#2322 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
appbaseio/reactivesearch#2321 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
appbaseio/reactivesearch#2319 ·
-
Difficulty 4/5 3-5 days Newbie friendliness 48/100
appbaseio/reactivesearch#2324 ·
-
Difficulty 4/5 3-5 days Newbie friendliness 55/100
appbaseio/reactivesearch#2320 ·
All issues in appbaseio/reactivesearch
Similar issues
-
bug
Difficulty 1/5 Under an hour Newbie friendliness 90/100
apache/cloudstack#14222 ·
-
Browser Waiting for: Product Owner
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
getsentry/sentry-javascript#24577 · 1 comment ·
-
curation good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
amponce/archive-movie-browser#186 ·
-
light
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
aemdemos/patients-stryker#253 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
clerk/javascript#9852 ·