sliver/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

Use hoc definitions to be factor of factory

Browse source
This commit is contained in:
taehoon 2019-02-13 22:52:57 -05:00
parent 8f608e060c
commit f81b82b471
4 changed files with 22 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/user_settings/user_settings.js
View file

@ -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 () {

8
src/hocs/with_list/with_list.js
View file

@ -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

6
src/hocs/with_load_more/with_load_more.js
View file

@ -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"/>}

6
src/hocs/with_subscription/with_subscription.js
View file

@ -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"/>}