From 12df967cb6f182f02318c166fe459ab86cc4f4ab Mon Sep 17 00:00:00 2001 From: taehoon Date: Wed, 13 Feb 2019 07:13:48 -0500 Subject: Add withLoadMore hoc --- src/hocs/with_load_more/with_load_more.js | 73 +++++++++++++++++++++++++++++ src/hocs/with_load_more/with_load_more.scss | 10 ++++ 2 files changed, 83 insertions(+) create mode 100644 src/hocs/with_load_more/with_load_more.js create mode 100644 src/hocs/with_load_more/with_load_more.scss (limited to 'src/hocs') diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js new file mode 100644 index 00000000..0f72ffd6 --- /dev/null +++ b/src/hocs/with_load_more/with_load_more.js @@ -0,0 +1,73 @@ +import Vue from 'vue' +import filter from 'lodash/filter' +import './with_load_more.scss' + +const withLoadMore = (Component, fetchEntries, getEntries) => { + const originalProps = Component.props || [] + const props = filter(originalProps, v => v !== 'entries') + + return Vue.component('withLoadMore', { + render (createElement) { + return ( +
+ +
+ {this.error && {this.$t('general.generic_error')}} + {!this.error && this.loading && } + {!this.error && !this.loading && !this.bottomedOut && {this.$t('general.more')}} +
+
+ ) + }, + props, + data () { + return { + loading: false, + bottomedOut: false, + error: false + } + }, + computed: { + entries () { + return getEntries(this.$props, this.$store) || [] + } + }, + created () { + window.addEventListener('scroll', this.scrollLoad) + if (this.entries.length === 0) { + this.fetch() + } + }, + destroyed () { + window.removeEventListener('scroll', this.scrollLoad) + }, + methods: { + fetch () { + if (!this.loading) { + this.loading = true + fetchEntries(this.$props, this.$store).then((newEntries) => { + this.error = false + this.loading = false + this.bottomedOut = newEntries.length === 0 + }).catch(() => { + this.error = true + this.loading = false + }) + } + }, + scrollLoad (e) { + const bodyBRect = document.body.getBoundingClientRect() + const height = Math.max(bodyBRect.height, -(bodyBRect.y)) + if (this.loading === false && + this.bottomedOut === false && + this.$el.offsetHeight > 0 && + (window.innerHeight + window.pageYOffset) >= (height - 750) + ) { + this.fetch() + } + } + } + }) +} + +export default withLoadMore diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss new file mode 100644 index 00000000..af1e1fe8 --- /dev/null +++ b/src/hocs/with_load_more/with_load_more.scss @@ -0,0 +1,10 @@ +.with-load-more { + &-footer { + padding: 10px; + text-align: center; + } + + .error { + font-size: 14px; + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From a817cc7cb464d804ccd8af2bbe22e9b738959a3a Mon Sep 17 00:00:00 2001 From: taehoon Date: Wed, 13 Feb 2019 12:05:23 -0500 Subject: Wire up ui to real blocks api data --- src/components/user_settings/user_settings.js | 4 ++-- src/hocs/with_load_more/with_load_more.js | 2 +- src/modules/users.js | 17 +++++++++++++++++ src/services/api/api.service.js | 17 +++++++++++++++++ .../backend_interactor_service.js | 2 ++ .../entity_normalizer/entity_normalizer.service.js | 1 + 6 files changed, 40 insertions(+), 3 deletions(-) (limited to 'src/hocs') diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 34ab99c7..5d8541f0 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -10,8 +10,8 @@ import withLoadMore from '../../hocs/with_load_more/with_load_more' const BlockListWithLoadMore = withLoadMore( UserList, - (props, $store) => $store.dispatch('addFriends', $store.state.users.currentUser.id), - (props, $store) => get($store.getters.userById($store.state.users.currentUser.id), 'friends', []) + (props, $store) => $store.dispatch('fetchBlocks'), + (props, $store) => get($store.state.users.currentUser, 'blocks', []) ) const UserSettings = { diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index 0f72ffd6..14d4303d 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -48,7 +48,7 @@ const withLoadMore = (Component, fetchEntries, getEntries) => { fetchEntries(this.$props, this.$store).then((newEntries) => { this.error = false this.loading = false - this.bottomedOut = newEntries.length === 0 + this.bottomedOut = !newEntries || newEntries.length === 0 }).catch(() => { this.error = true this.loading = false diff --git a/src/modules/users.js b/src/modules/users.js index 000cfd72..6ea4e0c9 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -85,6 +85,15 @@ export const mutations = { addNewUsers (state, users) { each(users, (user) => mergeOrAdd(state.users, state.usersObject, user)) }, + addBlocks (state, { blocks, page }) { + const user = state.currentUser + each(blocks, block => { + if (!find(user.blocks, { id: block.id })) { + user.blocks.push(block) + } + }) + user.blocksPage = page + 1 + }, setUserForStatus (state, status) { status.user = state.usersObject[status.user.id] }, @@ -137,6 +146,14 @@ const users = { store.rootState.api.backendInteractor.fetchUser({ id }) .then((user) => store.commit('addNewUsers', [user])) }, + fetchBlocks (store) { + const page = store.state.currentUser.blocksPage || 1 + return store.rootState.api.backendInteractor.fetchBlocks({ page }) + .then((blocks) => { + store.commit('addBlocks', { blocks, page }) + return blocks + }) + }, addFriends ({ rootState, commit }, fetchBy) { return new Promise((resolve, reject) => { const user = rootState.users.usersObject[fetchBy] diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 13d31d91..908edf7c 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -18,6 +18,7 @@ const MENTIONS_URL = '/api/statuses/mentions.json' const DM_TIMELINE_URL = '/api/statuses/dm_timeline.json' const FOLLOWERS_URL = '/api/statuses/followers.json' const FRIENDS_URL = '/api/statuses/friends.json' +const BLOCKS_URL = '/api/statuses/blocks.json' const FOLLOWING_URL = '/api/friendships/create.json' const UNFOLLOWING_URL = '/api/friendships/destroy.json' const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json' @@ -519,6 +520,21 @@ const fetchMutes = ({credentials}) => { }).then((data) => data.json()) } +const fetchBlocks = ({page, credentials}) => { + let url = BLOCKS_URL + if (page) { + url = url + `?page=${page}` + } + return fetch(url, { + headers: authHeaders(credentials) + }).then((data) => { + if (data.ok) { + return data.json() + } + throw new Error('Error fetching blocks', data) + }) +} + const suggestions = ({credentials}) => { return fetch(SUGGESTIONS_URL, { headers: authHeaders(credentials) @@ -560,6 +576,7 @@ const apiService = { fetchAllFollowing, setUserMute, fetchMutes, + fetchBlocks, register, getCaptcha, updateAvatar, diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js index 80c5cc5e..43c914d9 100644 --- a/src/services/backend_interactor_service/backend_interactor_service.js +++ b/src/services/backend_interactor_service/backend_interactor_service.js @@ -63,6 +63,7 @@ const backendInteractorService = (credentials) => { } const fetchMutes = () => apiService.fetchMutes({credentials}) + const fetchBlocks = (params) => apiService.fetchBlocks({credentials, ...params}) const fetchFollowRequests = () => apiService.fetchFollowRequests({credentials}) const getCaptcha = () => apiService.getCaptcha() @@ -94,6 +95,7 @@ const backendInteractorService = (credentials) => { startFetching, setUserMute, fetchMutes, + fetchBlocks, register, getCaptcha, updateAvatar, diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index d20ce77f..1192b6cc 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -120,6 +120,7 @@ export const parseUser = (data) => { if (data.pleroma) { output.follow_request_count = data.pleroma.follow_request_count } + output.blocks = [] return output } -- cgit v1.2.3-70-g09d2 From 94e6de11b7f9aebbc0130c836f334921fc70ae81 Mon Sep 17 00:00:00 2001 From: taehoon Date: Wed, 13 Feb 2019 14:30:12 -0500 Subject: Add withList hoc and remove UserList component --- src/components/user_list/user_list.js | 10 ---------- src/components/user_list/user_list.vue | 11 ----------- src/components/user_settings/user_settings.js | 4 +++- src/hocs/with_list/with_list.js | 27 +++++++++++++++++++++++++++ 4 files changed, 30 insertions(+), 22 deletions(-) delete mode 100644 src/components/user_list/user_list.js delete mode 100644 src/components/user_list/user_list.vue create mode 100644 src/hocs/with_list/with_list.js (limited to 'src/hocs') diff --git a/src/components/user_list/user_list.js b/src/components/user_list/user_list.js deleted file mode 100644 index 30e3d765..00000000 --- a/src/components/user_list/user_list.js +++ /dev/null @@ -1,10 +0,0 @@ -import BasicUserCard from '../basic_user_card/basic_user_card.vue' - -const UserList = { - props: ['entries'], - components: { - BasicUserCard - } -} - -export default UserList diff --git a/src/components/user_list/user_list.vue b/src/components/user_list/user_list.vue deleted file mode 100644 index 242c04fc..00000000 --- a/src/components/user_list/user_list.vue +++ /dev/null @@ -1,11 +0,0 @@ - - - \ No newline at end of file diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 5d8541f0..a46afda6 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -5,9 +5,11 @@ import TabSwitcher from '../tab_switcher/tab_switcher.js' import ImageCropper from '../image_cropper/image_cropper.vue' import StyleSwitcher from '../style_switcher/style_switcher.vue' import fileSizeFormatService from '../../services/file_size_format/file_size_format.js' -import UserList from '../user_list/user_list.vue' +import BasicUserCard from '../basic_user_card/basic_user_card.vue' import withLoadMore from '../../hocs/with_load_more/with_load_more' +import withList from '../../hocs/with_list/with_list' +const UserList = withList(BasicUserCard, entry => ({ user: entry })) const BlockListWithLoadMore = withLoadMore( UserList, (props, $store) => $store.dispatch('fetchBlocks'), diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js new file mode 100644 index 00000000..21aa288b --- /dev/null +++ b/src/hocs/with_list/with_list.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import map from 'lodash/map' + +const defaultEntryPropsGetter = entry => ({ entry }) +const defaultKeyGetter = entry => entry.id + +const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter) => { + return Vue.component('withList', { + render (createElement) { + return ( +
+ {map(this.entries, (entry, index) => { + const props = { + key: getKey(entry, index), + ...this.$props.entryProps, + ...getEntryProps(entry, index) + } + return + })} +
+ ) + }, + props: ['entries', 'entryProps'] + }) +} + +export default withList -- cgit v1.2.3-70-g09d2 From 82702748653c7630e4f337433d47863f52c57ee4 Mon Sep 17 00:00:00 2001 From: taehoon Date: Wed, 13 Feb 2019 20:59:26 -0500 Subject: Update hocs to pass parent-scope bindings to the wrapped component --- src/hocs/with_list/with_list.js | 11 +++++--- src/hocs/with_load_more/with_load_more.js | 42 +++++++++++++++++++------------ 2 files changed, 33 insertions(+), 20 deletions(-) (limited to 'src/hocs') diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js index 21aa288b..5ec37a2b 100644 --- a/src/hocs/with_list/with_list.js +++ b/src/hocs/with_list/with_list.js @@ -12,15 +12,18 @@ const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = d {map(this.entries, (entry, index) => { const props = { key: getKey(entry, index), - ...this.$props.entryProps, - ...getEntryProps(entry, index) + props: { + ...this.$props.entryProps, + ...getEntryProps(entry, index) + }, + on: this.$props.entryListeners } - return + return })} ) }, - props: ['entries', 'entryProps'] + props: ['entries', 'entryProps', 'entryListeners'] }) } diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index 14d4303d..8877f8d3 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -1,20 +1,28 @@ import Vue from 'vue' import filter from 'lodash/filter' +import isEmpty from 'lodash/isEmpty' import './with_load_more.scss' -const withLoadMore = (Component, fetchEntries, getEntries) => { +const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') => { const originalProps = Component.props || [] const props = filter(originalProps, v => v !== 'entries') return Vue.component('withLoadMore', { render (createElement) { + const props = { + props: { + ...this.$props, + [entriesPropName]: this.entries + }, + on: this.$listeners + } return (
- +
- {this.error && {this.$t('general.generic_error')}} + {this.error && {this.$t('general.generic_error')}} {!this.error && this.loading && } - {!this.error && !this.loading && !this.bottomedOut && {this.$t('general.more')}} + {!this.error && !this.loading && !this.bottomedOut && {this.$t('general.more')}}
) @@ -29,30 +37,32 @@ const withLoadMore = (Component, fetchEntries, getEntries) => { }, computed: { entries () { - return getEntries(this.$props, this.$store) || [] + return select(this.$props, this.$store) || [] } }, created () { window.addEventListener('scroll', this.scrollLoad) if (this.entries.length === 0) { - this.fetch() + this.fetchEntries() } }, destroyed () { window.removeEventListener('scroll', this.scrollLoad) }, methods: { - fetch () { + fetchEntries () { if (!this.loading) { this.loading = true - fetchEntries(this.$props, this.$store).then((newEntries) => { - this.error = false - this.loading = false - this.bottomedOut = !newEntries || newEntries.length === 0 - }).catch(() => { - this.error = true - this.loading = false - }) + this.error = false + fetch(this.$props, this.$store) + .then((newEntries) => { + this.loading = false + this.bottomedOut = isEmpty(newEntries) + }) + .catch(() => { + this.loading = false + this.error = true + }) } }, scrollLoad (e) { @@ -63,7 +73,7 @@ const withLoadMore = (Component, fetchEntries, getEntries) => { this.$el.offsetHeight > 0 && (window.innerHeight + window.pageYOffset) >= (height - 750) ) { - this.fetch() + this.fetchEntries() } } } -- cgit v1.2.3-70-g09d2 From 159e84532ebdae038e1263efe8832015597a5e20 Mon Sep 17 00:00:00 2001 From: taehoon Date: Wed, 13 Feb 2019 21:07:28 -0500 Subject: Add withSubscription hoc --- src/hocs/with_subscription/with_subscription.js | 65 +++++++++++++++++++++++ src/hocs/with_subscription/with_subscription.scss | 10 ++++ 2 files changed, 75 insertions(+) create mode 100644 src/hocs/with_subscription/with_subscription.js create mode 100644 src/hocs/with_subscription/with_subscription.scss (limited to 'src/hocs') diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js new file mode 100644 index 00000000..31fc106f --- /dev/null +++ b/src/hocs/with_subscription/with_subscription.js @@ -0,0 +1,65 @@ +import Vue from 'vue' +import filter from 'lodash/filter' +import isEmpty from 'lodash/isEmpty' +import './with_subscription.scss' + +const withSubscription = (Component, fetch, select, contentPropName = 'content') => { + const originalProps = Component.props || [] + const props = filter(originalProps, v => v !== 'content') + + return Vue.component('withSubscription', { + render (createElement) { + const props = { + props: { + ...this.$props, + [contentPropName]: this.fetchedData + }, + on: this.$listeners + } + return ( +
+ +
+ {this.error && {this.$t('general.generic_error')}} + {!this.error && this.loading && } +
+
+ ) + }, + props, + data () { + return { + loading: false, + error: false + } + }, + computed: { + fetchedData () { + return select(this.$props, this.$store) + } + }, + created () { + if (isEmpty(this.fetchedData)) { + this.fetchData() + } + }, + methods: { + fetchData () { + if (!this.loading) { + this.loading = true + this.error = false + fetch(this.$props, this.$store) + .then(() => { + this.loading = false + }) + .catch(() => { + this.error = true + this.loading = false + }) + } + } + } + }) +} + +export default withSubscription diff --git a/src/hocs/with_subscription/with_subscription.scss b/src/hocs/with_subscription/with_subscription.scss new file mode 100644 index 00000000..5114029d --- /dev/null +++ b/src/hocs/with_subscription/with_subscription.scss @@ -0,0 +1,10 @@ +.with-subscription { + &-footer { + padding: 10px; + text-align: center; + } + + .error { + font-size: 14px; + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 09315b27804beadb7590f8e908ae9d0eb1d6a992 Mon Sep 17 00:00:00 2001 From: taehoon Date: Wed, 13 Feb 2019 21:21:56 -0500 Subject: Add a prop to force-refresh data to withSubscription hoc --- src/components/user_settings/user_settings.vue | 2 +- src/hocs/with_subscription/with_subscription.js | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) (limited to 'src/hocs') diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 5cf21815..5bae583c 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -164,7 +164,7 @@
- +
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js index 31fc106f..633517e3 100644 --- a/src/hocs/with_subscription/with_subscription.js +++ b/src/hocs/with_subscription/with_subscription.js @@ -1,24 +1,25 @@ import Vue from 'vue' -import filter from 'lodash/filter' +import reject from 'lodash/reject' import isEmpty from 'lodash/isEmpty' +import omit from 'lodash/omit' import './with_subscription.scss' const withSubscription = (Component, fetch, select, contentPropName = 'content') => { const originalProps = Component.props || [] - const props = filter(originalProps, v => v !== 'content') + const props = reject(originalProps, v => v === 'content') return Vue.component('withSubscription', { render (createElement) { const props = { props: { - ...this.$props, + ...omit(this.$props, 'refresh'), [contentPropName]: this.fetchedData }, on: this.$listeners } return (
- + {!this.error && !this.loading && }
{this.error && {this.$t('general.generic_error')}} {!this.error && this.loading && } @@ -26,7 +27,7 @@ const withSubscription = (Component, fetch, select, contentPropName = 'content')
) }, - props, + props: [...props, 'refresh'], data () { return { loading: false, @@ -39,7 +40,7 @@ const withSubscription = (Component, fetch, select, contentPropName = 'content') } }, created () { - if (isEmpty(this.fetchedData)) { + if (this.refresh || isEmpty(this.fetchedData)) { this.fetchData() } }, -- cgit v1.2.3-70-g09d2 From f81b82b4714643ba396b69ca54b97259a36a6b9f Mon Sep 17 00:00:00 2001 From: taehoon Date: Wed, 13 Feb 2019 22:52:57 -0500 Subject: Use hoc definitions to be factor of factory --- src/components/user_settings/user_settings.js | 26 ++++++++++++------------- src/hocs/with_list/with_list.js | 8 ++++---- src/hocs/with_load_more/with_load_more.js | 6 +++--- src/hocs/with_subscription/with_subscription.js | 6 +++--- 4 files changed, 22 insertions(+), 24 deletions(-) (limited to 'src/hocs') diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 8114d5e2..21023841 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -10,21 +10,19 @@ import MuteCard from '../mute_card/mute_card.vue' import withSubscription from '../../hocs/with_subscription/with_subscription' import withList from '../../hocs/with_list/with_list' -const BlockList = withList(BlockCard, userId => ({ userId })) -const BlockListWithSubscription = withSubscription( - BlockList, - (props, $store) => $store.dispatch('fetchBlocks'), - (props, $store) => get($store.state.users.currentUser, 'blockIds', []), - 'entries' -) +const BlockList = withList({ getEntryProps: userId => ({ userId }) })(BlockCard) +const BlockListWithSubscription = withSubscription({ + fetch: (props, $store) => $store.dispatch('fetchBlocks'), + select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []), + contentPropName: 'entries' +})(BlockList) -const MuteList = withList(MuteCard, userId => ({ userId })) -const MuteListWithSubscription = withSubscription( - MuteList, - (props, $store) => $store.dispatch('fetchMutes'), - (props, $store) => get($store.state.users.currentUser, 'muteIds', []), - 'entries' -) +const MuteList = withList({ getEntryProps: userId => ({ userId }) })(MuteCard) +const MuteListWithSubscription = withSubscription({ + fetch: (props, $store) => $store.dispatch('fetchMutes'), + select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []), + contentPropName: 'entries' +})(MuteList) const UserSettings = { data () { diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js index 5ec37a2b..c31cdcb1 100644 --- a/src/hocs/with_list/with_list.js +++ b/src/hocs/with_list/with_list.js @@ -4,8 +4,8 @@ import map from 'lodash/map' const defaultEntryPropsGetter = entry => ({ entry }) const defaultKeyGetter = entry => entry.id -const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter) => { - return Vue.component('withList', { +const withList = ({ getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter }) => (ItemComponent) => ( + Vue.component('withList', { render (createElement) { return (
@@ -18,13 +18,13 @@ const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = d }, on: this.$props.entryListeners } - return + return })}
) }, props: ['entries', 'entryProps', 'entryListeners'] }) -} +) export default withList diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index 8877f8d3..28c741e3 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -3,8 +3,8 @@ import filter from 'lodash/filter' import isEmpty from 'lodash/isEmpty' import './with_load_more.scss' -const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') => { - const originalProps = Component.props || [] +const withLoadMore = ({ fetch, select, entriesPropName = 'entries' }) => (WrappedComponent) => { + const originalProps = WrappedComponent.props || [] const props = filter(originalProps, v => v !== 'entries') return Vue.component('withLoadMore', { @@ -18,7 +18,7 @@ const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') => } return (
- +
{this.error && {this.$t('general.generic_error')}} {!this.error && this.loading && } diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js index 633517e3..21630b40 100644 --- a/src/hocs/with_subscription/with_subscription.js +++ b/src/hocs/with_subscription/with_subscription.js @@ -4,8 +4,8 @@ import isEmpty from 'lodash/isEmpty' import omit from 'lodash/omit' import './with_subscription.scss' -const withSubscription = (Component, fetch, select, contentPropName = 'content') => { - const originalProps = Component.props || [] +const withSubscription = ({ fetch, select, contentPropName = 'content' }) => (WrapperComponent) => { + const originalProps = WrapperComponent.props || [] const props = reject(originalProps, v => v === 'content') return Vue.component('withSubscription', { @@ -19,7 +19,7 @@ const withSubscription = (Component, fetch, select, contentPropName = 'content') } return (
- {!this.error && !this.loading && } + {!this.error && !this.loading && }
{this.error && {this.$t('general.generic_error')}} {!this.error && this.loading && } -- cgit v1.2.3-70-g09d2 From 6d4d705c51a3d39e4de22a3320cfa61ef63a0066 Mon Sep 17 00:00:00 2001 From: taehoon Date: Wed, 13 Feb 2019 23:25:21 -0500 Subject: Rename some options and add comments to HOCs --- src/components/user_settings/user_settings.js | 4 ++-- src/hocs/with_list/with_list.js | 5 ++++- src/hocs/with_load_more/with_load_more.js | 8 ++++++-- src/hocs/with_subscription/with_subscription.js | 12 ++++++++---- 4 files changed, 20 insertions(+), 9 deletions(-) (limited to 'src/hocs') diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 5ad7c46f..06e72112 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -15,7 +15,7 @@ const BlockList = compose( withSubscription({ fetch: (props, $store) => $store.dispatch('fetchBlocks'), select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []), - contentPropName: 'entries' + childPropName: 'entries' }), withList({ getEntryProps: userId => ({ userId }) }) )(BlockCard) @@ -24,7 +24,7 @@ const MuteList = compose( withSubscription({ fetch: (props, $store) => $store.dispatch('fetchMutes'), select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []), - contentPropName: 'entries' + childPropName: 'entries' }), withList({ getEntryProps: userId => ({ userId }) }) )(MuteCard) diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js index c31cdcb1..e5770cee 100644 --- a/src/hocs/with_list/with_list.js +++ b/src/hocs/with_list/with_list.js @@ -4,7 +4,10 @@ import map from 'lodash/map' const defaultEntryPropsGetter = entry => ({ entry }) const defaultKeyGetter = entry => entry.id -const withList = ({ getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter }) => (ItemComponent) => ( +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', { render (createElement) { return ( diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index 28c741e3..459e026c 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -3,7 +3,11 @@ import filter from 'lodash/filter' import isEmpty from 'lodash/isEmpty' import './with_load_more.scss' -const withLoadMore = ({ fetch, select, entriesPropName = 'entries' }) => (WrappedComponent) => { +const withLoadMore = ({ + fetch, // function to fetch entries and return a promise + select, // function to select data from store + childPropName = 'entries' // name of the prop to be passed into the wrapped component +}) => (WrappedComponent) => { const originalProps = WrappedComponent.props || [] const props = filter(originalProps, v => v !== 'entries') @@ -12,7 +16,7 @@ const withLoadMore = ({ fetch, select, entriesPropName = 'entries' }) => (Wrappe const props = { props: { ...this.$props, - [entriesPropName]: this.entries + [childPropName]: this.entries }, on: this.$listeners } diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js index 21630b40..960c6d71 100644 --- a/src/hocs/with_subscription/with_subscription.js +++ b/src/hocs/with_subscription/with_subscription.js @@ -4,8 +4,12 @@ import isEmpty from 'lodash/isEmpty' import omit from 'lodash/omit' import './with_subscription.scss' -const withSubscription = ({ fetch, select, contentPropName = 'content' }) => (WrapperComponent) => { - const originalProps = WrapperComponent.props || [] +const withSubscription = ({ + fetch, // function to fetch entries and return a promise + select, // function to select data from store + childPropName = 'content' // name of the prop to be passed into the wrapped component +}) => (WrappedComponent) => { + const originalProps = WrappedComponent.props || [] const props = reject(originalProps, v => v === 'content') return Vue.component('withSubscription', { @@ -13,13 +17,13 @@ const withSubscription = ({ fetch, select, contentPropName = 'content' }) => (Wr const props = { props: { ...omit(this.$props, 'refresh'), - [contentPropName]: this.fetchedData + [childPropName]: this.fetchedData }, on: this.$listeners } return (
- {!this.error && !this.loading && } + {!this.error && !this.loading && }
{this.error && {this.$t('general.generic_error')}} {!this.error && this.loading && } -- cgit v1.2.3-70-g09d2 From 8680046c4e59e2296de6add1237f59745aa49e03 Mon Sep 17 00:00:00 2001 From: taehoon Date: Thu, 14 Feb 2019 03:12:52 -0500 Subject: Pass down slots into wrapped components --- src/hocs/with_load_more/with_load_more.js | 8 +++-- src/hocs/with_subscription/with_subscription.js | 46 ++++++++++++++++--------- 2 files changed, 36 insertions(+), 18 deletions(-) (limited to 'src/hocs') diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index 459e026c..e9265d2a 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -18,11 +18,15 @@ const withLoadMore = ({ ...this.$props, [childPropName]: this.entries }, - on: this.$listeners + on: this.$listeners, + scopedSlots: this.$scopedSlots } + const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot])) return (
- + + {children} +
{this.error && {this.$t('general.generic_error')}} {!this.error && this.loading && } diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js index 960c6d71..42ede7be 100644 --- a/src/hocs/with_subscription/with_subscription.js +++ b/src/hocs/with_subscription/with_subscription.js @@ -13,25 +13,39 @@ const withSubscription = ({ const props = reject(originalProps, v => v === 'content') return Vue.component('withSubscription', { + props: [ + ...props, + 'refresh' // boolean saying to force-fetch data whenever created + ], render (createElement) { - const props = { - props: { - ...omit(this.$props, 'refresh'), - [childPropName]: this.fetchedData - }, - on: this.$listeners - } - return ( -
- {!this.error && !this.loading && } -
- {this.error && {this.$t('general.generic_error')}} - {!this.error && this.loading && } + if (!this.error && !this.loading) { + const props = { + props: { + ...omit(this.$props, 'refresh'), + [childPropName]: this.fetchedData + }, + on: this.$listeners, + scopedSlots: this.$scopedSlots + } + const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot])) + return ( +
+ + {children} +
-
- ) + ) + } else { + return ( +
+ {this.error + ? {this.$t('general.generic_error')} + : + } +
+ ) + } }, - props: [...props, 'refresh'], data () { return { loading: false, -- cgit v1.2.3-70-g09d2 From b4a5b5203f9c6b35feaf2918baa1da6e344ae3c1 Mon Sep 17 00:00:00 2001 From: taehoon Date: Thu, 14 Feb 2019 03:14:30 -0500 Subject: Minor css improvements of hocs --- src/hocs/with_load_more/with_load_more.scss | 6 +++--- src/hocs/with_subscription/with_subscription.scss | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'src/hocs') diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss index af1e1fe8..1a0a9c40 100644 --- a/src/hocs/with_load_more/with_load_more.scss +++ b/src/hocs/with_load_more/with_load_more.scss @@ -2,9 +2,9 @@ &-footer { padding: 10px; text-align: center; - } - .error { - font-size: 14px; + .error { + font-size: 14px; + } } } \ No newline at end of file diff --git a/src/hocs/with_subscription/with_subscription.scss b/src/hocs/with_subscription/with_subscription.scss index 5114029d..52c7d94c 100644 --- a/src/hocs/with_subscription/with_subscription.scss +++ b/src/hocs/with_subscription/with_subscription.scss @@ -1,10 +1,10 @@ .with-subscription { - &-footer { + &-loading { padding: 10px; text-align: center; - } - .error { - font-size: 14px; + .error { + font-size: 14px; + } } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From a5162bd636880f53a8a47fbd547971f2aaead381 Mon Sep 17 00:00:00 2001 From: taehoon Date: Thu, 14 Feb 2019 03:16:37 -0500 Subject: Add note for empty state to the lists using slot --- src/components/user_settings/user_settings.vue | 8 ++++++-- src/hocs/with_list/with_list.js | 11 +++++++++-- src/hocs/with_list/with_list.scss | 6 ++++++ 3 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 src/hocs/with_list/with_list.scss (limited to 'src/hocs') diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 27f3e7cb..520a8cbe 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -164,11 +164,15 @@
- + + +
- + + +
diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js index e5770cee..896f8fc8 100644 --- a/src/hocs/with_list/with_list.js +++ b/src/hocs/with_list/with_list.js @@ -1,5 +1,7 @@ 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 @@ -9,6 +11,11 @@ const withList = ({ 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 (
@@ -23,10 +30,10 @@ const withList = ({ } return })} + {isEmpty(this.entries) && this.$slots.empty &&
{this.$slots.empty}
}
) - }, - props: ['entries', 'entryProps', 'entryListeners'] + } }) ) diff --git a/src/hocs/with_list/with_list.scss b/src/hocs/with_list/with_list.scss new file mode 100644 index 00000000..c6e13d5b --- /dev/null +++ b/src/hocs/with_list/with_list.scss @@ -0,0 +1,6 @@ +.with-list { + &-empty-content { + text-align: center; + padding: 10px; + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From eb22e7f462fb69b77278b5f8ad9cb900d2f9e0d9 Mon Sep 17 00:00:00 2001 From: taehoon Date: Wed, 20 Feb 2019 21:50:10 -0500 Subject: Use Object.entries instead of Object.keys --- src/hocs/with_load_more/with_load_more.js | 2 +- src/hocs/with_subscription/with_subscription.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src/hocs') diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index e9265d2a..e862a39b 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -21,7 +21,7 @@ const withLoadMore = ({ on: this.$listeners, scopedSlots: this.$scopedSlots } - const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot])) + const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value)) return (
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js index 42ede7be..1ac67cba 100644 --- a/src/hocs/with_subscription/with_subscription.js +++ b/src/hocs/with_subscription/with_subscription.js @@ -27,7 +27,7 @@ const withSubscription = ({ on: this.$listeners, scopedSlots: this.$scopedSlots } - const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot])) + const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value)) return (
-- cgit v1.2.3-70-g09d2