From 94e6de11b7f9aebbc0130c836f334921fc70ae81 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 14:30:12 -0500
Subject: Add withList hoc and remove UserList component

---
 src/hocs/with_list/with_list.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/hocs/with_list/with_list.js

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

diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
new file mode 100644
index 00000000..21aa288b
--- /dev/null
+++ b/src/hocs/with_list/with_list.js
@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import map from 'lodash/map'
+
+const defaultEntryPropsGetter = entry => ({ entry })
+const defaultKeyGetter = entry => entry.id
+
+const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter) => {
+  return Vue.component('withList', {
+    render (createElement) {
+      return (
+        <div class="with-list">
+          {map(this.entries, (entry, index) => {
+            const props = {
+              key: getKey(entry, index),
+              ...this.$props.entryProps,
+              ...getEntryProps(entry, index)
+            }
+            return <Component {...{ attrs: props }} />
+          })}
+        </div>
+      )
+    },
+    props: ['entries', 'entryProps']
+  })
+}
+
+export default withList
-- 
cgit v1.2.3-70-g09d2


From 82702748653c7630e4f337433d47863f52c57ee4 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 20:59:26 -0500
Subject: Update hocs to pass parent-scope bindings to the wrapped component

---
 src/hocs/with_list/with_list.js           | 11 +++++---
 src/hocs/with_load_more/with_load_more.js | 42 +++++++++++++++++++------------
 2 files changed, 33 insertions(+), 20 deletions(-)

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

diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
index 21aa288b..5ec37a2b 100644
--- a/src/hocs/with_list/with_list.js
+++ b/src/hocs/with_list/with_list.js
@@ -12,15 +12,18 @@ const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = d
           {map(this.entries, (entry, index) => {
             const props = {
               key: getKey(entry, index),
-              ...this.$props.entryProps,
-              ...getEntryProps(entry, index)
+              props: {
+                ...this.$props.entryProps,
+                ...getEntryProps(entry, index)
+              },
+              on: this.$props.entryListeners
             }
-            return <Component {...{ attrs: props }} />
+            return <Component {...props} />
           })}
         </div>
       )
     },
-    props: ['entries', 'entryProps']
+    props: ['entries', 'entryProps', 'entryListeners']
   })
 }
 
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 14d4303d..8877f8d3 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -1,20 +1,28 @@
 import Vue from 'vue'
 import filter from 'lodash/filter'
+import isEmpty from 'lodash/isEmpty'
 import './with_load_more.scss'
 
