Add withList hoc and remove UserList component

This commit is contained in:
taehoon 2019-02-13 14:30:12 -05:00
parent a817cc7cb4
commit 94e6de11b7
4 changed files with 30 additions and 22 deletions

View file

@ -1,10 +0,0 @@
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
const UserList = {
props: ['entries'],
components: {
BasicUserCard
}
}
export default UserList

View file

@ -1,11 +0,0 @@
<template functional>
<div class="user-list">
<basic-user-card
v-for="entry in entries"
:key="entry.id"
:user="entry"
/>
</div>
</template>
<script src="./user_list.js"></script>

View file

@ -5,9 +5,11 @@ import TabSwitcher from '../tab_switcher/tab_switcher.js'
import ImageCropper from '../image_cropper/image_cropper.vue' import ImageCropper from '../image_cropper/image_cropper.vue'
import StyleSwitcher from '../style_switcher/style_switcher.vue' import StyleSwitcher from '../style_switcher/style_switcher.vue'
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js' import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
import UserList from '../user_list/user_list.vue' import BasicUserCard from '../basic_user_card/basic_user_card.vue'
import withLoadMore from '../../hocs/with_load_more/with_load_more' import withLoadMore from '../../hocs/with_load_more/with_load_more'
import withList from '../../hocs/with_list/with_list'
const UserList = withList(BasicUserCard, entry => ({ user: entry }))
const BlockListWithLoadMore = withLoadMore( const BlockListWithLoadMore = withLoadMore(
UserList, UserList,
(props, $store) => $store.dispatch('fetchBlocks'), (props, $store) => $store.dispatch('fetchBlocks'),

View file

@ -0,0 +1,27 @@
import Vue from 'vue'
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', {
render (createElement) {
return (
<div class="with-list">
{map(this.entries, (entry, index) => {
const props = {
key: getKey(entry, index),
...this.$props.entryProps,
...getEntryProps(entry, index)
}
return <Component {...{ attrs: props }} />
})}
</div>
)
},
props: ['entries', 'entryProps']
})
}
export default withList