Use hoc definitions to be factor of factory

src/components/user_settings/user_settings.js

@@ -10,21 +10,19 @@ import MuteCard from '../mute_card/mute_card.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
 import withList from '../../hocs/with_list/with_list'
 
-const BlockList = withList(BlockCard, userId => ({ userId }))
-const BlockListWithSubscription = withSubscription(
-  BlockList,
-  (props, $store) => $store.dispatch('fetchBlocks'),
-  (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
-  'entries'
-)
+const BlockList = withList({ getEntryProps: userId => ({ userId }) })(BlockCard)
+const BlockListWithSubscription = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchBlocks'),
+  select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+  contentPropName: 'entries'
+})(BlockList)
 
-const MuteList = withList(MuteCard, userId => ({ userId }))
-const MuteListWithSubscription = withSubscription(
-  MuteList,
-  (props, $store) => $store.dispatch('fetchMutes'),
-  (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
-  'entries'
-)
+const MuteList = withList({ getEntryProps: userId => ({ userId }) })(MuteCard)
+const MuteListWithSubscription = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchMutes'),
+  select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+  contentPropName: 'entries'
+})(MuteList)
 
 const UserSettings = {
   data () {

src/hocs/with_list/with_list.js

@@ -4,8 +4,8 @@ import map from 'lodash/map'
 const defaultEntryPropsGetter = entry => ({ entry })
 const defaultKeyGetter = entry => entry.id
 
-const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter) => {
-  return Vue.component('withList', {
+const withList = ({ getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter }) => (ItemComponent) => (
+  Vue.component('withList', {
     render (createElement) {
       return (
         <div class="with-list">
@@ -18,13 +18,13 @@ const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = d
               },
               on: this.$props.entryListeners
             }
-            return <Component {...props} />
+            return <ItemComponent {...props} />
           })}
         </div>
       )
     },
     props: ['entries', 'entryProps', 'entryListeners']
   })
-}
+)
 
 export default withList

src/hocs/with_load_more/with_load_more.js

@@ -3,8 +3,8 @@ import filter from 'lodash/filter'
 import isEmpty from 'lodash/isEmpty'
 import './with_load_more.scss'
 
-const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') => {
-  const originalProps = Component.props || []
+const withLoadMore = ({ fetch, select, entriesPropName = 'entries' }) => (WrappedComponent) => {
+  const originalProps = WrappedComponent.props || []
   const props = filter(originalProps, v => v !== 'entries')
 
   return Vue.component('withLoadMore', {
@@ -18,7 +18,7 @@ const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') =>
       }
       return (
         <div class="with-load-more">
-          <Component {...props} />
+          <WrappedComponent {...props} />
           <div class="with-load-more-footer">
             {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"/>}

src/hocs/with_subscription/with_subscription.js

@@ -4,8 +4,8 @@ import isEmpty from 'lodash/isEmpty'
 import omit from 'lodash/omit'
 import './with_subscription.scss'
 
-const withSubscription = (Component, fetch, select, contentPropName = 'content') => {
-  const originalProps = Component.props || []
+const withSubscription = ({ fetch, select, contentPropName = 'content' }) => (WrapperComponent) => {
+  const originalProps = WrapperComponent.props || []
   const props = reject(originalProps, v => v === 'content')
 
   return Vue.component('withSubscription', {
@@ -19,7 +19,7 @@ const withSubscription = (Component, fetch, select, contentPropName = 'content')
       }
       return (
         <div class="with-subscription">
-          {!this.error && !this.loading && <Component {...props} />}
+          {!this.error && !this.loading && <WrapperComponent {...props} />}
           <div class="with-subscription-footer">
             {this.error && <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>}
             {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}