chore(frontend): standardise paginator UI

closes #1471
measure-sh · Nov 1, 2024 · 9eb91b4 · 9eb91b4
1 parent 5b4dc52
commit 9eb91b4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 33 deletions.
diff --git a/frontend/dashboard/app/[teamId]/sessions/page.tsx b/frontend/dashboard/app/[teamId]/sessions/page.tsx
@@ -18,7 +18,7 @@ export default function SessionsOverview({ params }: { params: { teamId: string
 
     const [sessionsOverview, setSessionsOverview] = useState(emptySessionsOverviewResponse);
     const paginationOffset = 5
-    const [paginationRange, setPaginationRange] = useState({ start: 1, end: paginationOffset })
+    const [paginationIndex, setPaginationIndex] = useState(0)
     const [paginationDirection, setPaginationDirection] = useState(PaginationDirection.None)
 
     const getSessionsOverview = async () => {
@@ -61,18 +61,7 @@ export default function SessionsOverview({ params }: { params: { teamId: string
         }
 
         getSessionsOverview()
-    }, [paginationRange, filters]);
-
-    // Reset pagination range if not in default if any filters change
-    useEffect(() => {
-        // If we reset pagination range even if values haven't changed, we will trigger
-        // an unnecessary getSessionsOverview effect
-        if (paginationRange.start === 1 && paginationRange.end === paginationOffset) {
-            return
-        }
-
-        setPaginationRange({ start: 1, end: paginationOffset })
-    }, [filters]);
+    }, [paginationIndex, filters]);
 
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start p-24 pt-8">
@@ -118,14 +107,14 @@ export default function SessionsOverview({ params }: { params: { teamId: string
                         filters={filters} />
                     <div className="py-4" />
                     <div className='self-end'>
-                        <Paginator prevEnabled={sessionsOverview.meta.previous} nextEnabled={sessionsOverview.meta.next} displayText={paginationRange.start + ' - ' + paginationRange.end}
+                        <Paginator prevEnabled={sessionsOverviewApiStatus === SessionsOverviewApiStatus.Loading ? false : sessionsOverview.meta.previous} nextEnabled={sessionsOverviewApiStatus === SessionsOverviewApiStatus.Loading ? false : sessionsOverview.meta.next} displayText=''
                             onNext={() => {
-                                setPaginationRange({ start: paginationRange.start + paginationOffset, end: paginationRange.end + paginationOffset })
                                 setPaginationDirection(PaginationDirection.Forward)
+                                setPaginationIndex(paginationIndex + 1)
                             }}
                             onPrev={() => {
-                                setPaginationRange({ start: paginationRange.start - paginationOffset, end: paginationRange.end - paginationOffset })
                                 setPaginationDirection(PaginationDirection.Backward)
+                                setPaginationIndex(paginationIndex - 1)
                             }} />
                     </div>
                     <div className={`py-1 w-full ${sessionsOverviewApiStatus === SessionsOverviewApiStatus.Loading ? 'visible' : 'invisible'}`}>

diff --git a/frontend/dashboard/app/components/exceptions_details.tsx b/frontend/dashboard/app/components/exceptions_details.tsx
@@ -9,7 +9,6 @@ import Paginator, { PaginationDirection } from '@/app/components/paginator';
 import { formatDateToHumanReadableDateTime } from '../utils/time_utils';
 import ExceptionspDetailsPlot from './exceptions_details_plot';
 import Filters, { AppVersionsInitialSelectionType, defaultFilters } from './filters';
-import Journey, { JourneyType } from './journey_sankey';
 import Image from 'next/image';
 import CopyAiContext from './copy_ai_context';
 import LoadingSpinner from './loading_spinner';

diff --git a/frontend/dashboard/app/components/exceptions_overview.tsx b/frontend/dashboard/app/components/exceptions_overview.tsx
@@ -22,7 +22,7 @@ export const ExceptionsOverview: React.FC<ExceptionsOverviewProps> = ({ exceptio
 
   const [exceptionsOverview, setExceptionsOverview] = useState(emptyExceptionsOverviewResponse);
   const paginationOffset = 10
-  const [paginationRange, setPaginationRange] = useState({ start: 1, end: paginationOffset })
+  const [paginationIndex, setPaginationIndex] = useState(0)
   const [paginationDirection, setPaginationDirection] = useState(PaginationDirection.None)
 
 
@@ -66,18 +66,7 @@ export const ExceptionsOverview: React.FC<ExceptionsOverviewProps> = ({ exceptio
     }
 
     getExceptionsOverview()
-  }, [paginationRange, filters]);
-
-  // Reset pagination range if not in default if any filters change
-  useEffect(() => {
-    // If we reset pagination range even if values haven't change, we will trigger
-    // and unnecessary getExceptionsOverview effect
-    if (paginationRange.start === 1 && paginationRange.end === paginationOffset) {
-      return
-    }
-
-    setPaginationRange({ start: 1, end: paginationOffset })
-  }, [filters]);
+  }, [paginationIndex, filters]);
 
   return (
     <div className="flex flex-col selection:bg-yellow-200/75 items-start p-24 pt-8">
@@ -123,13 +112,13 @@ export const ExceptionsOverview: React.FC<ExceptionsOverviewProps> = ({ exceptio
             filters={filters} />
           <div className="py-4" />
           <div className='self-end'>
-            <Paginator prevEnabled={exceptionsOverview.meta.previous} nextEnabled={exceptionsOverview.meta.next} displayText={paginationRange.start + ' - ' + paginationRange.end}
+            <Paginator prevEnabled={exceptionsOverviewApiStatus === ExceptionsOverviewApiStatus.Loading ? false : exceptionsOverview.meta.previous} nextEnabled={exceptionsOverviewApiStatus === ExceptionsOverviewApiStatus.Loading ? false : exceptionsOverview.meta.next} displayText=''
               onNext={() => {
-                setPaginationRange({ start: paginationRange.start + paginationOffset, end: paginationRange.end + paginationOffset })
+                setPaginationIndex(paginationIndex + 1)
                 setPaginationDirection(PaginationDirection.Forward)
               }}
               onPrev={() => {
-                setPaginationRange({ start: paginationRange.start - paginationOffset, end: paginationRange.end - paginationOffset })
+                setPaginationIndex(paginationIndex - 1)
                 setPaginationDirection(PaginationDirection.Backward)
               }} />
           </div>