Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

refactor using List component

Browse source
This commit is contained in:
taehoon 2019-04-03 22:28:08 -04:00
parent 1cec2b6969
commit 738a3dc02d
2 changed files with 27 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/user_profile/user_profile.js
View file

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

12
src/components/user_profile/user_profile.vue
View file

@ -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')"