forked from AkkomaGang/akkoma-fe
refactor using List component
This commit is contained in:
parent
1cec2b6969
commit
738a3dc02d
2 changed files with 27 additions and 23 deletions
|
@ -4,30 +4,25 @@ import UserCard from '../user_card/user_card.vue'
|
||||||
import FollowCard from '../follow_card/follow_card.vue'
|
import FollowCard from '../follow_card/follow_card.vue'
|
||||||
import Timeline from '../timeline/timeline.vue'
|
import Timeline from '../timeline/timeline.vue'
|
||||||
import ModerationTools from '../moderation_tools/moderation_tools.vue'
|
import ModerationTools from '../moderation_tools/moderation_tools.vue'
|
||||||
|
import List from '../list/list.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'
|
import withList from '../../hocs/with_list/with_list'
|
||||||
|
|
||||||
const FollowerList = compose(
|
const FollowerList = withLoadMore({
|
||||||
withLoadMore({
|
|
||||||
fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
|
fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
|
||||||
select: (props, $store) => get($store.getters.findUser(props.userId), 'followerIds', []).map(id => $store.getters.findUser(id)),
|
select: (props, $store) => get($store.getters.findUser(props.userId), 'followerIds', []).map(id => $store.getters.findUser(id)),
|
||||||
destory: (props, $store) => $store.dispatch('clearFollowers', props.userId),
|
destory: (props, $store) => $store.dispatch('clearFollowers', props.userId),
|
||||||
childPropName: 'entries',
|
childPropName: 'items',
|
||||||
additionalPropNames: ['userId']
|
additionalPropNames: ['userId']
|
||||||
}),
|
})(List)
|
||||||
withList({ getEntryProps: user => ({ user }) })
|
|
||||||
)(FollowCard)
|
|
||||||
|
|
||||||
const FriendList = compose(
|
const FriendList = withLoadMore({
|
||||||
withLoadMore({
|
|
||||||
fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId),
|
fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId),
|
||||||
select: (props, $store) => get($store.getters.findUser(props.userId), 'friendIds', []).map(id => $store.getters.findUser(id)),
|
select: (props, $store) => get($store.getters.findUser(props.userId), 'friendIds', []).map(id => $store.getters.findUser(id)),
|
||||||
destory: (props, $store) => $store.dispatch('clearFriends', props.userId),
|
destory: (props, $store) => $store.dispatch('clearFriends', props.userId),
|
||||||
childPropName: 'entries',
|
childPropName: 'items',
|
||||||
additionalPropNames: ['userId']
|
additionalPropNames: ['userId']
|
||||||
}),
|
})(List)
|
||||||
withList({ getEntryProps: user => ({ user }) })
|
|
||||||
)(FollowCard)
|
|
||||||
|
|
||||||
const UserProfile = {
|
const UserProfile = {
|
||||||
data () {
|
data () {
|
||||||
|
@ -134,7 +129,8 @@ const UserProfile = {
|
||||||
Timeline,
|
Timeline,
|
||||||
FollowerList,
|
FollowerList,
|
||||||
FriendList,
|
FriendList,
|
||||||
ModerationTools
|
ModerationTools,
|
||||||
|
FollowCard
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,10 +14,18 @@
|
||||||
:user-id="userId"
|
:user-id="userId"
|
||||||
/>
|
/>
|
||||||
<div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
|
<div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
|
||||||
<FriendList :userId="userId" />
|
<FriendList :userId="userId">
|
||||||
|
<template slot="item" scope="p">
|
||||||
|
<FollowCard :key="p.item.id" :user="p.item" />
|
||||||
|
</template>
|
||||||
|
</FriendList>
|
||||||
</div>
|
</div>
|
||||||
<div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
|
<div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
|
||||||
<FollowerList :userId="userId" :entryProps="{noFollowsYou: isUs}" />
|
<FollowerList :userId="userId">
|
||||||
|
<template slot="item" scope="p">
|
||||||
|
<FollowCard :key="p.item.id" :user="p.item" :noFollowsYou="isUs" />
|
||||||
|
</template>
|
||||||
|
</FollowerList>
|
||||||
</div>
|
</div>
|
||||||
<Timeline
|
<Timeline
|
||||||
:label="$t('user_card.media')"
|
:label="$t('user_card.media')"
|
||||||
|
|
Loading…
Reference in a new issue