diff options
| -rw-r--r-- | src/components/user_settings/user_settings.js | 4 | ||||
| -rw-r--r-- | src/hocs/with_list/with_list.js | 5 | ||||
| -rw-r--r-- | src/hocs/with_load_more/with_load_more.js | 8 | ||||
| -rw-r--r-- | src/hocs/with_subscription/with_subscription.js | 12 |
4 files changed, 20 insertions, 9 deletions
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 5ad7c46f..06e72112 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -15,7 +15,7 @@ const BlockList = compose( withSubscription({ fetch: (props, $store) => $store.dispatch('fetchBlocks'), select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []), - contentPropName: 'entries' + childPropName: 'entries' }), withList({ getEntryProps: userId => ({ userId }) }) )(BlockCard) @@ -24,7 +24,7 @@ const MuteList = compose( withSubscription({ fetch: (props, $store) => $store.dispatch('fetchMutes'), select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []), - contentPropName: 'entries' + childPropName: 'entries' }), withList({ getEntryProps: userId => ({ userId }) }) )(MuteCard) diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js index c31cdcb1..e5770cee 100644 --- a/src/hocs/with_list/with_list.js +++ b/src/hocs/with_list/with_list.js @@ -4,7 +4,10 @@ import map from 'lodash/map' const defaultEntryPropsGetter = entry => ({ entry }) const defaultKeyGetter = entry => entry.id -const withList = ({ getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter }) => (ItemComponent) => ( +const withList = ({ + getEntryProps = defaultEntryPropsGetter, // function to accept entry and index values and return props to be passed into the item component + getKey = defaultKeyGetter // funciton to accept entry and index values and return key prop value +}) => (ItemComponent) => ( Vue.component('withList', { render (createElement) { return ( diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index 28c741e3..459e026c 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -3,7 +3,11 @@ import filter from 'lodash/filter' import isEmpty from 'lodash/isEmpty' import './with_load_more.scss' -const withLoadMore = ({ fetch, select, entriesPropName = 'entries' }) => (WrappedComponent) => { +const withLoadMore = ({ + fetch, // function to fetch entries and return a promise + select, // function to select data from store + childPropName = 'entries' // name of the prop to be passed into the wrapped component +}) => (WrappedComponent) => { const originalProps = WrappedComponent.props || [] const props = filter(originalProps, v => v !== 'entries') @@ -12,7 +16,7 @@ const withLoadMore = ({ fetch, select, entriesPropName = 'entries' }) => (Wrappe const props = { props: { ...this.$props, - [entriesPropName]: this.entries + [childPropName]: this.entries }, on: this.$listeners } diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js index 21630b40..960c6d71 100644 --- a/src/hocs/with_subscription/with_subscription.js +++ b/src/hocs/with_subscription/with_subscription.js @@ -4,8 +4,12 @@ import isEmpty from 'lodash/isEmpty' import omit from 'lodash/omit' import './with_subscription.scss' -const withSubscription = ({ fetch, select, contentPropName = 'content' }) => (WrapperComponent) => { - const originalProps = WrapperComponent.props || [] +const withSubscription = ({ + fetch, // function to fetch entries and return a promise + select, // function to select data from store + childPropName = 'content' // name of the prop to be passed into the wrapped component +}) => (WrappedComponent) => { + const originalProps = WrappedComponent.props || [] const props = reject(originalProps, v => v === 'content') return Vue.component('withSubscription', { @@ -13,13 +17,13 @@ const withSubscription = ({ fetch, select, contentPropName = 'content' }) => (Wr const props = { props: { ...omit(this.$props, 'refresh'), - [contentPropName]: this.fetchedData + [childPropName]: this.fetchedData }, on: this.$listeners } return ( <div class="with-subscription"> - {!this.error && !this.loading && <WrapperComponent {...props} />} + {!this.error && !this.loading && <WrappedComponent {...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"/>} |