From 76a2e6befb3aea6e890bb3c2e001a4635d05091a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 25 Apr 2021 12:50:17 +0300 Subject: remove Vue.component from hooks --- src/hocs/with_subscription/with_subscription.jsx | 93 ++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 src/hocs/with_subscription/with_subscription.jsx (limited to 'src/hocs/with_subscription/with_subscription.jsx') diff --git a/src/hocs/with_subscription/with_subscription.jsx b/src/hocs/with_subscription/with_subscription.jsx new file mode 100644 index 00000000..7e590f73 --- /dev/null +++ b/src/hocs/with_subscription/with_subscription.jsx @@ -0,0 +1,93 @@ +import isEmpty from 'lodash/isEmpty' +import { getComponentProps } from '../../services/component_utils/component_utils' +import './with_subscription.scss' + +import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faCircleNotch +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faCircleNotch +) + +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 + additionalPropNames = [] // additional prop name list of the wrapper component +}) => (WrappedComponent) => { + const originalProps = Object.keys(getComponentProps(WrappedComponent)) + const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames) + + return { + props: [ + ...props, + 'refresh' // boolean saying to force-fetch data whenever created + ], + data () { + return { + loading: false, + error: false + } + }, + computed: { + fetchedData () { + return select(this.$props, this.$store) + } + }, + created () { + if (this.refresh || 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 + }) + } + } + }, + render (h) { + if (!this.error && !this.loading) { + const props = { + props: { + ...this.$props, + [childPropName]: this.fetchedData + }, + on: this.$listeners, + scopedSlots: this.$scopedSlots + } + const children = Object.entries(this.$slots).map(([key, value]) => h('template', { slot: key }, value)) + return ( +
+ + {children} + +
+ ) + } else { + return ( +
+ {this.error + ? {this.$t('general.generic_error')} + : + } +
+ ) + } + } + } +} + +export default withSubscription -- cgit v1.2.3-70-g09d2 From 72956e23436b5fb352652b25707a51be3a823b3d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 25 Apr 2021 13:40:08 +0300 Subject: fix HOCs --- src/hocs/with_load_more/with_load_more.jsx | 4 +++- src/hocs/with_subscription/with_subscription.jsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) (limited to 'src/hocs/with_subscription/with_subscription.jsx') diff --git a/src/hocs/with_load_more/with_load_more.jsx b/src/hocs/with_load_more/with_load_more.jsx index 7f491558..6cd198ed 100644 --- a/src/hocs/with_load_more/with_load_more.jsx +++ b/src/hocs/with_load_more/with_load_more.jsx @@ -1,3 +1,5 @@ +// eslint-disable-next-line no-unused +import { h } from 'vue' import isEmpty from 'lodash/isEmpty' import { getComponentProps } from '../../services/component_utils/component_utils' import './with_load_more.scss' @@ -78,7 +80,7 @@ const withLoadMore = ({ } } }, - render (h) { + render () { const props = { props: { ...this.$props, diff --git a/src/hocs/with_subscription/with_subscription.jsx b/src/hocs/with_subscription/with_subscription.jsx index 7e590f73..4529399e 100644 --- a/src/hocs/with_subscription/with_subscription.jsx +++ b/src/hocs/with_subscription/with_subscription.jsx @@ -1,3 +1,5 @@ +// eslint-disable-next-line no-unused +import { h } from 'vue' import isEmpty from 'lodash/isEmpty' import { getComponentProps } from '../../services/component_utils/component_utils' import './with_subscription.scss' @@ -58,7 +60,7 @@ const withSubscription = ({ } } }, - render (h) { + render () { if (!this.error && !this.loading) { const props = { props: { -- cgit v1.2.3-70-g09d2 From 5948d20f00a4b01bee143a617bea9ae40cb1243f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 18 Mar 2022 13:36:08 +0200 Subject: mutes and blocks tab works --- src/hocs/with_subscription/with_subscription.jsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) (limited to 'src/hocs/with_subscription/with_subscription.jsx') diff --git a/src/hocs/with_subscription/with_subscription.jsx b/src/hocs/with_subscription/with_subscription.jsx index 4529399e..5ba2662b 100644 --- a/src/hocs/with_subscription/with_subscription.jsx +++ b/src/hocs/with_subscription/with_subscription.jsx @@ -63,14 +63,11 @@ const withSubscription = ({ render () { if (!this.error && !this.loading) { const props = { - props: { - ...this.$props, - [childPropName]: this.fetchedData - }, - on: this.$listeners, - scopedSlots: this.$scopedSlots + ...this.$props, + [childPropName]: this.fetchedData + // on: this.$listeners // TODO } - const children = Object.entries(this.$slots).map(([key, value]) => h('template', { slot: key }, value)) + const children = this.$slots return (
-- cgit v1.2.3-70-g09d2 From 7afa6c9f406795a4fddb3c40a4011b321ee460bc Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 22 Mar 2022 20:22:28 +0200 Subject: listeners aren't actually used --- src/hocs/with_load_more/with_load_more.jsx | 2 +- src/hocs/with_subscription/with_subscription.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src/hocs/with_subscription/with_subscription.jsx') diff --git a/src/hocs/with_load_more/with_load_more.jsx b/src/hocs/with_load_more/with_load_more.jsx index e57f9b20..360b439a 100644 --- a/src/hocs/with_load_more/with_load_more.jsx +++ b/src/hocs/with_load_more/with_load_more.jsx @@ -81,10 +81,10 @@ const withLoadMore = ({ } }, render () { + console.log(this.$listeners) const props = { ...this.$props, [childPropName]: this.entries - // on: this.$listeners // TODO fix listeners } const children = this.$slots return ( diff --git a/src/hocs/with_subscription/with_subscription.jsx b/src/hocs/with_subscription/with_subscription.jsx index 5ba2662b..da1b2cc9 100644 --- a/src/hocs/with_subscription/with_subscription.jsx +++ b/src/hocs/with_subscription/with_subscription.jsx @@ -61,11 +61,11 @@ const withSubscription = ({ } }, render () { + console.log(this.$listeners) if (!this.error && !this.loading) { const props = { ...this.$props, [childPropName]: this.fetchedData - // on: this.$listeners // TODO } const children = this.$slots return ( -- cgit v1.2.3-70-g09d2 From 97930020706c938d9237cdc3770fab11b03bedc1 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 23 Mar 2022 16:53:57 +0200 Subject: cleanup console log --- src/hocs/with_subscription/with_subscription.jsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src/hocs/with_subscription/with_subscription.jsx') diff --git a/src/hocs/with_subscription/with_subscription.jsx b/src/hocs/with_subscription/with_subscription.jsx index da1b2cc9..d3f5506a 100644 --- a/src/hocs/with_subscription/with_subscription.jsx +++ b/src/hocs/with_subscription/with_subscription.jsx @@ -61,7 +61,6 @@ const withSubscription = ({ } }, render () { - console.log(this.$listeners) if (!this.error && !this.loading) { const props = { ...this.$props, -- cgit v1.2.3-70-g09d2