Rename some options and add comments to HOCs

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)

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 (

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
       }

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"/>}