Switch boards to Axios

5 files changed, 61 insertions, 65 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
index 0c1cff1da7a..679c883cdcf 100644
--- a/app/assets/javascripts/boards/boards_bundle.js
+++ b/app/assets/javascripts/boards/boards_bundle.js
@@ -2,7 +2,6 @@
 
 import _ from 'underscore';
 import Vue from 'vue';
-import VueResource from 'vue-resource';
 import Flash from '../flash';
 import { __ } from '../locale';
 import FilteredSearchBoards from './filtered_search_boards';
@@ -25,8 +24,6 @@ import './components/new_list_dropdown';
 import './components/modal/index';
 import '../vue_shared/vue_resource_interceptor';
 
-Vue.use(VueResource);
-
 $(() => {
   const $boardApp = document.getElementById('board-app');
   const Store = gl.issueBoards.BoardsStore;
@@ -95,9 +92,9 @@ $(() => {
 
       Store.disabled = this.disabled;
       gl.boardService.all()
-        .then(response => response.json())
-        .then((resp) => {
-          resp.forEach((board) => {
+        .then(res => res.data)
+        .then((data) => {
+          data.forEach((board) => {
             const list = Store.addList(board, this.defaultAvatar);
 
             if (list.type === 'closed') {
@@ -112,7 +109,9 @@ $(() => {
           Store.addBlankState();
           this.loading = false;
         })
-        .catch(() => new Flash('An error occurred. Please try again.'));
+        .catch(() => {
+          Flash('An error occurred while fetching the board lists. Please try again.');
+        });
     },
     methods: {
       updateTokens() {
@@ -123,7 +122,7 @@ $(() => {
         if (sidebarInfoEndpoint && newIssue.subscribed === undefined) {
           newIssue.setFetchingState('subscriptions', true);
           BoardService.getIssueInfo(sidebarInfoEndpoint)
-            .then(res => res.json())
+            .then(res => res.data)
             .then((data) => {
               newIssue.setFetchingState('subscriptions', false);
               newIssue.updateData({
diff --git a/app/assets/javascripts/boards/components/board_blank_state.js b/app/assets/javascripts/boards/components/board_blank_state.js
index edfe7c326db..72db626d3c7 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.js
+++ b/app/assets/javascripts/boards/components/board_blank_state.js
@@ -65,7 +65,7 @@ export default {
 
       // Save the labels
       gl.boardService.generateDefaultLists()
-        .then(resp => resp.json())
+        .then(res => res.data)
         .then((data) => {
           data.forEach((listObj) => {
             const list = Store.findList('title', listObj.title);
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
index d2044f20ebe..d825ff38587 100644
--- a/app/assets/javascripts/boards/components/modal/index.js
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -89,7 +89,7 @@ gl.issueBoards.IssuesModal = Vue.extend({
         page: this.page,
         per: this.perPage,
       }))
-      .then(resp => resp.json())
+      .then(res => res.data)
       .then((data) => {
         if (clearIssues) {
           this.issues = [];
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index df2809e1805..e210d69895e 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -40,7 +40,7 @@ class List {
 
   save () {
     return gl.boardService.createList(this.label.id)
-      .then(resp => resp.json())
+      .then(res => res.data)
       .then((data) => {
         this.id = data.id;
         this.type = data.list_type;
@@ -90,7 +90,7 @@ class List {
     }
 
     return gl.boardService.getIssuesForList(this.id, data)
-      .then(resp => resp.json())
+      .then(res => res.data)
       .then((data) => {
         this.loading = false;
         this.issuesSize = data.size;
@@ -108,7 +108,7 @@ class List {
     this.issuesSize += 1;
 
     return gl.boardService.newIssue(this.id, issue)
-      .then(resp => resp.json())
+      .then(res => res.data)
       .then((data) => {
         issue.id = data.id;
         issue.iid = data.iid;
diff --git a/app/assets/javascripts/boards/services/board_service.js b/app/assets/javascripts/boards/services/board_service.js
index fa7ddd25e1f..d78d4701974 100644
--- a/app/assets/javascripts/boards/services/board_service.js
+++ b/app/assets/javascripts/boards/services/board_service.js
@@ -1,82 +1,79 @@
-/* eslint-disable space-before-function-paren, comma-dangle, no-param-reassign, camelcase, max-len, no-unused-vars */
-
-import Vue from 'vue';
+import axios from '../../lib/utils/axios_utils';
+import { mergeUrlParams } from '../../lib/utils/url_utility';
 
 export default class BoardService {
-  constructor ({ boardsEndpoint, listsEndpoint, bulkUpdatePath, boardId }) {
-    this.boards = Vue.resource(`${boardsEndpoint}{/id}.json`, {}, {
-      issues: {
-        method: 'GET',
-        url: `${gon.relative_url_root}/-/boards/${boardId}/issues.json`,
-      }
-    });
-    this.lists = Vue.resource(`${listsEndpoint}{/id}`, {}, {
-      generate: {
-        method: 'POST',
-        url: `${listsEndpoint}/generate.json`
-      }
-    });
-    this.issue = Vue.resource(`${gon.relative_url_root}/-/boards/${boardId}/issues{/id}`, {});
-    this.issues = Vue.resource(`${listsEndpoint}{/id}/issues`, {}, {
-      bulkUpdate: {
-        method: 'POST',
-        url: bulkUpdatePath,
-      },
-    });
+  constructor({ boardsEndpoint, listsEndpoint, bulkUpdatePath, boardId }) {
+    this.boardsEndpoint = boardsEndpoint;
+    this.boardId = boardId;
+    this.listsEndpoint = listsEndpoint;
+    this.listsEndpointGenerate = `${listsEndpoint}/generate.json`;
+    this.bulkUpdatePath = bulkUpdatePath;
+  }
+
+  generateBoardsPath(id) {
+    return `${this.boardsEndpoint}${id ? `/${id}` : ''}.json`;
   }
 
-  all () {
-    return this.lists.get();
+  generateIssuesPath(id) {
+    return `${this.listsEndpoint}${id ? `/${id}` : ''}/issues`;
   }
 
-  generateDefaultLists () {
-    return this.lists.generate({});
+  static generateIssuePath(boardId, id) {
+    return `${gon.relative_url_root}/-/boards/${boardId ? `/${boardId}` : ''}/issues${id ? `/${id}` : ''}`;
   }
 
-  createList (label_id) {
-    return this.lists.save({}, {
+  all() {
+    return axios.get(this.listsEndpoint);
+  }
+
+  generateDefaultLists() {
+    return axios.post(this.listsEndpointGenerate, {});
+  }
+
+  createList(labelId) {
+    return axios.post(this.listsEndpoint, {
       list: {
-        label_id
-      }
+        label_id: labelId,
+      },
     });
   }
 
-  updateList (id, position) {
-    return this.lists.update({ id }, {
+  updateList(id, position) {
+    return axios.put(`${this.listsEndpoint}/${id}`, {
       list: {
-        position
-      }
+        position,
+      },
     });
   }
 
-  destroyList (id) {
-    return this.lists.delete({ id });
+  destroyList(id) {
+    return axios.delete(`${this.listsEndpoint}/${id}`);
   }
 
-  getIssuesForList (id, filter = {}) {
+  getIssuesForList(id, filter = {}) {
     const data = { id };
     Object.keys(filter).forEach((key) => { data[key] = filter[key]; });
 
-    return this.issues.get(data);
+    return axios.get(mergeUrlParams(data, this.generateIssuesPath(id)));
   }
 
-  moveIssue (id, from_list_id = null, to_list_id = null, move_before_id = null, move_after_id = null) {
-    return this.issue.update({ id }, {
-      from_list_id,
-      to_list_id,
-      move_before_id,
-      move_after_id,
+  moveIssue(id, fromListId = null, toListId = null, moveBeforeId = null, moveAfterId = null) {
+    return axios.put(BoardService.generateIssuePath(this.boardId, id), {
+      from_list_id: fromListId,
+      to_list_id: toListId,
+      move_before_id: moveBeforeId,
+      move_after_id: moveAfterId,
     });
   }
 
-  newIssue (id, issue) {
-    return this.issues.save({ id }, {
-      issue
+  newIssue(id, issue) {
+    return axios.post(this.generateIssuesPath(id), {
+      issue,
     });
   }
 
   getBacklog(data) {
-    return this.boards.issues(data);
+    return axios.get(mergeUrlParams(data, `${gon.relative_url_root}/-/boards/${this.boardId}/issues.json`));
   }
 
   bulkUpdate(issueIds, extraData = {}) {
@@ -86,15 +83,15 @@ export default class BoardService {
       }),
     };
 
-    return this.issues.bulkUpdate(data);
+    return axios.post(this.bulkUpdatePath, data);
   }
 
   static getIssueInfo(endpoint) {
-    return Vue.http.get(endpoint);
+    return axios.get(endpoint);
   }
 
   static toggleIssueSubscription(endpoint) {
-    return Vue.http.post(endpoint);
+    return axios.post(endpoint);
   }
 }