-const withLoadMore = (Component, fetchEntries, getEntries) => {
+const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') => {
   const originalProps = Component.props || []
   const props = filter(originalProps, v => v !== 'entries')
 
   return Vue.component('withLoadMore', {
     render (createElement) {
+      const props = {
+        props: {
+          ...this.$props,
+          [entriesPropName]: this.entries
+        },
+        on: this.$listeners
+      }
       return (
         <div class="with-load-more">
-          <Component entries={this.entries} />
+          <Component {...props} />
           <div class="with-load-more-footer">
-            {this.error && <a onClick={this.fetch} class="alert error">{this.$t('general.generic_error')}</a>}
+            {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
             {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
-            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetch}>{this.$t('general.more')}</a>}
+            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
           </div>
         </div>
       )
@@ -29,30 +37,32 @@ const withLoadMore = (Component, fetchEntries, getEntries) => {
     },
     computed: {
       entries () {
-        return getEntries(this.$props, this.$store) || []
+        return select(this.$props, this.$store) || []
       }
     },
     created () {
       window.addEventListener('scroll', this.scrollLoad)
       if (this.entries.length === 0) {
-        this.fetch()
+        this.fetchEntries()
       }
     },
     destroyed () {
       window.removeEventListener('scroll', this.scrollLoad)
     },
     methods: {
-      fetch () {
+      fetchEntries () {
         if (!this.loading) {
           this.loading = true
-          fetchEntries(this.$props, this.$store).then((newEntries) => {
-            this.error = false
-            this.loading = false
-            this.bottomedOut = !newEntries || newEntries.length === 0
-          }).catch(() => {
-            this.error = true
-            this.loading = false
-          })
+          this.error = false
+          fetch(this.$props, this.$store)
+            .then((newEntries) => {
+              this.loading = false
+              this.bottomedOut = isEmpty(newEntries)
+            })
+            .catch(() => {
+              this.loading = false
+              this.error = true
+            })
         }
       },
       scrollLoad (e) {
@@ -63,7 +73,7 @@ const withLoadMore = (Component, fetchEntries, getEntries) => {
           this.$el.offsetHeight > 0 &&
           (window.innerHeight + window.pageYOffset) >= (height - 750)
         ) {
-          this.fetch()
+          this.fetchEntries()
         }
       }
     }
-- 
cgit v1.2.3-70-g09d2


From f81b82b4714643ba396b69ca54b97259a36a6b9f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 22:52:57 -0500
Subject: Use hoc definitions to be factor of factory

---
 src/components/user_settings/user_settings.js   | 26 ++++++++++++-------------
 src/hocs/with_list/with_list.js                 |  8 ++++----
 src/hocs/with_load_more/with_load_more.js       |  6 +++---
 src/hocs/with_subscription/with_subscription.js |  6 +++---
 4 files changed, 22 insertions(+), 24 deletions(-)

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

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 8114d5e2..21023841 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -10,21 +10,19 @@ import MuteCard from '../mute_card/mute_card.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
 import withList from '../../hocs/with_list/with_list'
 
-const BlockList = withList(BlockCard, userId => ({ userId }))
-const BlockListWithSubscription = withSubscription(
-  BlockList,
-  (props, $store) => $store.dispatch('fetchBlocks'),
-  (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
-  'entries'
-)
+const BlockList = withList({ getEntryProps: userId => ({ userId }) })(BlockCard)
+const BlockListWithSubscription = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchBlocks'),
+  select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+  contentPropName: 'entries'
+})(BlockList)
 
-const MuteList = withList(MuteCard, userId => ({ userId }))
-const MuteListWithSubscription = withSubscription(
-  MuteList,
-  (props, $store) => $store.dispatch('fetchMutes'),
-  (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
-  'entries'
-)
+const MuteList = withList({ getEntryProps: userId => ({ userId }) })(MuteCard)
+const MuteListWithSubscription = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchMutes'),
+  select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+  contentPropName: 'entries'
+})(MuteList)
 
 const UserSettings = {
   data () {
diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
index 5ec37a2b..c31cdcb1 100644
--- a/src/hocs/with_list/with_list.js
+++ b/src/hocs/with_list/with_list.js
@@ -4,8 +4,8 @@ import map from 'lodash/map'
 const defaultEntryPropsGetter = entry => ({ entry })
 const defaultKeyGetter = entry => entry.id
 
-const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter) => {
-  return Vue.component('withList', {
+const withList = ({ getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter }) => (ItemComponent) => (
+  Vue.component('withList', {
     render (createElement) {
       return (
         <div class="with-list">
@@ -18,13 +18,13 @@ const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = d
               },
               on: this.$props.entryListeners
             }
-            return <Component {...props} />
+            return <ItemComponent {...props} />
           })}
         </div>
       )
     },
     props: ['entries', 'entryProps', 'entryListeners']
   })
-}
+)
 
 export default withList
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 8877f8d3..28c741e3 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -3,8 +3,8 @@ import filter from 'lodash/filter'
 import isEmpty from 'lodash/isEmpty'
 import './with_load_more.scss'
 
-const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') => {
-  const originalProps = Component.props || []
+const withLoadMore = ({ fetch, select, entriesPropName = 'entries' }) => (WrappedComponent) => {
+  const originalProps = WrappedComponent.props || []
   const props = filter(originalProps, v => v !== 'entries')
 
   return Vue.component('withLoadMore', {
@@ -18,7 +18,7 @@ const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') =>
       }
       return (
         <div class="with-load-more">
-          <Component {...props} />
+          <WrappedComponent {...props} />
           <div class="with-load-more-footer">
             {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
             {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
index 633517e3..21630b40 100644
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -4,8 +4,8 @@ import isEmpty from 'lodash/isEmpty'
 import omit from 'lodash/omit'
 import './with_subscription.scss'
 
-const withSubscription = (Component, fetch, select, contentPropName = 'content') => {
-  const originalProps = Component.props || []
+const withSubscription = ({ fetch, select, contentPropName = 'content' }) => (WrapperComponent) => {
+  const originalProps = WrapperComponent.props || []
   const props = reject(originalProps, v => v === 'content')
 
   return Vue.component('withSubscription', {
@@ -19,7 +19,7 @@ const withSubscription = (Component, fetch, select, contentPropName = 'content')
       }
       return (
         <div class="with-subscription">
-          {!this.error && !this.loading && <Component {...props} />}
+          {!this.error && !this.loading && <WrapperComponent {...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"/>}
-- 
cgit v1.2.3-70-g09d2


From 6d4d705c51a3d39e4de22a3320cfa61ef63a0066 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 23:25:21 -0500
Subject: Rename some options and add comments to HOCs

---
 src/components/user_settings/user_settings.js   |  4 ++--
 src/hocs/with_list/with_list.js                 |  5 ++++-
 src/hocs/with_load_more/with_load_more.js       |  8 ++++++--
 src/hocs/with_subscription/with_subscription.js | 12 ++++++++----
 4 files changed, 20 insertions(+), 9 deletions(-)

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

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 5ad7c46f..06e72112 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -15,7 +15,7 @@ const BlockList = compose(
   withSubscription({
     fetch: (props, $store) => $store.dispatch('fetchBlocks'),
     select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
-    contentPropName: 'entries'
+    childPropName: 'entries'
   }),
   withList({ getEntryProps: userId => ({ userId }) })
 )(BlockCard)
@@ -24,7 +24,7 @@ const MuteList = compose(
   withSubscription({
     fetch: (props, $store) => $store.dispatch('fetchMutes'),
     select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
-    contentPropName: 'entries'
+    childPropName: 'entries'
   }),
   withList({ getEntryProps: userId => ({ userId }) })
 )(MuteCard)
diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
index c31cdcb1..e5770cee 100644
--- a/src/hocs/with_list/with_list.js
+++ b/src/hocs/with_list/with_list.js
@@ -4,7 +4,10 @@ import map from 'lodash/map'
 const defaultEntryPropsGetter = entry => ({ entry })
 const defaultKeyGetter = entry => entry.id
 
-const withList = ({ getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter }) => (ItemComponent) => (
+const withList = ({
+  getEntryProps = defaultEntryPropsGetter,  // function to accept entry and index values and return props to be passed into the item component
+  getKey = defaultKeyGetter                 // funciton to accept entry and index values and return key prop value
+}) => (ItemComponent) => (
   Vue.component('withList', {
     render (createElement) {
       return (
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 28c741e3..459e026c 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -3,7 +3,11 @@ import filter from 'lodash/filter'
 import isEmpty from 'lodash/isEmpty'
 import './with_load_more.scss'
 
-const withLoadMore = ({ fetch, select, entriesPropName = 'entries' }) => (WrappedComponent) => {
+const withLoadMore = ({
+  fetch,                      // function to fetch entries and return a promise
+  select,                     // function to select data from store
+  childPropName = 'entries'   // name of the prop to be passed into the wrapped component
+}) => (WrappedComponent) => {
   const originalProps = WrappedComponent.props || []
   const props = filter(originalProps, v => v !== 'entries')
 
@@ -12,7 +16,7 @@ const withLoadMore = ({ fetch, select, entriesPropName = 'entries' }) => (Wrappe
       const props = {
         props: {
           ...this.$props,
-          [entriesPropName]: this.entries
+          [childPropName]: this.entries
         },
         on: this.$listeners
       }
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
index 21630b40..960c6d71 100644
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -4,8 +4,12 @@ import isEmpty from 'lodash/isEmpty'
 import omit from 'lodash/omit'
 import './with_subscription.scss'
 
-const withSubscription = ({ fetch, select, contentPropName = 'content' }) => (WrapperComponent) => {
-  const originalProps = WrapperComponent.props || []
+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
+}) => (WrappedComponent) => {
+  const originalProps = WrappedComponent.props || []
   const props = reject(originalProps, v => v === 'content')
 
   return Vue.component('withSubscription', {
@@ -13,13 +17,13 @@ const withSubscription = ({ fetch, select, contentPropName = 'content' }) => (Wr
       const props = {
         props: {
           ...omit(this.$props, 'refresh'),
-          [contentPropName]: this.fetchedData
+          [childPropName]: this.fetchedData
         },
         on: this.$listeners
       }
       return (
         <div class="with-subscription">
-          {!this.error && !this.loading && <WrapperComponent {...props} />}
+          {!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"/>}
-- 
cgit v1.2.3-70-g09d2


From a5162bd636880f53a8a47fbd547971f2aaead381 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 14 Feb 2019 03:16:37 -0500
Subject: Add note for empty state to the lists using slot

---
 src/components/user_settings/user_settings.vue |  8 ++++++--
 src/hocs/with_list/with_list.js                | 11 +++++++++--
 src/hocs/with_list/with_list.scss              |  6 ++++++
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 src/hocs/with_list/with_list.scss

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

diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 27f3e7cb..520a8cbe 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -164,11 +164,15 @@
         </div>
         
         <div :label="$t('settings.blocks_tab')">
-          <block-list :refresh="true" />
+          <block-list :refresh="true">
+            <template slot="empty">No blocks</template>
+          </block-list>
         </div>
 
         <div :label="$t('settings.mutes_tab')">
-          <mute-list :refresh="true" />
+          <mute-list :refresh="true">
+            <template slot="empty">No mutes</template>
+          </mute-list>
         </div>
       </tab-switcher>
     </div>
diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
index e5770cee..896f8fc8 100644
--- a/src/hocs/with_list/with_list.js
+++ b/src/hocs/with_list/with_list.js
@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import map from 'lodash/map'
+import isEmpty from 'lodash/isEmpty'
+import './with_list.scss'
 
 const defaultEntryPropsGetter = entry => ({ entry })
 const defaultKeyGetter = entry => entry.id
@@ -9,6 +11,11 @@ const withList = ({
   getKey = defaultKeyGetter                 // funciton to accept entry and index values and return key prop value
 }) => (ItemComponent) => (
   Vue.component('withList', {
+    props: [
+      'entries',                            // array of entry
+      'entryProps',                         // additional props to be passed into each entry
+      'entryListeners'                      // additional event listeners to be passed into each entry
+    ],
     render (createElement) {
       return (
         <div class="with-list">
@@ -23,10 +30,10 @@ const withList = ({
             }
             return <ItemComponent {...props} />
           })}
+          {isEmpty(this.entries) && this.$slots.empty && <div class="with-list-empty-content faint">{this.$slots.empty}</div>}
         </div>
       )
-    },
-    props: ['entries', 'entryProps', 'entryListeners']
+    }
   })
 )
 
diff --git a/src/hocs/with_list/with_list.scss b/src/hocs/with_list/with_list.scss
new file mode 100644
index 00000000..c6e13d5b
--- /dev/null
+++ b/src/hocs/with_list/with_list.scss
@@ -0,0 +1,6 @@
+.with-list {
+  &-empty-content {
+    text-align: center;
+    padding: 10px;
+  }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2