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 BlockCard from '../block_card/block_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 Autosuggest from '../autosuggest/autosuggest.vue'
import withSubscription from '../../hocs/with_subscription/with_subscription'
import withList from '../../hocs/with_list/with_list'
import userSearchApi from '../../services/new_api/user_search.js'
const BlockList = compose(
withSubscription({
fetch: (props, $store) => $store.dispatch('fetchBlocks'),
select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
childPropName: 'entries'
}),
withList({ getEntryProps: userId => ({ userId }) })
)(BlockCard)
const BlockList = withSubscription({
fetch: (props, $store) => $store.dispatch('fetchBlocks'),
select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
childPropName: 'items'
})(List)
const MuteList = compose(
withSubscription({
fetch: (props, $store) => $store.dispatch('fetchMutes'),
select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
childPropName: 'entries'
}),
withList({ getEntryProps: userId => ({ userId }) })
)(MuteCard)
const MuteList = withSubscription({
fetch: (props, $store) => $store.dispatch('fetchMutes'),
select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
childPropName: 'items'
})(List)
const UserSettings = {
data () {

View file

@ -200,9 +200,12 @@
<BlockCard slot-scope="row" :userId="row.item"/>
</Autosuggest>
</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>
</block-list>
</BlockList>
</div>
<div :label="$t('settings.mutes_tab')">
@ -211,9 +214,12 @@
<MuteCard slot-scope="row" :userId="row.item"/>
</Autosuggest>
</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>
</mute-list>
</MuteList>
</div>
</tab-switcher>
</div>