From 5d94e72da2836abdcde01bab06aefd03851b6333 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 17 Feb 2023 12:57:29 +0100
Subject: [PATCH] fix(ui) - alerts list pagination reset

---
 .../Dashboard/components/Alerts/AlertsList.tsx   |  4 ++--
 .../Dashboard/components/Alerts/AlertsView.tsx   | 16 +++++++++++++++-
 frontend/app/mstore/alertsStore.ts               |  6 ++++++
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
index e4005098e..d1d4c84ef 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
@@ -17,10 +17,10 @@ function AlertsList({ siteId }: Props) {
   const { alertsStore, settingsStore } = useStore();
   const { fetchWebhooks, webhooks } = settingsStore
   const { alerts: alertsList, alertsSearch, fetchList, init } = alertsStore
+  const page = alertsStore.page;
 
   React.useEffect(() => { fetchList(); fetchWebhooks() }, []);
   const alertsArray = alertsList
-  const [page, setPage] = React.useState(1);
 
   const filteredAlerts = filterList(alertsArray, alertsSearch, ['name'], (item, query) => query.test(item.query.left))
   const list = alertsSearch !== '' ? filteredAlerts : alertsArray;
@@ -59,7 +59,7 @@ function AlertsList({ siteId }: Props) {
         <Pagination
           page={page}
           totalPages={Math.ceil(list.length / pageSize)}
-          onPageChange={(page) => setPage(page)}
+          onPageChange={(page) => alertsStore.updateKey('page', page)}
           limit={pageSize}
           debounceRequest={100}
         />
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
index 631df8e43..544c86f8f 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
@@ -1,16 +1,30 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, PageTitle, Icon, Link } from 'UI';
 import withPageTitle from 'HOCs/withPageTitle';
 import { withSiteId, alertCreate } from 'App/routes';
 
 import AlertsList from './AlertsList';
 import AlertsSearch from './AlertsSearch';
+import { useHistory } from 'react-router';
+import { useStore } from 'App/mstore';
 
 interface IAlertsView {
     siteId: string;
 }
 
 function AlertsView({ siteId }: IAlertsView) {
+    const history = useHistory();
+    const { alertsStore } = useStore();
+
+    
+    useEffect(() => {
+        const unmount = history.listen((location) => {
+            if (!location.pathname.includes('/alert')) {
+                alertsStore.updateKey('page', 1);
+            }
+        });
+        return unmount;
+      }, [history]);
     return (
         <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded py-4 border">
             <div className="flex items-center mb-4 justify-between px-6">
diff --git a/frontend/app/mstore/alertsStore.ts b/frontend/app/mstore/alertsStore.ts
index d377af81e..e608c1873 100644
--- a/frontend/app/mstore/alertsStore.ts
+++ b/frontend/app/mstore/alertsStore.ts
@@ -9,6 +9,7 @@ export default class AlertsStore {
     // @ts-ignore
   instance: Alert = new Alert({}, false);
   loading = false
+  page: number = 1;
 
   constructor() {
     makeAutoObservable(this);
@@ -16,6 +17,11 @@ export default class AlertsStore {
 
   changeSearch = (value: string) => {
     this.alertsSearch = value;
+    this.page = 1;
+  }
+
+  updateKey(key: string, value: any) {
+    this[key] = value
   }
 
   fetchList = async () => {