aboutsummaryrefslogtreecommitdiff
path: root/src/hocs/with_subscription/with_subscription.js
diff options
context:
space:
mode:
authorHenry Jameson <me@hjkos.com>2021-04-25 12:50:17 +0300
committerHenry Jameson <me@hjkos.com>2021-04-25 12:50:17 +0300
commit76a2e6befb3aea6e890bb3c2e001a4635d05091a (patch)
tree1e7c422473eeb60962829055dccccc3f77a1002a /src/hocs/with_subscription/with_subscription.js
parent1f5f612163bd1c359212c2e6832806f0dd606977 (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.js94
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