use reusable List vue component instead of withList hoc

Using slot is the preferred way in vue

src/components/list/list.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="list">
+    <slot name="item" v-for="item in items" :item="item" />
+    <div class="list-empty-content faint" v-if="items.length === 0">
+      <slot name="empty" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.list {
+  &-empty-content {
+    text-align: center;
+    padding: 10px;
+  }
+}
+</style>

src/components/user_settings/user_settings.js

@@ -10,29 +10,24 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 import BlockCard from '../block_card/block_card.vue'
 import MuteCard from '../mute_card/mute_card.vue'
+import List from '../list/list.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
 import Autosuggest from '../autosuggest/autosuggest.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
 import withList from '../../hocs/with_list/with_list'
 import userSearchApi from '../../services/new_api/user_search.js'
 
-const BlockList = compose(
+const BlockList = withSubscription({
-  withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchBlocks'),
-    fetch: (props, $store) => $store.dispatch('fetchBlocks'),
+  select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
-    select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+  childPropName: 'items'
-    childPropName: 'entries'
+})(List)
-  }),
-  withList({ getEntryProps: userId => ({ userId }) })
-)(BlockCard)
 
-const MuteList = compose(
+const MuteList = withSubscription({
-  withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchMutes'),
-    fetch: (props, $store) => $store.dispatch('fetchMutes'),
+  select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
-    select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+  childPropName: 'items'
-    childPropName: 'entries'
+})(List)
-  }),
-  withList({ getEntryProps: userId => ({ userId }) })
-)(MuteCard)
 
 const UserSettings = {
   data () {

src/components/user_settings/user_settings.vue

@@ -200,9 +200,12 @@
               <BlockCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <block-list :refresh="true">
+          <BlockList :refresh="true">
+            <template slot="item" scope="p">
+              <BlockCard :key="p.item" :userId="p.item" />
+            </template>
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
-          </block-list>
+          </BlockList>
         </div>
 
         <div :label="$t('settings.mutes_tab')">
@@ -211,9 +214,12 @@
               <MuteCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <mute-list :refresh="true">
+          <MuteList :refresh="true">
+            <template slot="item" scope="p">
+              <MuteCard :key="p.item" :userId="p.item" />
+            </template>
             <template slot="empty">{{$t('settings.no_mutes')}}</template>
-          </mute-list>
+          </MuteList>
         </div>
       </tab-switcher>
     </div>