FE fetch counts async on search page load

Creates `refresh_counts` module to dynamically fetch
and load data based on attributes of HAML elements.

2 files changed, 26 insertions, 0 deletions

diff --git a/app/assets/javascripts/pages/search/show/refresh_counts.js b/app/assets/javascripts/pages/search/show/refresh_counts.js
new file mode 100644
index 00000000000..fa75ee6075d
--- /dev/null
+++ b/app/assets/javascripts/pages/search/show/refresh_counts.js
@@ -0,0 +1,24 @@
+import axios from '~/lib/utils/axios_utils';
+
+function showCount(el, count) {
+  el.textContent = count;
+  el.classList.remove('hidden');
+}
+
+function refreshCount(el) {
+  const { url } = el.dataset;
+
+  return axios
+    .get(url)
+    .then(({ data }) => showCount(el, data.count))
+    .catch(e => {
+      // eslint-disable-next-line no-console
+      console.error(`Failed to fetch search count from '${url}'.`, e);
+    });
+}
+
+export default function refreshCounts() {
+  const elements = Array.from(document.querySelectorAll('.js-search-count'));
+
+  return Promise.all(elements.map(refreshCount));
+}
diff --git a/app/assets/javascripts/pages/search/show/search.js b/app/assets/javascripts/pages/search/show/search.js
index 81b6225cb18..86ec78e1df8 100644
--- a/app/assets/javascripts/pages/search/show/search.js
+++ b/app/assets/javascripts/pages/search/show/search.js
@@ -3,6 +3,7 @@ import Flash from '~/flash';
 import Api from '~/api';
 import { __ } from '~/locale';
 import Project from '~/pages/projects/project';
+import refreshCounts from './refresh_counts';
 
 export default class Search {
   constructor() {
@@ -14,6 +15,7 @@ export default class Search {
 
     this.groupId = $groupDropdown.data('groupId');
     this.eventListeners();
+    refreshCounts();
 
     $groupDropdown.glDropdown({
       selectable: true,