diff options
| -rw-r--r-- | src/components/user_settings/user_settings.js | 26 | ||||
| -rw-r--r-- | src/hocs/with_list/with_list.js | 8 | ||||
| -rw-r--r-- | src/hocs/with_load_more/with_load_more.js | 6 | ||||
| -rw-r--r-- | src/hocs/with_subscription/with_subscription.js | 6 |
4 files changed, 22 insertions, 24 deletions
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 8114d5e2..21023841 100644 --- a/src/components/user_settings/user_settings.js +++ b/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 () { diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js index 5ec37a2b..c31cdcb1 100644 --- a/src/hocs/with_list/with_list.js +++ b/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 diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index 8877f8d3..28c741e3 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/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"/>} diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js index 633517e3..21630b40 100644 --- a/src/hocs/with_subscription/with_subscription.js +++ b/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"/>} |