Refactor search and filter

js/components/forms/members_list.js

@@ -1,3 +1,37 @@
+import { compose, filter, equals, indexBy, partial, prop, pipe } from 'ramda'
+
+const search = (query, members) => {
+  if (query === '' || query === 'all') {
+    return members
+  } else {
+    const normalizedQuery = query.toLowerCase()
+    return members.filter(
+      (member) => member.name.toLowerCase().includes(normalizedQuery)
+    )
+  }
+}
+
+const filterByStatus = (status, members) => {
+  if (status === '' || status === 'all') {
+    return members
+  } else {
+    return members.filter(
+      (member) => member.status === status
+    )
+  }
+}
+
+const filterByRole = (role, rolesByDisplayname, members) => {
+  const getRoleNameFromDisplayName = (_role) => rolesByDisplayname[_role].name
+
+  if (role === '' || role === 'all') {
+    return members
+  } else {
+    return members.filter(
+      (member) => getRoleNameFromDisplayName(member.role) === role
+    )
+  }
+}
 
 export default {
   name: 'members-list',
@@ -12,29 +46,17 @@ export default {
       searchValue: '',
       status: '',
       role: '',
+      rolesByDisplayName: indexBy(prop('display_name'), this.choices),
     }
   },
 
   computed: {
     searchedList: function () {
-      return this.members.filter(
+      return pipe(
-        member => this.status ?
+        partial(search, [this.searchValue]),
-          member.status === this.status | this.status === 'all'
+        partial(filterByStatus, [this.status]),
-          : true
+        partial(filterByRole, [this.role, this.rolesByDisplayName]),
-      ).filter(
+      )(this.members)
-        member => this.role ? (
-          this.getRoleFromDisplayName(member.role) === this.role | this.role === 'all')
-          : true
-      ).filter(
-        member => this.searchValue ? member.name.toLowerCase()
-          .includes(this.searchValue.toLowerCase()) : true
-      )
     }
   },
-
-  methods: {
-    getRoleFromDisplayName: function (role) {
-      return this.choices.find(choice => choice.display_name === role).name
-    },
-  },
 }