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 +++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 src/hocs/with_subscription/with_subscription.js (limited to 'src/hocs/with_subscription/with_subscription.js') 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 -- 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/with_subscription/with_subscription.js') 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/with_subscription/with_subscription.js') 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/with_subscription/with_subscription.js') 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/with_subscription/with_subscription.js') 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 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/with_subscription/with_subscription.js') 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