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 +++++++++++++--------------- src/components/user_profile/user_profile.vue | 12 +++++++-- 2 files changed, 27 insertions(+), 23 deletions(-) (limited to 'src/components/user_profile') 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 } } diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 89900f60..39f3c381 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -14,10 +14,18 @@ :user-id="userId" />
- + + +
- + + +
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') 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 32035217b8e04b0f178409f0f1f49d54296ce80c Mon Sep 17 00:00:00 2001 From: taehoon Date: Thu, 4 Apr 2019 00:00:21 -0400 Subject: clean up --- src/components/list/list.vue | 2 +- src/components/selectable_list/selectable_list.js | 11 +---------- src/components/user_profile/user_profile.vue | 4 ++-- src/components/user_settings/user_settings.vue | 8 ++++---- 4 files changed, 8 insertions(+), 17 deletions(-) (limited to 'src/components/user_profile') diff --git a/src/components/list/list.vue b/src/components/list/list.vue index 1159898d..7d62283a 100644 --- a/src/components/list/list.vue +++ b/src/components/list/list.vue @@ -18,7 +18,7 @@ export default { }, getKey: { type: Function, - default: item => item + default: item => item.id } } } diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js index 1fdd5a67..7856d725 100644 --- a/src/components/selectable_list/selectable_list.js +++ b/src/components/selectable_list/selectable_list.js @@ -6,16 +6,7 @@ const SelectableList = { List, Checkbox }, - props: { - items: { - type: Array, - default: () => [] - }, - getKey: { - type: Function, - default: item => item - } - }, + props: List.props, data () { return { selected: [] diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 39f3c381..8d78d2d2 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -16,14 +16,14 @@
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 741fbe3f..66ce6cea 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -200,9 +200,9 @@ - + @@ -214,9 +214,9 @@ - + -- cgit v1.2.3-70-g09d2 From fe7766bc618f9a994e2c0a9337deb7cce8b162cf Mon Sep 17 00:00:00 2001 From: taehoon Date: Thu, 4 Apr 2019 12:12:27 -0400 Subject: replace scope attributes by slot-scope --- src/components/follow_requests/follow_requests.vue | 2 +- src/components/selectable_list/selectable_list.vue | 2 +- src/components/user_profile/user_profile.vue | 4 ++-- src/components/user_search/user_search.vue | 2 +- src/components/user_settings/user_settings.vue | 4 ++-- src/components/who_to_follow/who_to_follow.vue | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) (limited to 'src/components/user_profile') diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue index 0970713b..8b1e8f94 100644 --- a/src/components/follow_requests/follow_requests.vue +++ b/src/components/follow_requests/follow_requests.vue @@ -5,7 +5,7 @@
-