@@ -34,24 +34,24 @@ export const PaginationWidget = ({
3434const currentPage = paginationState . context . page
3535const numRecordsPerPage = paginationState . context . limit
3636
37- const numPages = numRecords
38- ?Math . ceil ( numRecords / numRecordsPerPage )
39- :undefined
37+ const numPages = numRecords ?Math . ceil ( numRecords / numRecordsPerPage ) :0
4038const firstPageActive = currentPage === 1 && numPages !== 0
4139const lastPageActive = currentPage === numPages && numPages !== 0
40+ // if beyond page 1, show pagination widget even if there's only one true page, so user can navigate back
41+ const showWidget = numPages > 1 || currentPage > 1
4242
4343return (
44- < div style = { containerStyle } className = { styles . defaultContainerStyles } >
45- < Button
46- className = { styles . prevLabelStyles }
47- aria-label = "Previous page"
48- disabled = { firstPageActive }
49- onClick = { ( ) => send ( { type : "PREVIOUS_PAGE" } ) }
50- >
51- < KeyboardArrowLeft / >
52- < div > { prevLabel } </ div >
53- </ Button >
54- < Maybe condition = { numPages !== undefined } >
44+ < Maybe condition = { showWidget } >
45+ < div style = { containerStyle } className = { styles . defaultContainerStyles } >
46+ < Button
47+ className = { styles . prevLabelStyles }
48+ aria-label = "Previous page"
49+ disabled = { firstPageActive }
50+ onClick = { ( ) => send ( { type : "PREVIOUS_PAGE" } ) }
51+ >
52+ < KeyboardArrowLeft / >
53+ < div > { prevLabel } </ div >
54+ </ Button >
5555< ChooseOne >
5656< Cond condition = { isMobile } >
5757< PageButton
@@ -61,37 +61,36 @@ export const PaginationWidget = ({
6161/>
6262</ Cond >
6363< Cond >
64- { numPages &&
65- buildPagedList ( numPages , currentPage ) . map ( ( page ) =>
66- typeof page !== "number" ?(
67- < PageButton
68- key = { `Page${ page } }
69- activePage = { currentPage }
70- placeholder = "..."
71- disabled
72- />
73- ) :(
74- < PageButton
75- key = { `Page${ page } }
76- activePage = { currentPage }
77- page = { page }
78- numPages = { numPages }
79- onPageClick = { ( ) => send ( { type :"GO_TO_PAGE" , page} ) }
80- />
81- ) ,
82- ) }
64+ { buildPagedList ( numPages , currentPage ) . map ( ( page ) =>
65+ typeof page !== "number" ?(
66+ < PageButton
67+ key = { `Page${ page } }
68+ activePage = { currentPage }
69+ placeholder = "..."
70+ disabled
71+ />
72+ ) :(
73+ < PageButton
74+ key = { `Page${ page } }
75+ activePage = { currentPage }
76+ page = { page }
77+ numPages = { numPages }
78+ onPageClick = { ( ) => send ( { type :"GO_TO_PAGE" , page} ) }
79+ />
80+ ) ,
81+ ) }
8382</ Cond >
8483</ ChooseOne >
85- </ Maybe >
86- < Button
87- aria-label = "Next page"
88- disabled = { lastPageActive }
89- onClick = { ( ) => send ( { type : "NEXT_PAGE" } ) }
90- >
91- < div > { nextLabel } </ div >
92- < KeyboardArrowRight / >
93- </ Button >
94- </ div >
84+ < Button
85+ aria-label = "Next page"
86+ disabled = { lastPageActive }
87+ onClick = { ( ) => send ( { type : "NEXT_PAGE" } ) }
88+ >
89+ < div > { nextLabel } </ div >
90+ < KeyboardArrowRight / >
91+ </ Button >
92+ </ div >
93+ </ Maybe >
9594)
9695}
9796