From 8680046c4e59e2296de6add1237f59745aa49e03 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 14 Feb 2019 03:12:52 -0500
Subject: Pass down slots into wrapped components

---
 src/hocs/with_subscription/with_subscription.js | 46 ++++++++++++++++---------
 1 file changed, 30 insertions(+), 16 deletions(-)

(limited to 'src/hocs/with_subscription/with_subscription.js')

diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
index 960c6d71..42ede7be 100644
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -13,25 +13,39 @@ const withSubscription = ({
   const props = reject(originalProps, v => v === 'content')
 
   return Vue.component('withSubscription', {
+    props: [
+      ...props,
+      'refresh'               // boolean saying to force-fetch data whenever created
+    ],
     render (createElement) {
-      const props = {
-        props: {
-          ...omit(this.$props, 'refresh'),
-          [childPropName]: this.fetchedData
-        },
-        on: this.$listeners
-      }
-      return (
-        <div class="with-subscription">
-          {!this.error && !this.loading && <WrappedComponent {...props} />}
-          <div class="with-subscription-footer">
-            {this.error && <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>}
-            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
+      if (!this.error && !this.loading) {
+        const props = {
+          props: {
+            ...omit(this.$props, 'refresh'),
+            [childPropName]: this.fetchedData
+          },
+          on: this.$listeners,
+          scopedSlots: this.$scopedSlots
+        }
+        const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot]))
+        return (
+          <div class="with-subscription">
+            <WrappedComponent {...props}>
+              {children}
+            </WrappedComponent>
           </div>
-        </div>
-      )
+        )
+      } else {
+        return (
+          <div class="with-subscription-loading">
+            {this.error
+              ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
+              : <i class="icon-spin3 animate-spin"/>
+            }
+          </div>
+        )
+      }
     },
-    props: [...props, 'refresh'],
     data () {
       return {
         loading: false,
-- 
cgit v1.2.3-70-g09d2