Refactor Frontend Functions to Reduce Nesting and Improve Code Readability

[SidharthxNST]

This PR is to refactor multiple functions in the frontend to reduce excessive nesting and improve code readability, maintainability, and testability. Deeply nested functions can be difficult to understand, debug, and test, so this refactor applies several best practices to streamline the code.

What’s Changed:

1. Reduced nesting depth: Several functions previously with more than 4 levels of nesting have been refactored to reduce complexity.
2. Guard clauses and early returns: Used early returns and guard clauses to handle edge cases and prevent deeply nested if conditions.
3. Extracted complex logic into separate, smaller functions to improve clarity and modularity.
4. Improved maintainability: Simplified logic makes it easier to modify or extend functionality in the future.
5. Improved testability: By breaking down complex logic, we ensure that each piece is easier to unit test in isolation.

for details of changes --->

Key Refactoring Areas:

Keyboard Event Handling:

• The logic for handling keyboard events (Escape, Enter, ArrowDown, ArrowUp) was deeply nested and is now broken into smaller, reusable functions.

Suggestion Handling:

• The logic for selecting, highlighting, and navigating through suggestions has been modularized, making it easier to follow and modify.

• Early Returns:
  Added early returns for edge cases, such as invalid or missing suggestions, to simplify the flow and avoid deep if statements.

Testing:

1. Verified that the refactored code functions as expected by running the existing tests.
2. No new functionality was introduced, so the focus was solely on reducing complexity and improving readability.

Checklist:

• [ ✔] Refactored functions with deep nesting.

• [ ✔] Used early returns and guard clauses to simplify logic.

• [ ✔] Extracted complex logic into smaller functions.

• [ ✔] Ensured no change in functionality (verified by tests).

• [ ✔] I've read and followed the contributing guidelines.

• [ ✔] I've run make check-test locally; all checks and tests passed.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Summary by CodeRabbit

• New Features

  • Added Docker containerization support for both frontend and backend services, enabling streamlined local development setup
  • Improved keyboard navigation in multi-search component with Escape to close, Enter to select, and Arrow keys to navigate suggestions

• Chores

  • Updated project dependencies

Walkthrough

This PR introduces Docker containerization for both frontend and backend services with development and production configurations, plus keyboard navigation enhancements to the MultiSearch component for improved user interaction with arrow keys and escape handling.

Changes

Cohort / File(s)	Change Summary
Docker Compose Configuration docker-compose.yml, backend/docker-compose.yml	Adds frontend service with 3000:3000 port mapping, hot-reload volumes, and polling config; backend service with 5000:5000 port mapping and npm start command.
Frontend Docker Images frontend/Dockerfile, frontend/docker/frontend.Dockerfile	Development Dockerfile with Node.js Alpine and npm dev server; production multi-stage Dockerfile with Next.js standalone build, non-root user, and optimized runner image.
Frontend MultiSearch Component frontend/src/components/MultiSearch.tsx	Implements keyboard navigation with closeSuggestions, selectHighlightedSuggestion, moveHighlightDown/Up helpers; adds switch-case handling for Escape, Enter, ArrowDown, and ArrowUp keys.
Submodule Update welcome-to-docker	Updates submodule commit reference.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Extra attention areas:
  • frontend/docker/frontend.Dockerfile: Verify multi-stage build optimization, non-root user permissions, and handling of SENTRY and release version secrets
  • frontend/src/components/MultiSearch.tsx: Review keyboard navigation logic for edge cases across grouped suggestions and highlight index transitions
  • Docker port mappings and volume mounts: Confirm no conflicts with existing infrastructure

Possibly related PRs

• Optimize frontend docker image  #1323: Modifies frontend Dockerfile with multi-stage optimizations and Next.js standalone output—directly related approach to production image building.

Suggested labels

docker

Suggested reviewers

• arkid15r
• kasya

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d6ca282 and 4a68cff.

📒 Files selected for processing (6)

• backend/docker-compose.yml (1 hunks)
• docker-compose.yml (1 hunks)
• frontend/Dockerfile (1 hunks)
• frontend/docker/frontend.Dockerfile (1 hunks)
• frontend/src/components/MultiSearch.tsx (2 hunks)
• welcome-to-docker (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

The PR must be linked to an issue assigned to the PR author.

[sonarqubecloud]

Quality Gate failed

Failed conditions
3 Security Hotspots

See analysis details on SonarQube Cloud