add query params to page companies

src/app/modules/companies/components/companies-page/companies-page.component.html

@@ -85,6 +85,7 @@
       <div class="mt-5" *ngIf="source && source.results.length > 0">
         <app-pagination-buttons
           [source]="source"
+          [currentPage]="currentPage"
           (pageChange)="loadData($event)"
         ></app-pagination-buttons>
       </div>

src/app/modules/companies/components/companies-page/companies-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
-import { Router } from "@angular/router";
+import { Router, ActivatedRoute } from "@angular/router";
 import { Company } from "@models/companies.model";
 import { defaultPageParams, PageParams } from "@models/page-params";
 import { PaginatedList } from "@models/paginated-list";
@@ -24,13 +24,18 @@ export class CompaniesPageComponent implements OnInit, OnDestroy {
     private readonly service: CompaniesService,
     private readonly title: TitleService,
     private readonly router: Router,
+    private readonly route: ActivatedRoute,
     private readonly gtag: GoogleAnalyticsService,
   ) {
     this.title.setTitle("Отзывы к IT компаниям");
   }
 
   ngOnInit(): void {
-    this.loadData(1);
+    this.route.queryParams.pipe(untilDestroyed(this)).subscribe(params => {
+      this.currentPage = params['page'] ? Number(params['page']) : 1;
+      this.searchQuery = params['search'] || '';
+      this.loadData(this.currentPage, false);
+    });
   }
 
   search(): void {
@@ -40,7 +45,7 @@ export class CompaniesPageComponent implements OnInit, OnDestroy {
         "company_reviews",
         this.searchQuery,
       );
-      this.loadData(1);
+      this.updateUrlParams(1);
     }
   }
 
@@ -61,13 +66,24 @@ export class CompaniesPageComponent implements OnInit, OnDestroy {
       "company_reviews",
       this.searchQuery,
     );
-    this.loadData(1);
+
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: {},
+    });
+
+    this.loadData(1, false);
   }
 
-  loadData(pageToLoad: number): void {
+  loadData(pageToLoad: number, updateUrl: boolean = true): void {
     this.companies = null;
     this.source = null;
-    this.currentPage = pageToLoad;
+
+    if (updateUrl) {
+      this.updateUrlParams(pageToLoad);
+    } else {
+      this.currentPage = pageToLoad;
+    }
 
     this.service
       .all({
@@ -82,6 +98,20 @@ export class CompaniesPageComponent implements OnInit, OnDestroy {
       });
   }
 
+  private updateUrlParams(page: number): void {
+    const queryParams: any = { page };
+
+    if (this.searchQuery && this.searchQuery.length >= 3) {
+      queryParams.search = this.searchQuery;
+    }
+
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams,
+      queryParamsHandling: 'merge',
+    });
+  }
+
   navigateToCompany(id: string): void {
     this.router.navigate(["/companies", id]);
   }

src/app/shared/components/pagination-buttons/pagination-buttons.component.ts

@@ -10,23 +10,28 @@ export class PaginationButtonsComponent implements OnInit {
   @Input()
   source: PaginatedModel | null = null;
 
+  @Input()
+  currentPage: number | null = null;
+
   @Output()
   pageChange: EventEmitter<number> = new EventEmitter<number>();
 
   pages: Array<number | null> = [];
   lastPage: number | null = null;
 
   get disablePreviousButton(): boolean {
+    const current = this.currentPage || (this.source ? this.source.currentPage : 1);
     return (
       this.source != null &&
-      (this.source.currentPage === 1 || this.source.totalItems === 0)
+      (current === 1 || this.source.totalItems === 0)
     );
   }
 
   get disableNextButton(): boolean {
+    const current = this.currentPage || (this.source ? this.source.currentPage : 1);
     return (
       this.source != null &&
-      (this.source.currentPage === this.lastPage ||
+      (current === this.lastPage ||
         this.source.totalItems === 0)
     );
   }
@@ -37,24 +42,26 @@ export class PaginationButtonsComponent implements OnInit {
       const allPages = Array.from(Array(this.lastPage).keys()).map(
         (i) => i + 1,
       );
+
+      const current = this.currentPage || this.source.currentPage;
 
       if (allPages.length > 7) {
         if (
-          this.source.currentPage > 3 &&
-          this.source.currentPage < this.lastPage - 2
+          current > 3 &&
+          current < this.lastPage - 2
         ) {
           this.pages = [
             1,
             2,
             null,
-            this.source.currentPage - 1,
-            this.source.currentPage,
-            this.source.currentPage + 1,
+            current - 1,
+            current,
+            current + 1,
             null,
             this.lastPage - 1,
             this.lastPage,
           ];
-        } else if (this.source.currentPage <= 3) {
+        } else if (current <= 3) {
           this.pages = [1, 2, 3, 4, 5, null, this.lastPage - 1, this.lastPage];
         } else {
           this.pages = [
@@ -75,18 +82,20 @@ export class PaginationButtonsComponent implements OnInit {
   }
 
   previous(): void {
-    if (this.source && this.source.currentPage > 1) {
-      this.pageClicked(this.source.currentPage - 1);
+    const current = this.currentPage || (this.source ? this.source.currentPage : 1);
+    if (this.source && current > 1) {
+      this.pageClicked(current - 1);
     }
   }
 
   next(): void {
+    const current = this.currentPage || (this.source ? this.source.currentPage : 1);
     if (
       this.source &&
       this.lastPage &&
-      this.source.currentPage < this.lastPage
+      current < this.lastPage
     ) {
-      this.pageClicked(this.source.currentPage + 1);
+      this.pageClicked(current + 1);
     }
   }
 
@@ -100,7 +109,8 @@ export class PaginationButtonsComponent implements OnInit {
     if (page == null) {
       return "";
     }
-
-    return this.source && this.source.currentPage === page ? "active" : "";
+
+    const current = this.currentPage || (this.source ? this.source.currentPage : 1);
+    return this.source && current === page ? "active" : "";
   }
 }