added LoadMore component

packages/app/src/components/LoadMore/index.jsx

@@ -0,0 +1,82 @@
+import React from "react"
+import PropTypes from "prop-types"
+import classnames from "classnames"
+import IntersectionObserver from "intersection-observer-polyfill"
+
+import "./index.less"
+
+export default class LoadMore extends React.Component {
+    constructor() {
+        super(...arguments)
+        this.insideViewportCb = this.insideViewportCb.bind(this)
+    }
+
+    static propTypes = {
+        onBottom: PropTypes.func,
+        fetching: PropTypes.bool,
+        hasMore: PropTypes.bool,
+        NoResult: PropTypes.func,
+        Footer: PropTypes.func
+    }
+
+    componentDidMount() {
+        try {
+            const node = document.getElementById("bottom")
+
+            this.observer = new IntersectionObserver(this.insideViewportCb)
+            this.observer.observe(node)
+        } catch (err) {
+            console.log("err in finding node", err)
+        }
+
+        window.addEventListener("scroll", this.handleOnScroll)
+    }
+
+    insideViewportCb(entries) {
+        const { fetching, onBottom } = this.props
+
+        entries.forEach(element => {
+            if (element.intersectionRatio > 0 && !fetching) {
+                onBottom()
+            }
+        })
+    }
+
+    componentWillUnmount() {
+        if (this.observer) {
+            this.observer = null
+        }
+    }
+
+    render() {
+        const {
+            className,
+            children,
+            hasMore,
+            loadingComponent,
+            noResultComponent,
+        } = this.props
+
+        return <div className="infinite-scroll">
+            <div className={classnames(className)}>
+                {children}
+            </div>
+
+            <div style={{ clear: "both" }} />
+
+            <div
+                id="bottom"
+                style={{ display: hasMore ? "block" : "none" }}
+            >
+                {loadingComponent && React.createElement(loadingComponent)}
+            </div>
+
+            <div
+                className="no-result"
+                style={{ display: hasMore ? "none" : "block" }}
+            >
+                {noResultComponent ? React.createElement(noResultComponent) : "No more result"}
+            </div>
+        </div>
+    }
+}

packages/app/src/components/LoadMore/index.less

@@ -0,0 +1,14 @@
+.infinite-scroll {
+    min-height: 32vw;
+    position: relative;
+
+    .no-result {
+        text-align: center;
+    }
+
+    .list-loader {
+        height: 16vw;
+        margin: auto;
+        width: 16vw;
+    }
+}

packages/app/src/components/index.js

@@ -24,6 +24,7 @@ export { default as ImageUploader } from "./ImageUploader"
 export { default as ImageViewer } from "./ImageViewer"
 export { default as Login } from "./Login"
 export { default as Image } from "./Image"
+export { default as LoadMore } from "./LoadMore"
 
 // BUTTONS
 export { default as LikeButton } from "./LikeButton"