bring in page size state hook, and replace hard coded page size

felixmosh · Jun 2, 2020 · 164e391 · 164e391
1 parent 12a2096
commit 164e391
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 17 deletions.
diff --git a/routes/pagination.js b/routes/pagination.js
@@ -1,6 +1,9 @@
+const DEFAULT_PAGINATION_SIZE = 10
+
 module.exports = function getPaginationParameters(query) {
+  // default pagination indices
   let start = 0
-  let end = 9
+  let end = DEFAULT_PAGINATION_SIZE - 1
   if (query.start && query.end) {
     const parsedStart = parseInt(query.start)
     const parsedEnd = parseInt(query.end)

diff --git a/ui/components/App.js b/ui/components/App.js
@@ -11,6 +11,8 @@ export default function App({ basePath }) {
     setSelectedStatuses,
     pagination,
     setPagination,
+    pageSize,
+    setPageSize,
     retryJob,
     retryAll,
     cleanAllDelayed,
@@ -34,6 +36,8 @@ export default function App({ basePath }) {
                 selectStatus={setSelectedStatuses}
                 pagination={pagination}
                 setPagination={setPagination}
+                pageSize={pageSize}
+                setPageSize={setPageSize}
                 retryJob={retryJob(queue.name)}
                 retryAll={retryAll(queue.name)}
                 cleanAllDelayed={cleanAllDelayed(queue.name)}

diff --git a/ui/components/Paginator.js b/ui/components/Paginator.js
@@ -1,12 +1,16 @@
 import React, { useState, useEffect } from 'react'
 
+// TODO: setPageSize() do not set size to zero.
+
 export const Paginator = ({
   pagination,
   setPagination,
+  pageSize,
+  setPageSize,
   totalJobs,
 }) => {
-  const totalPages = Math.ceil(totalJobs / 10)
-  const currentPageNumber = totalJobs > 0 ? Math.floor(pagination.start / 10) + 1 : 0
+  const totalPages = Math.ceil(totalJobs / pageSize)
+  const currentPageNumber = totalJobs > 0 ? Math.floor(pagination.start / pageSize) + 1 : 0
 
   const [pageNumberInputValue, setPageNumberInputValue] = useState(currentPageNumber)
 
@@ -15,19 +19,19 @@ export const Paginator = ({
   }, [currentPageNumber])
 
   const handleClickPrevPage = (event) => {
-    if (pagination.start >= 10) {
+    if (pagination.start >= pageSize) {
       setPagination({
-        start: pagination.start - 10,
-        end: pagination.end - 10,
+        start: pagination.start - pageSize,
+        end: pagination.end - pageSize,
       })
     }
   }
 
   const handleClickNextPage = (event) => {
     if (currentPageNumber < totalPages) {
       setPagination({
-        start: pagination.start + 10,
-        end: pagination.end + 10,
+        start: pagination.start + pageSize,
+        end: pagination.end + pageSize,
       })
     }
   }
@@ -38,12 +42,12 @@ export const Paginator = ({
     }
 
     const inputValue = parseInt(pageNumberInputValue)
-    if (Number.isNaN(inputValue)) {
+    if (!Number.isNaN(inputValue)) {
       if (inputValue > 0 && inputValue <= totalPages) {
-        const startIndex = (inputValue - 1) * 10
-        const endIndex = startIndex + (Math.min(Math.max(totalJobs - 1, 0), 9))
+        const startIndex = (inputValue - 1) * pageSize
+        const endIndex = startIndex + (Math.min(Math.max(totalJobs - 1, 0), pageSize - 1))
         setPagination({
-          start: (inputValue - 1) * 10,
+          start: (inputValue - 1) * pageSize,
           end: endIndex,
         })
       } else {
@@ -61,7 +65,7 @@ export const Paginator = ({
     <div className="paginator">
       <div>
         <button
-          disabled={pagination.start < 10}
+          disabled={pagination.start < pageSize}
           role="button"
           onClick={handleClickPrevPage}
         >

diff --git a/ui/components/Queue.js b/ui/components/Queue.js
@@ -291,10 +291,10 @@ export default function Queue({
   selectedStatus,
   pagination,
   setPagination,
+  pageSize,
+  setPageSize,
 }) {
   const selectedStatusTotalJobs = queue.counts[selectedStatus]
-  const currentPageJobCount =
-    Math.min(pagination.end, selectedStatusTotalJobs) - pagination.start
 
   return (
     <section>
@@ -309,7 +309,7 @@ export default function Queue({
               selectStatus({ [queue.name]: status })
               setPagination({
                 start: 0,
-                end: Math.min(9, queue.counts[status]),
+                end: Math.min(pageSize - 1, queue.counts[status]),
               })
             }}
             selected={selectedStatus === status}
@@ -331,6 +331,8 @@ export default function Queue({
             <Paginator
               pagination={pagination}
               setPagination={setPagination}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
               totalJobs={selectedStatusTotalJobs}
             />
           ) : null}
@@ -341,6 +343,8 @@ export default function Queue({
             <Paginator
               pagination={pagination}
               setPagination={setPagination}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
               totalJobs={queue.counts[selectedStatus]}
             />
           ) : null}

diff --git a/ui/components/hooks/useStore.js b/ui/components/hooks/useStore.js
@@ -9,9 +9,10 @@ export default function useStore(basePath) {
     loading: true,
   })
   const [selectedStatuses, setSelectedStatuses] = useState({})
+  const [pageSize, setPageSize] = useState(10)
   const [pagination, setPagination] = useState({
     start: 0,
-    end: 9,
+    end: pageSize - 1,
   })
 
   const poll = useRef()
@@ -81,5 +82,7 @@ export default function useStore(basePath) {
     setSelectedStatuses,
     pagination,
     setPagination,
+    pageSize,
+    setPageSize,
   }
 }