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