fix(PaginationInfinity): ensure the load button does not appear when …

…current_page decreases (#1147) * fix(PaginationInfinity): ensure the load button does not appear when current_page decreases * chore: remove "act" as we do not have any reason to use it anymore * chore: add console.log and fallbacks to 1 * Remove logs
dnbexperience · Sep 1, 2022 · e19a377 · e19a377
1 parent 6ca785f
commit e19a377
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 91 deletions.
diff --git a/packages/dnb-eufemia/src/components/pagination/Pagination.js b/packages/dnb-eufemia/src/components/pagination/Pagination.js
@@ -23,7 +23,6 @@ import InfinityScroller from './PaginationInfinity'
 import PaginationBar from './PaginationBar'
 
 const paginationPropTypes = {
-  debug: PropTypes.bool,
   startup_page: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   current_page: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   page_count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -97,11 +96,7 @@ const paginationPropTypes = {
 
   class: PropTypes.string,
   className: PropTypes.string,
-  children: PropTypes.oneOfType([
-    // PropTypes.array,
-    PropTypes.node,
-    PropTypes.func,
-  ]),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 
   on_change: PropTypes.func,
   on_startup: PropTypes.func,
@@ -110,7 +105,6 @@ const paginationPropTypes = {
 }
 
 const paginationDefaultProps = {
-  debug: null,
   startup_page: null,
   current_page: null,
   page_count: null,

diff --git a/packages/dnb-eufemia/src/components/pagination/PaginationInfinity.js b/packages/dnb-eufemia/src/components/pagination/PaginationInfinity.js
@@ -189,41 +189,22 @@ export default class InfinityScroller extends React.PureComponent {
       // our states
       lowerPage,
       upperPage,
-      currentPage,
       pageCount,
       hasEndedInfinity,
       parallelLoadCount,
 
       // our props
-      debug,
       current_page,
       fallback_element,
       marker_element,
       indicator_element,
     } = this.context.pagination
 
-    if (debug) {
-      console.info('PaginationInfinity.render', {
-        current_page,
-        lowerPage,
-        upperPage,
-        currentPage,
-        pageCount,
-      })
-    }
-
     const Marker = () => (
       <InteractionMarker
-        debug={debug}
         pageNumber={upperPage}
         markerElement={marker_element || fallback_element}
         onVisible={(pageNumber) => {
-          if (debug) {
-            console.info('PaginationInfinity.onVisible', {
-              pageNumber,
-            })
-          }
-
           let newPageNo
           // load several pages at once
           for (let i = 0; i < parallelLoadCount; ++i) {
@@ -425,7 +406,6 @@ export default class InfinityScroller extends React.PureComponent {
 
 class InteractionMarker extends React.PureComponent {
   static propTypes = {
-    debug: PropTypes.bool,
     pageNumber: PropTypes.number.isRequired,
     onVisible: PropTypes.func.isRequired,
     markerElement: PropTypes.oneOfType([
@@ -436,7 +416,6 @@ class InteractionMarker extends React.PureComponent {
     ]),
   }
   static defaultProps = {
-    debug: null,
     markerElement: null,
   }
   state = { isConnected: false }
@@ -453,18 +432,12 @@ class InteractionMarker extends React.PureComponent {
     this._ref = React.createRef()
 
     if (typeof IntersectionObserver !== 'undefined') {
-      this.intersectionObserver = new IntersectionObserver(
-        (entries) => {
-          const [{ isIntersecting }] = entries
-          if (isIntersecting) {
-            this.callReady()
-          }
+      this.intersectionObserver = new IntersectionObserver((entries) => {
+        const [{ isIntersecting }] = entries
+        if (isIntersecting) {
+          this.callReady()
         }
-        // {
-        //   threshold: 1,
-        //   rootMargin: '0px 0px -80% 0px'
-        // }
-      )
+      })
     } else {
       warn('Pagination is missing IntersectionObserver supported!')
     }
@@ -475,11 +448,6 @@ class InteractionMarker extends React.PureComponent {
       this._isMounted = true
       this.intersectionObserver?.observe(this._ref.current)
     }
-
-    if (this.props.debug) {
-      const height = this.getContentHeight()
-      console.info('PaginationInfinity.getContentHeight', height)
-    }
   }
 
   componentWillUnmount() {

diff --git a/packages/dnb-eufemia/src/components/pagination/PaginationProvider.js b/packages/dnb-eufemia/src/components/pagination/PaginationProvider.js
@@ -98,34 +98,29 @@ export default class PaginationProvider extends React.PureComponent {
     )
 
     // reset pagination, like the resetInfinity method
-    if (
-      props.useMarkerOnly &&
-      props.reset_pagination_handler !== null &&
-      isTrue(props.reset_pagination_handler)
-    ) {
+    if (props.useMarkerOnly && isTrue(props.reset_pagination_handler)) {
       state.lowerPage = undefined
       state.upperPage = undefined
     }
 
     // only used by handleInfinityMarker
     if (props.useMarkerOnly) {
-      if (
-        typeof state.lowerPage === 'undefined' &&
-        parseFloat(props.current_page) > 0
-      ) {
-        state.lowerPage = state.startupPage
+      if (typeof state.lowerPage === 'undefined') {
+        state.lowerPage = state.startupPage || 1
+      }
+      const cur = parseFloat(props.current_page)
+      if (!isNaN(cur) && cur < state.lowerPage) {
+        state.lowerPage = cur
       }
       if (typeof state.upperPage === 'undefined') {
         state.upperPage =
-          state.startupPage + parseFloat(props.startup_count) - 1
+          state.startupPage + (parseFloat(props.startup_count) || 1) - 1 ||
+          1
       }
     }
 
     // reset content, like the resetContent method
-    if (
-      props.reset_content_handler !== null &&
-      isTrue(props.reset_content_handler)
-    ) {
+    if (isTrue(props.reset_content_handler)) {
       state.items = []
       state.pageCount = parseFloat(props.page_count) || 1
     }
@@ -135,6 +130,7 @@ export default class PaginationProvider extends React.PureComponent {
     } else if (Array.isArray(props.items)) {
       state.items = props.items
     }
+
     return state
   }
 

diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/Pagination.test.js b/packages/dnb-eufemia/src/components/pagination/__tests__/Pagination.test.js
@@ -4,7 +4,6 @@
  */
 
 import React from 'react'
-import { act } from '@testing-library/react'
 import {
   mount,
   fakeProps,
@@ -377,13 +376,11 @@ describe('Infinity scroller', () => {
       const items = Object.values(localStack.current)
 
       const action = ({ pageNumber }) => {
-        act(() => {
-          setCurrentPage(pageNumber)
+        setCurrentPage(pageNumber)
 
-          if (pageNumber === 1) {
-            endInfinity()
-          }
-        })
+        if (pageNumber === 1) {
+          endInfinity()
+        }
       }
 
       return (
@@ -437,6 +434,58 @@ describe('Infinity scroller', () => {
     expect(Comp.find('div.page-item').last().text()).toBe('page-30')
   })
 
+  it('should handle re-render with decreasing current_page and not show the loadbar', async () => {
+    const perPageCount = 10
+
+    const tableItems = []
+    for (let i = 1; i <= 60; i++) {
+      tableItems.push({
+        ssn: i,
+        content: <PageItem key={i}>page-{i}</PageItem>,
+      })
+    }
+
+    const localStack = { current: {} }
+
+    const MyComponent = () => {
+      const [{ InfinityMarker }] = React.useState(createPagination)
+
+      // 1. Start with 2
+      const [currentPage, setCurrentPage] = React.useState(2)
+
+      tableItems
+        .filter((cur, idx) => {
+          const floor = (currentPage - 1) * perPageCount
+          const ceil = floor + perPageCount
+          return idx >= floor && idx < ceil
+        })
+        .forEach((item) => {
+          localStack.current[item.ssn] = item.content
+        })
+      const items = Object.values(localStack.current)
+
+      // 2. And set it back to 1
+      React.useEffect(() => {
+        setCurrentPage(1)
+      }, [])
+
+      return (
+        <InfinityMarker min_wait_time={0} current_page={currentPage}>
+          {items}
+        </InfinityMarker>
+      )
+    }
+
+    const Comp = mount(<MyComponent />)
+
+    await rerenderComponent(Comp)
+
+    expect(Comp.find('div.page-item').length).toBe(20)
+    expect(Comp.find('div.page-item').at(0).text()).toBe('page-1')
+    expect(Comp.find('div.page-item').last().text()).toBe('page-20')
+    expect(Comp.find('div.dnb-pagination__loadbar').exists()).toBe(false)
+  })
+
   it('should load pages with load more button (before)', async () => {
     const action = ({ pageNumber, setContent }) => {
       setContent(pageNumber, <PageItem>{pageNumber}</PageItem>)
@@ -449,11 +498,7 @@ describe('Infinity scroller', () => {
     const clickOnLoadMore = async () => {
       Comp.find('div.dnb-pagination__loadbar button').simulate('click')
 
-      // expect(Comp.exists('div.dnb-pagination__indicator')).toBe(true)
-
       await rerenderComponent(Comp)
-
-      // expect(Comp.exists('div.dnb-pagination__indicator')).toBe(false)
     }
 
     const Comp = mount(
@@ -513,13 +558,11 @@ describe('Infinity scroller', () => {
       resetInfinityHandler = resetInfinity
 
       const action = ({ pageNumber }) => {
-        act(() => {
-          setCurrentPage(pageNumber)
+        setCurrentPage(pageNumber)
 
-          if (pageNumber === 1) {
-            endInfinity()
-          }
-        })
+        if (pageNumber === 1) {
+          endInfinity()
+        }
       }
 
       return (