Introduce AjaxCache for requesting contribution chart data

1 files changed, 4 insertions, 15 deletions

diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 8d2cc7545eb..7b77c27353f 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
 import Activities from '~/activities';
 import { localTimeAgo } from '~/lib/utils/datetime_utility';
+import AjaxCache from '~/lib/utils/ajax_cache';
 import { __ } from '~/locale';
 import flash from '~/flash';
 import ActivityCalendar from './activity_calendar';
@@ -90,9 +91,6 @@ export default class UserTabs {
       this.action = this.defaultAction;
     }
 
-    // caches data for activity calendar
-    this.activityCalendarData = null;
-
     this.activateTab(this.action);
   }
 
@@ -206,18 +204,9 @@ export default class UserTabs {
     const $calendarWrap = this.$parentEl.find('.tab-pane.active .user-calendar');
     const calendarPath = $calendarWrap.data('calendarPath');
 
-    if (!this.activityCalendarData) {
-      axios
-        .get(calendarPath)
-        .then(({ data }) => {
-          // let's cache the data so we don't need to fetch it again when the chart gets resized
-          this.activityCalendarData = data;
-          UserTabs.renderActivityCalendar(data, $calendarWrap);
-        })
-        .catch(() => flash(__('There was an error loading users activity calendar.')));
-    } else {
-      UserTabs.renderActivityCalendar(this.activityCalendarData, $calendarWrap);
-    }
+    AjaxCache.retrieve(calendarPath)
+      .then(data => UserTabs.renderActivityCalendar(data, $calendarWrap))
+      .catch(() => flash(__('There was an error loading users activity calendar.')));
   }
 
   static renderActivityCalendar(data, $calendarWrap) {