From 48cbb2179cfc294abc7166da2065dd468e942d87 Mon Sep 17 00:00:00 2001
From: ArslanAmeer <arslan.ameer@hotmail.com>
Date: Tue, 3 Oct 2023 01:45:10 +0500
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Update:=20pagination=20per?=
 =?UTF-8?q?sist=20on=20page=20reload?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article-helpers/article-list.component.ts | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/article-helpers/article-list.component.ts b/src/app/shared/article-helpers/article-list.component.ts
index 880942b03..47ba2bd86 100644
--- a/src/app/shared/article-helpers/article-list.component.ts
+++ b/src/app/shared/article-helpers/article-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy } from "@angular/core";
+import { Component, Input, OnDestroy, OnInit } from "@angular/core";
 import { ArticlesService } from "../../core/services/articles.service";
 import { ArticleListConfig } from "../../core/models/article-list-config.model";
 import { Article } from "../../core/models/article.model";
@@ -7,6 +7,7 @@ import { NgClass, NgForOf, NgIf } from "@angular/common";
 import { LoadingState } from "../../core/models/loading-state.model";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
+import { ActivatedRoute, Router } from "@angular/router";
 
 @Component({
   selector: "app-article-list",
@@ -30,11 +31,21 @@ export class ArticleListComponent implements OnDestroy {
     if (config) {
       this.query = config;
       this.currentPage = 1;
-      this.runQuery();
+      this.route.queryParams.subscribe((params) => {
+        const page = params["page"];
+        if (page) {
+          this.currentPage = Number(page);
+        }
+        this.runQuery();
+      });
     }
   }
 
-  constructor(private articlesService: ArticlesService) {}
+  constructor(
+    private articlesService: ArticlesService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
 
   ngOnDestroy() {
     this.destroy$.next();
@@ -44,6 +55,11 @@ export class ArticleListComponent implements OnDestroy {
   setPageTo(pageNumber: number) {
     this.currentPage = pageNumber;
     this.runQuery();
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { page: pageNumber },
+      queryParamsHandling: "merge",
+    });
   }
 
   runQuery() {