diff options
| author | Henry Jameson <me@hjkos.com> | 2021-04-25 12:50:17 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2021-04-25 12:50:17 +0300 |
| commit | 76a2e6befb3aea6e890bb3c2e001a4635d05091a (patch) | |
| tree | 1e7c422473eeb60962829055dccccc3f77a1002a /src/hocs/with_subscription/with_subscription.js | |
| parent | 1f5f612163bd1c359212c2e6832806f0dd606977 (diff) | |
remove Vue.component from hooks
Diffstat (limited to 'src/hocs/with_subscription/with_subscription.js')
| -rw-r--r-- | src/hocs/with_subscription/with_subscription.js | 94 |
1 files changed, 0 insertions, 94 deletions
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js deleted file mode 100644 index b1244276..00000000 --- a/src/hocs/with_subscription/with_subscription.js +++ /dev/null @@ -1,94 +0,0 @@ -import Vue from 'vue' -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 Vue.component('withSubscription', { - 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 ( - <div class="with-subscription"> - <WrappedComponent {...props}> - {children} - </WrappedComponent> - </div> - ) - } else { - return ( - <div class="with-subscription-loading"> - {this.error - ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a> - : <FAIcon spin icon="circle-notch"/> - } - </div> - ) - } - } - }) -} - -export default withSubscription |
