From b1063f336e86cf4d372afb1850e7bb246b63e7c5 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 30 Oct 2023 15:11:06 +0100
Subject: [PATCH] fix(ui): card issues pagination

---
 .../components/CardIssues/CardIssues.tsx      | 36 +++++++++++--------
 .../components/WidgetChart/WidgetChart.tsx    |  2 +-
 frontend/app/mstore/types/filter.ts           |  2 ++
 frontend/app/services/MetricService.ts        |  2 +-
 4 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx b/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
index 35e0e0af4..3481236fe 100644
--- a/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
+++ b/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
@@ -19,6 +19,7 @@ function CardIssues() {
   const [loading, setLoading] = useState(false);
   const widget: any = useObserver(() => metricStore.instance);
   const isMounted = useIsMounted();
+  const pageSize = 5;
   const { showModal } = useModal();
 
   const fetchIssues = async (filter: any) => {
@@ -41,6 +42,8 @@ function CardIssues() {
 
     const newFilter = {
       ...filter,
+      limit: pageSize,
+      page: metricStore.sessionsPage,
       series: filter.series.map(mapSeries)
     };
 
@@ -66,21 +69,20 @@ function CardIssues() {
   useEffect(() => {
     const newPayload = {
       ...widget,
-      page: metricStore.sessionsPage,
-      limit: metricStore.sessionsPageSize,
+      page: filter.page,
+      limit: filter.limit,
       filters: filter.filters
     };
-    console.log('drillDownPeriod', newPayload);
     debounceRequest(newPayload);
-  }, [drillDownPeriod, filter.filters, depsString, metricStore.sessionsPage]);
+  }, [drillDownPeriod, filter.filters, depsString, metricStore.sessionsPage, filter.page]);
 
   return useObserver(() => (
     <div className='my-8 bg-white rounded p-4 border'>
       <div className='flex justify-between'>
         <h1 className='font-medium text-2xl'>Issues</h1>
-        {/*<div>*/}
-        {/*  <Button variant='text-primary'>All Sessions</Button>*/}
-        {/*</div>*/}
+        <div>
+          <Button variant='text-primary'>All Sessions</Button>
+        </div>
       </div>
 
       <Loader loading={loading}>
@@ -94,16 +96,22 @@ function CardIssues() {
       </Loader>
 
       <div className='w-full flex items-center justify-between pt-4'>
+
         <div className='text-disabled-text'>
-          Showing <span
-          className='font-semibold'>{Math.min(data.issues.length, metricStore.sessionsPageSize)}</span> out of{' '}
-          <span className='font-semibold'>{data.total}</span> Issues
+          {data.total && (
+            <>
+              Showing < span className='font-medium'>{(filter.page - 1) * pageSize + 1}</span> to{' '}
+              <span className='font-medium'>{(filter.page - 1) * pageSize + pageSize}</span> of{' '}
+              <span className='font-medium'>{data.total}</span> issues.
+            </>
+          )}
         </div>
+
         <Pagination
-          page={metricStore.sessionsPage}
-          totalPages={Math.ceil(data.issues.length / metricStore.sessionsPageSize)}
-          onPageChange={(page: any) => metricStore.updateKey('sessionsPage', page)}
-          limit={metricStore.sessionsPageSize}
+          page={filter.page}
+          totalPages={Math.ceil(data.total / pageSize)}
+          onPageChange={(page: any) => filter.updateKey('page', page)}
+          limit={pageSize}
           debounceRequest={500}
         />
       </div>
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index f62adfed3..59ff4780a 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -222,7 +222,7 @@ function WidgetChart(props: Props) {
         height={props.isPreview ? 500 : 240}
         data={data}
         onChartClick={(filters: any) => {
-          dashboardStore.drillDownFilter.merge({ filters });
+          dashboardStore.drillDownFilter.merge({ filters, page: 1 });
         }} />;
     }
 
diff --git a/frontend/app/mstore/types/filter.ts b/frontend/app/mstore/types/filter.ts
index 1bd5d9401..1883ce70a 100644
--- a/frontend/app/mstore/types/filter.ts
+++ b/frontend/app/mstore/types/filter.ts
@@ -13,6 +13,8 @@ export default class Filter {
     startTimestamp: number = 0
     endTimestamp: number = 0
     eventsHeader: string = "EVENTS"
+    page: number = 1
+    limit: number = 10
 
     constructor() {
         makeAutoObservable(this, {
diff --git a/frontend/app/services/MetricService.ts b/frontend/app/services/MetricService.ts
index 28da47249..db97ec27c 100644
--- a/frontend/app/services/MetricService.ts
+++ b/frontend/app/services/MetricService.ts
@@ -110,7 +110,7 @@ export default class MetricService {
     if (filter.metricType === USER_PATH) {
       const widget = new Widget().fromJson(filter);
       const drillDownFilter = filter.filters;
-      filter = widget.toJson();
+      filter = { ...widget.toJson(), page: filter.page };
       filter.filters = drillDownFilter;
     }