Refactor Frontend Functions to Reduce Nesting and Improve Code Readability #2487

[SidharthxNST]

#2487

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:
Reduced nesting depth: Several functions previously with more than 4 levels of nesting have been refactored to reduce complexity.
Guard clauses and early returns: Used early returns and guard clauses to handle edge cases and prevent deeply nested if conditions.
Extracted complex logic into separate, smaller functions to improve clarity and modularity.
Improved maintainability: Simplified logic makes it easier to modify or extend functionality in the future.
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:
Verified that the refactored code functions as expected by running the existing tests.
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 local development and production deployments of both frontend and backend services.

• Improvements

  • Enhanced keyboard navigation in search functionality with improved edge case handling and null safety checks.

• Chores

  • Updated submodule reference.

Walkthrough

Adds Docker infrastructure for frontend and backend services with separate compose files and Dockerfiles, including a production-ready multi-stage Next.js build. Also refactors keyboard event handling in MultiSearch component with improved defensive checks and dependency optimization.

Changes

Cohort / File(s)	Summary
Docker Compose Configuration backend/docker-compose.yml, docker-compose.yml	Introduces backend and frontend service definitions with build contexts, port mappings (5000 and 3000 respectively), volume mounts for live development, and startup commands (npm run start, npm run dev). Frontend includes CHOKIDAR_USEPOLLING=true for polling-based file watching.
Frontend Dockerfiles frontend/Dockerfile, frontend/docker/frontend.Dockerfile	Adds two Dockerfile implementations: a simpler Node.js 18 Alpine dev image, and a multi-stage production-ready build using node:22-alpine with pnpm, Sentry secrets integration, non-root user, and Next.js server optimization via node server.js.
Component Refactoring frontend/src/components/MultiSearch.tsx	Extracts four helper functions (closeSuggestions, selectHighlightedSuggestion, moveHighlightDown, moveHighlightUp) from keyboard event handler; replaces if-else chain with switch statement; adds defensive null/undefined checks using optional chaining and nullish coalescing; removes searchQuery from useEffect dependency array.
Submodule Update welcome-to-docker	Updates subproject commit reference metadata.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• frontend/docker/frontend.Dockerfile: Verify multi-stage build logic, Sentry secret handling, and non-root user permissions configuration work correctly in the runtime environment
• frontend/src/components/MultiSearch.tsx: Confirm defensive checks (optional chaining, nullish coalescing) adequately prevent edge-case crashes; validate that searchQuery removal from dependency array doesn't reintroduce stale closure issues
• Docker compose port mappings: Ensure backend service on 5000 and frontend on 3000 don't conflict with existing infrastructure

Possibly related PRs

• Optimize frontend docker image  #1323: Also modifies frontend Docker build to use multi-stage/optimized runner with non-root user and node server.js approach
• Fix NestBot calendar events feature branch merge conflicts #2230: Modifies frontend Dockerfile and related Docker build configuration for frontend service setup
• Docker base image migration  #1269: Updates Docker build artifacts using Alpine-based images and related Docker compose configurations

Suggested labels

docker, frontend

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