From 795cef61e913210e8ae3b111cde6c64121473ccb Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 23 Aug 2022 18:07:06 +0200
Subject: [PATCH] change(ui) - session list pagination count

---
 .../components/SessionList/SessionList.tsx         | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
index 6d7023ca0..cba50f841 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
@@ -8,6 +8,7 @@ import { fetchSessions, addFilterByKeyAndValue, updateCurrentPage, setScrollPosi
 import useTimeout from 'App/hooks/useTimeout';
 
 const AUTOREFRESH_INTERVAL = 5 * 60 * 1000;
+const PER_PAGE = 10;
 interface Props {
     loading: boolean;
     list: any;
@@ -114,12 +115,19 @@ function SessionList(props: Props) {
             </NoContent>
 
             {total > 0 && (
-                <div className="w-full flex items-center justify-center py-6 px-4">
+                // <div className="w-full flex items-center justify-center py-6 px-4">
+                <div className="flex items-center justify-between p-5">
+                    <div>
+                        {/* showing x to x of total sessions  */}
+                        Showing <span className="font-medium">{(currentPage - 1) * PER_PAGE + 1}</span> to{' '}
+                        <span className="font-medium">{(currentPage - 1) * PER_PAGE + list.size}</span> of{' '}
+                        <span className="font-medium">{total}</span> sessions.
+                    </div>
                     <Pagination
                         page={currentPage}
-                        totalPages={Math.ceil(total / 10)}
+                        totalPages={Math.ceil(total / PER_PAGE)}
                         onPageChange={(page) => props.updateCurrentPage(page)}
-                        limit={10}
+                        limit={PER_PAGE}
                         debounceRequest={1000}
                     />
                 </div>