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 ( +
+ + +
+ ) + }, + 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