use reusable List vue component instead of withList hoc

Using slot is the preferred way in vue
This commit is contained in:
taehoon 2019-04-03 22:17:42 -04:00
parent 4b292564d8
commit 1cec2b6969
3 changed files with 49 additions and 20 deletions

View file

@ -0,0 +1,28 @@
<template>
<div class="list">
<slot name="item" v-for="item in items" :item="item" />
<div class="list-empty-content faint" v-if="items.length === 0">
<slot name="empty" />
</div>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
default: () => []
}
}
}
</script>
<style lang="scss">
.list {
&-empty-content {
text-align: center;
padding: 10px;
}
}
</style>

View file

@ -10,29 +10,24 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js' import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
import BlockCard from '../block_card/block_card.vue' import BlockCard from '../block_card/block_card.vue'
import MuteCard from '../mute_card/mute_card.vue' import MuteCard from '../mute_card/mute_card.vue'
import List from '../list/list.vue'
import EmojiInput from '../emoji-input/emoji-input.vue' import EmojiInput from '../emoji-input/emoji-input.vue'
import Autosuggest from '../autosuggest/autosuggest.vue' import Autosuggest from '../autosuggest/autosuggest.vue'
import withSubscription from '../../hocs/with_subscription/with_subscription' import withSubscription from '../../hocs/with_subscription/with_subscription'
import withList from '../../hocs/with_list/with_list' import withList from '../../hocs/with_list/with_list'
import userSearchApi from '../../services/new_api/user_search.js' import userSearchApi from '../../services/new_api/user_search.js'
const BlockList = compose( const BlockList = withSubscription({
withSubscription({
fetch: (props, $store) => $store.dispatch('fetchBlocks'), fetch: (props, $store) => $store.dispatch('fetchBlocks'),
select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []), select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
childPropName: 'entries' childPropName: 'items'
}), })(List)
withList({ getEntryProps: userId => ({ userId }) })
)(BlockCard)
const MuteList = compose( const MuteList = withSubscription({
withSubscription({
fetch: (props, $store) => $store.dispatch('fetchMutes'), fetch: (props, $store) => $store.dispatch('fetchMutes'),
select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []), select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
childPropName: 'entries' childPropName: 'items'
}), })(List)
withList({ getEntryProps: userId => ({ userId }) })
)(MuteCard)
const UserSettings = { const UserSettings = {
data () { data () {

View file

@ -200,9 +200,12 @@
<BlockCard slot-scope="row" :userId="row.item"/> <BlockCard slot-scope="row" :userId="row.item"/>
</Autosuggest> </Autosuggest>
</div> </div>
<block-list :refresh="true"> <BlockList :refresh="true">
<template slot="item" scope="p">
<BlockCard :key="p.item" :userId="p.item" />
</template>
<template slot="empty">{{$t('settings.no_blocks')}}</template> <template slot="empty">{{$t('settings.no_blocks')}}</template>
</block-list> </BlockList>
</div> </div>
<div :label="$t('settings.mutes_tab')"> <div :label="$t('settings.mutes_tab')">
@ -211,9 +214,12 @@
<MuteCard slot-scope="row" :userId="row.item"/> <MuteCard slot-scope="row" :userId="row.item"/>
</Autosuggest> </Autosuggest>
</div> </div>
<mute-list :refresh="true"> <MuteList :refresh="true">
<template slot="item" scope="p">
<MuteCard :key="p.item" :userId="p.item" />
</template>
<template slot="empty">{{$t('settings.no_mutes')}}</template> <template slot="empty">{{$t('settings.no_mutes')}}</template>
</mute-list> </MuteList>
</div> </div>
</tab-switcher> </tab-switcher>
</div> </div>