fix back button and fix dublicate request

[Keksonoid]

Summary by CodeRabbit

• New Features
  • Improved navigation experience when returning to the companies list, preserving the previous page and search query.
• Enhancements
  • Pagination buttons now update reactively when input data changes.
  • Back navigation on the company page now uses a styled button with explicit click handling.
• Bug Fixes
  • Addressed issues with redundant or cyclic updates when synchronizing component state and URL query parameters.

[coderabbitai]

Walkthrough

This update introduces mechanisms to prevent redundant or cyclic URL query parameter updates in the companies module, refines navigation state handling between the company list and detail pages, and improves the reactivity of pagination buttons. The changes include new flags, navigation state management, and lifecycle hooks for better synchronization and user experience.

Changes

File(s)	Change Summary
src/app/modules/companies/components/companies-page/companies-page.component.ts	Added a flag to control query param updates, refactored search/clear logic, improved state-URL sync, and enhanced navigation state.
src/app/modules/companies/components/company-page/company-page.component.html	Replaced custom back button component with a native button triggering a new back navigation handler.
src/app/modules/companies/components/company-page/company-page.component.ts	Added logic to store navigation state (page/search), and a method to navigate back to the list using this state.
src/app/shared/components/pagination-buttons/pagination-buttons.component.ts	Implemented OnChanges lifecycle, added a method to recalculate pages on input changes for reactive pagination updates.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CompaniesPage
    participant Router
    participant CompanyPage

    User->>CompaniesPage: Triggers search/clear/page navigation
    CompaniesPage->>CompaniesPage: Sets skipNextQueryParamsUpdate flag
    CompaniesPage->>Router: Updates URL query params (if needed)
    Router->>CompaniesPage: Emits queryParams change
    CompaniesPage->>CompaniesPage: Skips redundant update if flag set

    User->>CompaniesPage: Navigates to company detail
    CompaniesPage->>Router: Navigates with state (page, search)
    Router->>CompanyPage: Loads company detail with state
    User->>CompanyPage: Clicks 'Back to list'
    CompanyPage->>Router: Navigates back to list with stored state
    Router->>CompaniesPage: Loads list with correct page/search

Loading

Possibly related PRs

• add query params to page companies #77: Introduced synchronization of component state with URL query parameters in CompaniesPageComponent, which is directly extended and refined by this PR.

Suggested reviewers

• maximgorbatyuk

Poem

In the warren of code, we hop and we leap,
Syncing state and URLs—no loops to keep!
With buttons that paginate and back we go,
Navigation’s a breeze, as the queries now flow.
🐇✨

Hoppy coding, friends—onward we grow!

Tip

⚡️ Faster reviews with caching

• CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.

Enjoy the performance boost—your workflow just got faster.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8ffaff4 and 27eb2e7.

📒 Files selected for processing (4)

• src/app/modules/companies/components/companies-page/companies-page.component.ts (5 hunks)
• src/app/modules/companies/components/company-page/company-page.component.html (1 hunks)
• src/app/modules/companies/components/company-page/company-page.component.ts (3 hunks)
• src/app/shared/components/pagination-buttons/pagination-buttons.component.ts (2 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

src/app/shared/components/pagination-buttons/pagination-buttons.component.ts (1)

src/app/modules/admin/components/salaries/salaries-not-in-stat-admin-page/salaries-not-in-stat-admin-page.component.ts (1)

• Component (16-105)

🔇 Additional comments (17)

src/app/shared/components/pagination-buttons/pagination-buttons.component.ts (5)

1-1: Properly added OnChanges interface import

The import statement has been correctly updated to include OnChanges interface for implementing lifecycle hook.

---

9-9: Implemented OnChanges interface

The component now correctly implements OnChanges interface alongside OnInit, which will help with reactivity to input changes.

---

39-41: Refactored page generation in ngOnInit

The pagination logic has been properly extracted to a separate method and is now called during initialization.

---

43-47: Added ngOnChanges lifecycle hook

Great addition of ngOnChanges to detect and react to changes in source or currentPage inputs. This ensures the pagination buttons update reactively when data changes, fixing an issue where the component wouldn't update after initialization.

---

49-92: Extracted pagination logic to separate method

Good refactoring to extract the page generation logic into a dedicated method. This improves maintainability and allows for reuse in multiple lifecycle hooks.

src/app/modules/companies/components/company-page/company-page.component.html (1)

46-52: Replaced go-back button with custom implementation

The custom button implementation with click handler properly connects to the new goBackToList() method. This change allows for preserving pagination state when returning to the companies list.

src/app/modules/companies/components/company-page/company-page.component.ts (3)

23-24: Added properties to store navigation state

These private properties appropriately store the previous navigation state (page number and search query) to enable returning to the correct position in the companies list.

---

36-40: Added navigation state extraction

Good implementation of navigation state extraction from the router. This captures the page and search parameters passed during navigation to the company detail page.

---

74-86: Implemented goBackToList method

This new method properly handles back navigation with preserved state. It correctly builds query parameters using the stored previousPage and previousSearchQuery values, maintaining the user's context when returning to the list.

src/app/modules/companies/components/companies-page/companies-page.component.ts (8)

22-22: Added flag to prevent redundant updates

Good addition of a flag to prevent cyclic URL parameter updates. This will help avoid duplicate requests when programmatically updating URL parameters.

---

36-39: Added check to prevent redundant query param processing

This check properly uses the skipNextQueryParamsUpdate flag to prevent processing query parameter changes that were triggered internally. This breaks the potential infinite loop of updates.

---

54-55: Improved search method

The search method now correctly resets currentPage to 1 when performing a new search and calls loadData with the updated page number and a flag to update URL parameters.

---

77-77: Added flag setting before navigation

Setting skipNextQueryParamsUpdate before navigation prevents redundant processing when clearing search, avoiding unnecessary data reloads.

---

83-83: Reset currentPage on clear search

Good addition to reset currentPage to 1 when clearing the search, ensuring the user starts from the first page with the new (empty) search results.

---

90-90: Updated currentPage in loadData

Ensures the currentPage property is always synchronized with the page being loaded, maintaining consistency in the component's state.

---

93-93: Set skip flag before URL update

Properly sets the skipNextQueryParamsUpdate flag before updating URL parameters to prevent redundant processing of the resulting navigation event.

---

125-134: Improved company navigation with state

Great enhancement to pass navigation state (current page and search query) when navigating to company details. This enables the back button functionality to return to the correct page and search results.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.