Add withList hoc and remove UserList component

4 files changed, 30 insertions, 22 deletions

diff --git a/src/components/user_list/user_list.js b/src/components/user_list/user_list.js
deleted file mode 100644
index 30e3d765..00000000
--- a/src/components/user_list/user_list.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import BasicUserCard from '../basic_user_card/basic_user_card.vue'
-
-const UserList = {
-  props: ['entries'],
-  components: {
-    BasicUserCard
-  }
-}
-
-export default UserList
diff --git a/src/components/user_list/user_list.vue b/src/components/user_list/user_list.vue
deleted file mode 100644
index 242c04fc..00000000
--- a/src/components/user_list/user_list.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template functional>
-  <div class="user-list">
-    <basic-user-card
-      v-for="entry in entries"
-      :key="entry.id"
-      :user="entry"
-    />
-  </div>
-</template>
-
-<script src="./user_list.js"></script>
\ No newline at end of file
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 5d8541f0..a46afda6 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -5,9 +5,11 @@ import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import ImageCropper from '../image_cropper/image_cropper.vue'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
-import UserList from '../user_list/user_list.vue'
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
+import withList from '../../hocs/with_list/with_list'
 
+const UserList = withList(BasicUserCard, entry => ({ user: entry }))
 const BlockListWithLoadMore = withLoadMore(
   UserList,
   (props, $store) => $store.dispatch('fetchBlocks'),
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