Add withLoadMore hoc

2 files changed, 83 insertions, 0 deletions

diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
new file mode 100644
index 00000000..0f72ffd6
--- /dev/null
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -0,0 +1,73 @@
+import Vue from 'vue'
+import filter from 'lodash/filter'
+import './with_load_more.scss'
+
+const withLoadMore = (Component, fetchEntries, getEntries) => {
+  const originalProps = Component.props || []
+  const props = filter(originalProps, v => v !== 'entries')
+
+  return Vue.component('withLoadMore', {
+    render (createElement) {
+      return (
+        <div class="with-load-more">
+          <Component entries={this.entries} />
+          <div class="with-load-more-footer">
+            {this.error && <a onClick={this.fetch} class="alert error">{this.$t('general.generic_error')}</a>}
+            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
+            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetch}>{this.$t('general.more')}</a>}
+          </div>
+        </div>
+      )
+    },
+    props,
+    data () {
+      return {
+        loading: false,
+        bottomedOut: false,
+        error: false
+      }
+    },
+    computed: {
+      entries () {
+        return getEntries(this.$props, this.$store) || []
+      }
+    },
+    created () {
+      window.addEventListener('scroll', this.scrollLoad)
+      if (this.entries.length === 0) {
+        this.fetch()
+      }
+    },
+    destroyed () {
+      window.removeEventListener('scroll', this.scrollLoad)
+    },
+    methods: {
+      fetch () {
+        if (!this.loading) {
+          this.loading = true
+          fetchEntries(this.$props, this.$store).then((newEntries) => {
+            this.error = false
+            this.loading = false
+            this.bottomedOut = newEntries.length === 0
+          }).catch(() => {
+            this.error = true
+            this.loading = false
+          })
+        }
+      },
+      scrollLoad (e) {
+        const bodyBRect = document.body.getBoundingClientRect()
+        const height = Math.max(bodyBRect.height, -(bodyBRect.y))
+        if (this.loading === false &&
+          this.bottomedOut === false &&
+          this.$el.offsetHeight > 0 &&
+          (window.innerHeight + window.pageYOffset) >= (height - 750)
+        ) {
+          this.fetch()
+        }
+      }
+    }
+  })
+}
+
+export default withLoadMore
diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
new file mode 100644
index 00000000..af1e1fe8
--- /dev/null
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -0,0 +1,10 @@
+.with-load-more {
+  &-footer {
+    padding: 10px;
+    text-align: center;
+  }
+
+  .error {
+    font-size: 14px;
+  }
+}
\ No newline at end of file