From 738a3dc02da7a3633137e8f0831ec8404e1ba85b Mon Sep 17 00:00:00 2001 From: taehoon Date: Wed, 3 Apr 2019 22:28:08 -0400 Subject: refactor using List component --- src/components/user_profile/user_profile.js | 38 +++++++++++++---------------- 1 file changed, 17 insertions(+), 21 deletions(-) (limited to 'src/components/user_profile/user_profile.js') diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index cb465d66..8dbf8dac 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -4,30 +4,25 @@ import UserCard from '../user_card/user_card.vue' import FollowCard from '../follow_card/follow_card.vue' import Timeline from '../timeline/timeline.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 withList from '../../hocs/with_list/with_list' -const FollowerList = compose( - withLoadMore({ - fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId), - select: (props, $store) => get($store.getters.findUser(props.userId), 'followerIds', []).map(id => $store.getters.findUser(id)), - destory: (props, $store) => $store.dispatch('clearFollowers', props.userId), - childPropName: 'entries', - additionalPropNames: ['userId'] - }), - withList({ getEntryProps: user => ({ user }) }) -)(FollowCard) +const FollowerList = withLoadMore({ + fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId), + select: (props, $store) => get($store.getters.findUser(props.userId), 'followerIds', []).map(id => $store.getters.findUser(id)), + destory: (props, $store) => $store.dispatch('clearFollowers', props.userId), + childPropName: 'items', + additionalPropNames: ['userId'] +})(List) -const FriendList = compose( - withLoadMore({ - fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId), - select: (props, $store) => get($store.getters.findUser(props.userId), 'friendIds', []).map(id => $store.getters.findUser(id)), - destory: (props, $store) => $store.dispatch('clearFriends', props.userId), - childPropName: 'entries', - additionalPropNames: ['userId'] - }), - withList({ getEntryProps: user => ({ user }) }) -)(FollowCard) +const FriendList = withLoadMore({ + fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId), + select: (props, $store) => get($store.getters.findUser(props.userId), 'friendIds', []).map(id => $store.getters.findUser(id)), + destory: (props, $store) => $store.dispatch('clearFriends', props.userId), + childPropName: 'items', + additionalPropNames: ['userId'] +})(List) const UserProfile = { data () { @@ -134,7 +129,8 @@ const UserProfile = { Timeline, FollowerList, FriendList, - ModerationTools + ModerationTools, + FollowCard } } -- cgit v1.2.3-70-g09d2 From 0bf451bb36c888fe98aa186239ba35d72e533cc7 Mon Sep 17 00:00:00 2001 From: taehoon Date: Wed, 3 Apr 2019 22:31:17 -0400 Subject: remove withList hoc --- src/components/user_profile/user_profile.js | 2 -- src/components/user_settings/user_settings.js | 2 -- src/hocs/with_list/with_list.js | 40 --------------------------- src/hocs/with_list/with_list.scss | 6 ---- 4 files changed, 50 deletions(-) delete mode 100644 src/hocs/with_list/with_list.js delete mode 100644 src/hocs/with_list/with_list.scss (limited to 'src/components/user_profile/user_profile.js') diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 8dbf8dac..1ef247cd 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -1,4 +1,3 @@ -import { compose } from 'vue-compose' import get from 'lodash/get' import UserCard from '../user_card/user_card.vue' import FollowCard from '../follow_card/follow_card.vue' @@ -6,7 +5,6 @@ import Timeline from '../timeline/timeline.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 withList from '../../hocs/with_list/with_list' const FollowerList = withLoadMore({ fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId), diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 057d1cec..2bbb01db 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -1,4 +1,3 @@ -import { compose } from 'vue-compose' import unescape from 'lodash/unescape' import get from 'lodash/get' import map from 'lodash/map' @@ -14,7 +13,6 @@ 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 = withSubscription({ diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js deleted file mode 100644 index 896f8fc8..00000000 --- a/src/hocs/with_list/with_list.js +++ /dev/null @@ -1,40 +0,0 @@ -import Vue from 'vue' -import map from 'lodash/map' -import isEmpty from 'lodash/isEmpty' -import './with_list.scss' - -const defaultEntryPropsGetter = entry => ({ entry }) -const defaultKeyGetter = entry => entry.id - -const withList = ({ - getEntryProps = defaultEntryPropsGetter, // function to accept entry and index values and return props to be passed into the item component - getKey = defaultKeyGetter // funciton to accept entry and index values and return key prop value -}) => (ItemComponent) => ( - Vue.component('withList', { - props: [ - 'entries', // array of entry - 'entryProps', // additional props to be passed into each entry - 'entryListeners' // additional event listeners to be passed into each entry - ], - render (createElement) { - return ( -
- {map(this.entries, (entry, index) => { - const props = { - key: getKey(entry, index), - props: { - ...this.$props.entryProps, - ...getEntryProps(entry, index) - }, - on: this.$props.entryListeners - } - return - })} - {isEmpty(this.entries) && this.$slots.empty &&
{this.$slots.empty}
} -
- ) - } - }) -) - -export default withList diff --git a/src/hocs/with_list/with_list.scss b/src/hocs/with_list/with_list.scss deleted file mode 100644 index c6e13d5b..00000000 --- a/src/hocs/with_list/with_list.scss +++ /dev/null @@ -1,6 +0,0 @@ -.with-list { - &-empty-content { - text-align: center; - padding: 10px; - } -} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From bb38a4311796c7d3c40e63585544c744a44402c1 Mon Sep 17 00:00:00 2001 From: taehoon Date: Tue, 9 Apr 2019 14:46:47 -0400 Subject: fix typos --- src/components/user_profile/user_profile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components/user_profile/user_profile.js') diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 1ef247cd..4eddb8b1 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -9,7 +9,7 @@ import withLoadMore from '../../hocs/with_load_more/with_load_more' const FollowerList = withLoadMore({ fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId), select: (props, $store) => get($store.getters.findUser(props.userId), 'followerIds', []).map(id => $store.getters.findUser(id)), - destory: (props, $store) => $store.dispatch('clearFollowers', props.userId), + destroy: (props, $store) => $store.dispatch('clearFollowers', props.userId), childPropName: 'items', additionalPropNames: ['userId'] })(List) @@ -17,7 +17,7 @@ const FollowerList = withLoadMore({ const FriendList = withLoadMore({ fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId), select: (props, $store) => get($store.getters.findUser(props.userId), 'friendIds', []).map(id => $store.getters.findUser(id)), - destory: (props, $store) => $store.dispatch('clearFriends', props.userId), + destroy: (props, $store) => $store.dispatch('clearFriends', props.userId), childPropName: 'items', additionalPropNames: ['userId'] })(List) -- cgit v1.2.3-70-g09d2