Update hocs to pass parent-scope bindings to the wrapped component

src/hocs/with_list/with_list.js

@@ -12,15 +12,18 @@ const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = d
           {map(this.entries, (entry, index) => {
             const props = {
               key: getKey(entry, index),
-              ...this.$props.entryProps,
-              ...getEntryProps(entry, index)
+              props: {
+                ...this.$props.entryProps,
+                ...getEntryProps(entry, index)
+              },
+              on: this.$props.entryListeners
             }
-            return <Component {...{ attrs: props }} />
+            return <Component {...props} />
           })}
         </div>
       )
     },
-    props: ['entries', 'entryProps']
+    props: ['entries', 'entryProps', 'entryListeners']
   })
 }
 

src/hocs/with_load_more/with_load_more.js

@@ -1,20 +1,28 @@
 import Vue from 'vue'
 import filter from 'lodash/filter'
+import isEmpty from 'lodash/isEmpty'
 import './with_load_more.scss'
 
-const withLoadMore = (Component, fetchEntries, getEntries) => {
+const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') => {
   const originalProps = Component.props || []
   const props = filter(originalProps, v => v !== 'entries')
 
   return Vue.component('withLoadMore', {
     render (createElement) {
+      const props = {
+        props: {
+          ...this.$props,
+          [entriesPropName]: this.entries
+        },
+        on: this.$listeners
+      }
       return (
         <div class="with-load-more">
-          <Component entries={this.entries} />
+          <Component {...props} />
           <div class="with-load-more-footer">
-            {this.error && <a onClick={this.fetch} class="alert error">{this.$t('general.generic_error')}</a>}
+            {this.error && <a onClick={this.fetchEntries} 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>}
+            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
           </div>
         </div>
       )
@@ -29,30 +37,32 @@ const withLoadMore = (Component, fetchEntries, getEntries) => {
     },
     computed: {
       entries () {
-        return getEntries(this.$props, this.$store) || []
+        return select(this.$props, this.$store) || []
       }
     },
     created () {
       window.addEventListener('scroll', this.scrollLoad)
       if (this.entries.length === 0) {
-        this.fetch()
+        this.fetchEntries()
       }
     },
     destroyed () {
       window.removeEventListener('scroll', this.scrollLoad)
     },
     methods: {
-      fetch () {
+      fetchEntries () {
         if (!this.loading) {
           this.loading = true
-          fetchEntries(this.$props, this.$store).then((newEntries) => {
-            this.error = false
-            this.loading = false
-            this.bottomedOut = !newEntries || newEntries.length === 0
-          }).catch(() => {
-            this.error = true
-            this.loading = false
-          })
+          this.error = false
+          fetch(this.$props, this.$store)
+            .then((newEntries) => {
+              this.loading = false
+              this.bottomedOut = isEmpty(newEntries)
+            })
+            .catch(() => {
+              this.loading = false
+              this.error = true
+            })
         }
       },
       scrollLoad (e) {
@@ -63,7 +73,7 @@ const withLoadMore = (Component, fetchEntries, getEntries) => {
           this.$el.offsetHeight > 0 &&
           (window.innerHeight + window.pageYOffset) >= (height - 750)
         ) {
-          this.fetch()
+          this.fetchEntries()
         }
       }
     }