Refactor Frontend Functions to Reduce Nesting and Improve Code Readability

[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:

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 more details of changes --->https://jelly-stay-05e.notion.site/ISSUE-2487-2a38d0f2b71c80798c3dc97ec5d4a94a?source=copy_link

Key Refactoring Areas:

1. Keyboard Event Handling:

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

2. Suggestion Handling:

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

3. 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

  • Application infrastructure now supports Docker containerization with separate backend and frontend service configurations, enabling simplified local development and production deployment workflows.

• Refactor

  • Enhanced keyboard navigation logic in the search component with improved state management and refined interaction patterns for suggestion traversal.

• Chores

  • Updated submodule references.

Walkthrough

This PR introduces Docker containerization for the project by adding docker-compose configurations and Dockerfile definitions for both backend and frontend services, alongside a refactoring of keyboard navigation logic in the MultiSearch component and a submodule reference update.

Changes

Cohort / File(s)	Summary
Docker Compose Services backend/docker-compose.yml, docker-compose.yml	Adds service definitions for backend and frontend; backend service exposes port 5000 with npm start, frontend exposes port 3000 with npm run dev and CHOKIDAR_USEPOLLING environment variable. Both mount local directories and node_modules volumes.
Frontend Docker Images frontend/Dockerfile, frontend/docker/frontend.Dockerfile	Introduces two Dockerfiles: a simple image using node:18-alpine with basic npm setup, and a multi-stage production image with base/builder/runner stages using pnpm, Next.js build optimization, non-root user, and node server.js execution.
MultiSearch Component Logic frontend/src/components/MultiSearch.tsx	Refactors keyboard navigation by extracting helper functions (closeSuggestions, selectHighlightedSuggestion, moveHighlightDown/Up) into useEffect and replacing inline key handling with switch-case delegation; dependency array updated.
Submodule Reference welcome-to-docker	Updates submodule commit reference.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• frontend/docker/frontend.Dockerfile: Multi-stage Dockerfile with pnpm/Next.js configuration, non-root user setup, and cache optimizations requires verification of security practices and build correctness
• frontend/src/components/MultiSearch.tsx: Keyboard navigation refactoring needs validation that arrow key wrapping, boundary conditions, and suggestion selection edge cases function correctly
• Docker compose configurations: Port mappings, volume mounts, and environment variable settings should be verified for consistency with intended deployment

Possibly related PRs

• Docker base image migration  #1269: Modifies Docker configuration across multiple frontend and backend files with similar containerization patterns
• Optimize frontend docker image  #1323: Updates frontend multi-stage Dockerfile with comparable base/builder/runner stages and pnpm/Next.js setup
• Fix NestBot calendar events feature branch merge conflicts #2230: Modifies frontend Docker build files with related frontend Dockerfile and docker directory changes

Suggested labels

frontend, docker, backend

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