fix(sentinel): ensure sentinel re-observes after items render

The intersection observer will re-attach the target, to fix a case occurring when an itemLength update
is too small and has the sentinel re-render within the intersecting area.
This prevented the intersection event from happening either until the intersection changed again or alltogether
when using `awaitMore` due to the `awaitIntersection` set fag.

Author: Luis Merino

docs/docs/components/AsyncList/index.js

@@ -60,6 +60,7 @@ export default class extends React.Component {
             })
             .catch(err => {
         console.error(err); // eslint-disable-line
+                this.feedList([]);
             });
     };
 

src/Sentinel.js

@@ -15,7 +15,6 @@ export default class Sentinel extends React.PureComponent {
 
         this.state = {
             rootElement: undefined,
-            sentinel: <sentinel style={{ height: 1, display: 'block' }} />,
             rootMargin: this.computeRootMargin(props),
         };
 
@@ -44,21 +43,26 @@ export default class Sentinel extends React.PureComponent {
             this.setState({
                 rootMargin: this.computeRootMargin(nextProps),
             });
+        } else {
+            this.observer.reobserve();
         }
     }
 
     render() {
         const { onChange } = this.props;
-        const { rootElement, sentinel, rootMargin } = this.state;
+        const { rootElement, rootMargin } = this.state;
 
         return (
             <Observer
+                ref={node => {
+                    this.observer = node;
+                }}
                 disabled={typeof rootElement === 'undefined'}
                 root={rootElement}
                 rootMargin={rootMargin}
                 onChange={onChange}
             >
-                {sentinel}
+                <sentinel style={{ height: 1, display: 'block' }} />
             </Observer>
         );
     }

src/__tests__/List.spec.js

@@ -147,21 +147,21 @@ describe('handleUpdate', () => {
         ).not.toThrow();
     });
 
-    test('sets next size value using `pageSize`', () => {
+    test('sets next size value computed into `pageSize`', () => {
         const instance = createTree({ itemsLength: 20 }).getInstance();
         instance.handleUpdate({ isIntersecting: false });
         instance.handleUpdate({ isIntersecting: true });
         expect(instance.state.size).toBe(20);
     });
 
-    test('sets next size value using `itemsLength`', () => {
+    test('sets next size value computed into `itemsLength`', () => {
         const instance = createTree({ itemsLength: 15 }).getInstance();
         instance.handleUpdate({ isIntersecting: false });
         instance.handleUpdate({ isIntersecting: true });
         expect(instance.state.size).toBe(15);
     });
 
-    test('calls `onIntersection` if size updates', () => {
+    test('calls `onIntersection` each time when `awaitIntersection` is falsy', () => {
         const spy = jest.fn();
         const instance = createTree({
             itemsLength: 30,
@@ -174,7 +174,7 @@ describe('handleUpdate', () => {
         expect(spy).toHaveBeenCalledTimes(2);
     });
 
-    test('calls `onIntersection` only once with `awaitMore` until size updates', () => {
+    test('calls `onIntersection` only once when `awaitIntersection` is true', () => {
         const spy = jest.fn();
         const tree = createTree({
             awaitMore: true,

src/__tests__/Sentinel.spec.js

@@ -43,7 +43,7 @@ describe('constructor', () => {
 });
 
 describe('render', () => {
-    test('provides a disabled observer', () => {
+    test('first time sets a disabled observer', () => {
         const spy = require('@researchgate/react-intersection-observer');
         createTree();
         expect(spy.mock.calls[spy.mock.calls.length - 1][0]).toHaveProperty('disabled', true);
@@ -62,20 +62,25 @@ describe('render', () => {
     test('avoids re-render if new props are the same', () => {
         const tree = createTree();
         const renderSpy = jest.spyOn(tree.getInstance(), 'render');
+        const spy = jest.fn();
+        tree.getInstance().observer = {
+            reobserve: spy,
+        };
         tree.update(<Sentinel {...defaultProps} />);
         expect(renderSpy).not.toBeCalled();
+        expect(spy).toBeCalled();
     });
 });
 
 describe('compute', () => {
-    test('returns valid computeRootMargin', () => {
+    test('returns computed rootMargin', () => {
         const instance = createTree().getInstance();
         expect(instance.computeRootMargin({ threshold: '50%', axis: 'x' })).toBe('0% 50%');
         expect(instance.computeRootMargin({ threshold: '50px', axis: 'y' })).toBe('50px 0px');
         expect(instance.computeRootMargin({ threshold: '50', axis: 'y' })).toBe('50 0');
     });
 
-    test('executed receiving new axis or threshold prop', () => {
+    test('new axis or threshold props set new rootMargin', () => {
         const instance = createTree().getInstance();
         instance.componentWillReceiveProps({ ...defaultProps, axis: 'x' });
         expect(instance.state.rootMargin).toBe('0px 100px');