add query params to page companies #77
Conversation
WalkthroughThe changes synchronize the companies page's internal state with URL query parameters, ensuring pagination and search state are reflected in the URL. The pagination component now accepts a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CompaniesPageComponent
participant PaginationButtonsComponent
participant Router
User->>CompaniesPageComponent: Loads page or interacts (search/paginate)
CompaniesPageComponent->>Router: Reads query params on init
Router-->>CompaniesPageComponent: Provides currentPage, searchQuery
CompaniesPageComponent->>CompaniesPageComponent: Sets state from URL
CompaniesPageComponent->>PaginationButtonsComponent: Passes [currentPage]
User->>PaginationButtonsComponent: Clicks next/prev/page
PaginationButtonsComponent->>CompaniesPageComponent: Emits page change
CompaniesPageComponent->>CompaniesPageComponent: loadData(page, updateUrl)
CompaniesPageComponent->>Router: Optionally updates URL params
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/app/modules/companies/components/companies-page/companies-page.component.ts (2)
34-38: Effective query parameter synchronization on initialization.The component now properly subscribes to route query parameters and initializes its state from the URL, making it possible to bookmark or share specific search results and pages.
Consider adding validation to ensure the page number is always positive:
- this.currentPage = params['page'] ? Number(params['page']) : 1; + this.currentPage = params['page'] ? Math.max(1, Number(params['page'])) : 1;
101-113: Well-implemented URL parameter update logic.The
updateUrlParamsmethod effectively centralizes the URL update logic and correctly handles:
- Setting the page parameter
- Conditionally adding the search parameter only when it's meaningful
- Merging with existing parameters
Consider checking if the URL parameters have actually changed before navigating to avoid unnecessary history entries:
private updateUrlParams(page: number): void { const queryParams: any = { page }; if (this.searchQuery && this.searchQuery.length >= 3) { queryParams.search = this.searchQuery; } + // Check if current params are the same to avoid unnecessary navigation + const currentParams = this.route.snapshot.queryParams; + if (currentParams.page === page.toString() && + ((currentParams.search === this.searchQuery) || + (!currentParams.search && (!this.searchQuery || this.searchQuery.length < 3)))) { + return; + } this.router.navigate([], { relativeTo: this.route, queryParams, queryParamsHandling: 'merge', }); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/modules/companies/components/companies-page/companies-page.component.html(1 hunks)src/app/modules/companies/components/companies-page/companies-page.component.ts(5 hunks)src/app/shared/components/pagination-buttons/pagination-buttons.component.ts(4 hunks)
🔇 Additional comments (9)
src/app/modules/companies/components/companies-page/companies-page.component.html (1)
88-88: Effective binding of current page state.The addition of
[currentPage]="currentPage"binding is a well-implemented change that synchronizes the pagination component with the parent component's state, which is now derived from URL parameters.src/app/shared/components/pagination-buttons/pagination-buttons.component.ts (4)
13-14: Good implementation of optional input property.The new
currentPageinput property enhances the component's flexibility by allowing external control of pagination state while maintaining backward compatibility withnullas the default value.
23-23: Consistent fallback pattern for current page.The implementation consistently uses the pattern
this.currentPage || (this.source ? this.source.currentPage : 1)across all methods. This ensures proper fallback behavior when the input is not provided.Also applies to: 31-31, 85-85, 92-92, 113-114
46-46: Properly handling current page in initialization.The component correctly initializes by prioritizing the externally provided
currentPageover the internal source's value.
64-64: Ensure consistency in condition check.The condition check for
current <= 3properly uses the external current page value. This ensures that pagination buttons are displayed correctly regardless of the source of the current page value.src/app/modules/companies/components/companies-page/companies-page.component.ts (4)
2-2: Correctly imported and injected ActivatedRoute.The necessary imports and constructor dependency injection for
ActivatedRoutehave been properly added.Also applies to: 27-27
48-48: Search now updates URL parameters.The search function has been properly modified to update URL parameters instead of directly loading data, which helps maintain the URL state in sync with the UI.
69-75: Properly handling query parameter reset.The
clearSearch()method now correctly clears the query parameters and reloads data without updating the URL again to avoid circular updates.
78-86: Added flexibility in loadData with updateUrl parameter.The
loadDatamethod has been enhanced with an optional parameter to control URL updates, preventing circular updates when data is loaded from URL parameters.
2 participants
Summary by CodeRabbit
New Features
Bug Fixes