Converted filterable_list to axios

app/assets/javascripts/filterable_list.js

 import _ from 'underscore';
+import axios from './lib/utils/axios_utils';
 
 /**
  * Makes search request for content when user types a value in the search input.
@@ -54,32 +55,26 @@ export default class FilterableList {
     this.listFilterElement.removeEventListener('input', this.debounceFilter);
   }
 
-  filterResults(queryData) {
+  filterResults(params) {
     if (this.isBusy) {
       return false;
     }
 
     $(this.listHolderElement).fadeTo(250, 0.5);
 
-    return $.ajax({
-      url: this.getFilterEndpoint(),
-      data: queryData,
-      type: 'GET',
-      dataType: 'json',
-      context: this,
-      complete: this.onFilterComplete,
-      beforeSend: () => {
-        this.isBusy = true;
-      },
-      success: (response, textStatus, xhr) => {
-        this.onFilterSuccess(response, xhr, queryData);
-      },
-    });
+    this.isBusy = true;
+
+    return axios.get(this.getFilterEndpoint(), {
+      params,
+    }).then((res) => {
+      this.onFilterSuccess(res, params);
+      this.onFilterComplete();
+    }).catch(() => this.onFilterComplete());
   }
 
-  onFilterSuccess(response, xhr, queryData) {
+  onFilterSuccess(response, queryData) {
     if (response.html) {
-      this.listHolderElement.innerHTML = response.html;
+      this.listHolderElement.innerHTML = response.data.html;
     }
 
     // Change url so if user reload a page - search results are saved

app/assets/javascripts/groups/groups_filterable_list.js

@@ -94,23 +94,23 @@ export default class GroupFilterableList extends FilterableList {
     this.form.querySelector(`[name="${this.filterInputField}"]`).value = '';
   }
 
-  onFilterSuccess(data, xhr, queryData) {
+  onFilterSuccess(res, queryData) {
     const currentPath = this.getPagePath(queryData);
 
     const paginationData = {
-      'X-Per-Page': xhr.getResponseHeader('X-Per-Page'),
-      'X-Page': xhr.getResponseHeader('X-Page'),
-      'X-Total': xhr.getResponseHeader('X-Total'),
-      'X-Total-Pages': xhr.getResponseHeader('X-Total-Pages'),
-      'X-Next-Page': xhr.getResponseHeader('X-Next-Page'),
-      'X-Prev-Page': xhr.getResponseHeader('X-Prev-Page'),
+      'X-Per-Page': res.headers['x-per-page'],
+      'X-Page': res.headers['x-page'],
+      'X-Total': res.headers['x-total'],
+      'X-Total-Pages': res.headers['x-total-pages'],
+      'X-Next-Page': res.headers['x-next-page'],
+      'X-Prev-Page': res.headers['x-prev-page'],
     };
 
     window.history.replaceState({
       page: currentPath,
     }, document.title, currentPath);
 
-    eventHub.$emit('updateGroups', data, Object.prototype.hasOwnProperty.call(queryData, this.filterInputField));
+    eventHub.$emit('updateGroups', res.data, Object.prototype.hasOwnProperty.call(queryData, this.filterInputField));
     eventHub.$emit('updatePagination', paginationData);
   }
 }