2 files changed, 33 insertions, 25 deletions
diff --git a/app/assets/javascripts/users/activity_calendar.js b/app/assets/javascripts/users/activity_calendar.js
index 0581239d5a5..57306322aa4 100644
--- a/app/assets/javascripts/users/activity_calendar.js
+++ b/app/assets/javascripts/users/activity_calendar.js
@@ -1,7 +1,10 @@
 import _ from 'underscore';
 import { scaleLinear, scaleThreshold } from 'd3-scale';
 import { select } from 'd3-selection';
-import { getDayName, getDayDifference } from '../lib/utils/datetime_utility';
+import { getDayName, getDayDifference } from '~/lib/utils/datetime_utility';
+import axios from '~/lib/utils/axios_utils';
+import flash from '~/flash';
+import { __ } from '~/locale';
 
 const d3 = { select, scaleLinear, scaleThreshold };
 
@@ -98,7 +101,7 @@ export default class ActivityCalendar {
     const secondLastColMonth = this.timestampsTmp[group - 2][0].date.getMonth();
 
     if (lastColMonth !== secondLastColMonth) {
-      extraWidthPadding = 3;
+      extraWidthPadding = 6;
     }
 
     return extraWidthPadding;
@@ -221,14 +224,16 @@ export default class ActivityCalendar {
         this.currentSelectedDate.getDate(),
       ].join('-');
 
-      $.ajax({
-        url: this.calendarActivitiesPath,
-        data: { date },
-        cache: false,
-        dataType: 'html',
-        beforeSend: () => $('.user-calendar-activities').html(LOADING_HTML),
-        success: data => $('.user-calendar-activities').html(data),
-      });
+      $('.user-calendar-activities').html(LOADING_HTML);
+
+      axios.get(this.calendarActivitiesPath, {
+        params: {
+          date,
+        },
+        responseType: 'text',
+      })
+      .then(({ data }) => $('.user-calendar-activities').html(data))
+      .catch(() => flash(__('An error occurred while retrieving calendar activity')));
     } else {
       this.currentSelectedDate = '';
       $('.user-calendar-activities').html('');
diff --git a/app/assets/javascripts/users/user_tabs.js b/app/assets/javascripts/users/user_tabs.js
index 992baa9a1ef..e13b9839a20 100644
--- a/app/assets/javascripts/users/user_tabs.js
+++ b/app/assets/javascripts/users/user_tabs.js
@@ -1,6 +1,9 @@
+import axios from '../lib/utils/axios_utils';
 import Activities from '../activities';
 import ActivityCalendar from './activity_calendar';
 import { localTimeAgo } from '../lib/utils/datetime_utility';
+import { __ } from '../locale';
+import flash from '../flash';
 
 /**
  * UserTabs
@@ -131,18 +134,20 @@ export default class UserTabs {
   }
 
   loadTab(action, endpoint) {
-    return $.ajax({
-      beforeSend: () => this.toggleLoading(true),
-      complete: () => this.toggleLoading(false),
-      dataType: 'json',
-      url: endpoint,
-      success: (data) => {
+    this.toggleLoading(true);
+
+    return axios.get(endpoint)
+      .then(({ data }) => {
         const tabSelector = `div#${action}`;
         this.$parentEl.find(tabSelector).html(data.html);
         this.loaded[action] = true;
         localTimeAgo($('.js-timeago', tabSelector));
-      },
-    });
+
+        this.toggleLoading(false);
+      })
+      .catch(() => {
+        this.toggleLoading(false);
+      });
   }
 
   loadActivities() {
@@ -158,17 +163,15 @@ export default class UserTabs {
       utcFormatted = `UTC${utcOffset > 0 ? '+' : ''}${(utcOffset / 3600)}`;
     }
 
-    $.ajax({
-      dataType: 'json',
-      url: calendarPath,
-      success: (activityData) => {
+    axios.get(calendarPath)
+      .then(({ data }) => {
         $calendarWrap.html(CALENDAR_TEMPLATE);
         $calendarWrap.find('.calendar-hint').append(`(Timezone: ${utcFormatted})`);
 
         // eslint-disable-next-line no-new
-        new ActivityCalendar('.js-contrib-calendar', activityData, calendarActivitiesPath, utcOffset);
-      },
-    });
+        new ActivityCalendar('.js-contrib-calendar', data, calendarActivitiesPath, utcOffset);
+      })
+      .catch(() => flash(__('There was an error loading users activity calendar.')));
 
     // eslint-disable-next-line no-new
     new Activities();