Replace vue-resource with jQuery and save a lib

package.json

@@ -45,7 +45,6 @@
     "sinon": "^1.17.2",
     "vue": "^2.0.0-beta.1",
     "vue-hot-reload-api": "^1.3.2",
-    "vue-resource": "^0.7.0",
     "vueify": "^9.1.0",
     "vueify-insert-css": "^1.0.0"
   },

resources/assets/js/components/main-wrapper/main-content/index.vue

@@ -69,6 +69,7 @@ export default {
 #mainContent {
   flex: 1;
   position: relative;
+  overflow: hidden;
 
   > section {
     position: absolute;
@@ -132,10 +133,10 @@ export default {
 
   .translucent {
     position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
+    top: -20px;
+    left: -20px;
+    right: -20px;
+    bottom: -20px;
     filter: blur(20px);
     opacity: .07;
     z-index: 0;

resources/assets/js/components/main-wrapper/main-content/settings.vue

@@ -43,11 +43,11 @@ export default {
 
       settingStore.update().then(() => {
         forceReloadWindow();
-      }).catch(error => {
+      }).catch(r => {
         let msg = 'Unknown error.';
 
-        if (error.status === 422) {
-          msg = parseValidationError(error.data)[0];
+        if (r.status === 422) {
+          msg = parseValidationError(r.responseJSON)[0];
         }
 
         showOverlay(`Error: ${msg}`, 'error', true);

resources/assets/js/main.js

@@ -1,46 +1,7 @@
 import Vue from 'vue';
-import NProgress from 'nprogress';
 
-import { ls } from './services';
 import { event } from './utils';
-
-import App from './app.vue'
-
-Vue.config.debug = false;
-Vue.use(require('vue-resource'));
-Vue.http.options.root = '/api';
-Vue.http.interceptors.push({
-  request(r) {
-    const token = ls.get('jwt-token');
-
-    if (token) {
-      Vue.http.headers.common.Authorization = `Bearer ${token}`;
-    }
-
-    return r;
-  },
-
-  response(r) {
-    NProgress.done();
-
-    if (r.status === 400 || r.status === 401) {
-      if (!(r.request.method === 'POST' && r.request.url === 'me')) {
-        // This is not a failed login. Log out then.
-        event.emit('logout');
-      }
-    }
-
-    if (r.headers && r.headers.Authorization) {
-      ls.set('jwt-token', r.headers.Authorization);
-    }
-
-    if (r.data && r.data.token && r.data.token.length > 10) {
-      ls.set('jwt-token', r.data.token);
-    }
-
-    return r;
-  },
-});
+import { http } from './services';
 
 /**
  * For Ancelot, the ancient cross of war
@@ -50,6 +11,9 @@ Vue.http.interceptors.push({
  */
 new Vue({
   el: '#app',
-  render: h => h(App),
-  created() { event.init() },
+  render: h => h(require('./app.vue')),
+  created() {
+    event.init();
+    http.init();
+  },
 });

resources/assets/js/services/http.js

@@ -1,11 +1,24 @@
 import Vue from 'vue';
+import $ from 'jquery';
+import NProgress from 'nprogress';
+
+import { event } from '../utils';
+import { ls } from '../services';
 
 /**
  * Responsible for all HTTP requests.
  */
 export const http = {
   request(method, url, data, successCb = null, errorCb = null) {
-    return Vue.http[method](url, data).then(successCb, errorCb);
+    return $.ajax({
+      data,
+      dataType: 'json',
+      url: `/api/${url}`,
+      method: method.toUpperCase(),
+      headers: {
+        Authorization: `Bearer ${ls.get('jwt-token')}`,
+      }
+    }).done(successCb).fail(errorCb);
   },
 
   get(url, successCb = null, errorCb = null) {
@@ -30,4 +43,30 @@ export const http = {
   ping() {
     return this.get('/');
   },
+
+  /**
+   * Init the service.
+   */
+  init() {
+    $(document).ajaxComplete((e, r, settings) => {
+      NProgress.done();
+
+      if (r.status === 400 || r.status === 401) {
+        if (!(settings.method === 'POST' && settings.url === '/api/me')) {
+          // This is not a failed login. Log out then.
+          event.emit('logout');
+          return;
+        }
+      }
+
+      const token = r.getResponseHeader('Authorization');
+      if (token) {
+        ls.set('jwt-token', token);
+      }
+
+      if (r.responseJSON && r.responseJSON.token && r.responseJSON.token.length > 10) {
+        ls.set('jwt-token', r.responseJSON.token);
+      }
+    });
+  },
 };

resources/assets/js/services/info/album.js

@@ -16,8 +16,8 @@ export const albumInfo = {
         return;
       }
 
-      http.get(`album/${album.id}/info`, r => {
-        r.data && this.merge(album, r.data);
+      http.get(`album/${album.id}/info`, data => {
+        data && this.merge(album, data);
         resolve(album);
       }, r => reject(r));
     });

resources/assets/js/services/info/artist.js

@@ -13,8 +13,8 @@ export const artistInfo = {
         return;
       }
 
-      http.get(`artist/${artist.id}/info`, r => {
-        r.data && this.merge(artist, r.data);
+      http.get(`artist/${artist.id}/info`, data => {
+        data && this.merge(artist, data);
         resolve(artist);
       }, r => reject(r));
     });

resources/assets/js/services/info/song.js

@@ -14,12 +14,12 @@ export const songInfo = {
         return;
       }
 
-      http.get(`${song.id}/info`, r => {
-        song.lyrics = r.data.lyrics;
-        r.data.artist_info && artistInfo.merge(song.artist, r.data.artist_info);
-        r.data.album_info && albumInfo.merge(song.album, r.data.album_info);
+      http.get(`${song.id}/info`, data => {
+        song.lyrics = data.lyrics;
+        data.artist_info && artistInfo.merge(song.artist, data.artist_info);
+        data.album_info && albumInfo.merge(song.album, data.album_info);
         song.infoRetrieved = true;
-        resolve(song)
+        resolve(song);
       }, r => reject(r));
     });
   },

resources/assets/js/stores/favorite.js

@@ -40,7 +40,7 @@ export const favoriteStore = {
     song.liked ? this.add(song) : this.remove(song);
 
     return new Promise((resolve, reject) => {
-      http.post('interaction/like', { song: song.id }, r => resolve(r), r => reject(r));
+      http.post('interaction/like', { song: song.id }, data => resolve(data), r => reject(r));
     });
   },
 
@@ -81,7 +81,7 @@ export const favoriteStore = {
     this.add(songs);
 
     return new Promise((resolve, reject) => {
-      http.post('interaction/batch/like', { songs: map(songs, 'id') }, r => resolve(r), r => reject(r));
+      http.post('interaction/batch/like', { songs: map(songs, 'id') }, data => resolve(data), r => reject(r));
     });
   },
 
@@ -95,7 +95,7 @@ export const favoriteStore = {
     this.remove(songs);
 
     return new Promise((resolve, reject) => {
-      http.post('interaction/batch/unlike', { songs: map(songs, 'id') }, r => resolve(r), r => reject(r));
+      http.post('interaction/batch/unlike', { songs: map(songs, 'id') }, data => resolve(data), r => reject(r));
     });
   },
 };

resources/assets/js/stores/playlist.js

@@ -89,8 +89,7 @@ export const playlistStore = {
     NProgress.start();
 
     return new Promise((resolve, reject) => {
-      http.post('playlist', { name, songs }, r => {
-        const playlist = r.data;
+      http.post('playlist', { name, songs }, playlist => {
         playlist.songs = songs;
         this.objectifySongs(playlist);
         this.add(playlist);
@@ -108,9 +107,9 @@ export const playlistStore = {
     NProgress.start();
 
     return new Promise((resolve, reject) => {
-      http.delete(`playlist/${playlist.id}`, {}, r => {
+      http.delete(`playlist/${playlist.id}`, {}, data => {
         this.remove(playlist);
-        resolve(r);
+        resolve(data);
       }, r => reject(r));
     });
   },
@@ -132,7 +131,7 @@ export const playlistStore = {
       }
 
       http.put(`playlist/${playlist.id}/sync`, { songs: map(playlist.songs, 'id') },
-        r => resolve(playlist),
+        data => resolve(playlist),
         r => reject(r)
       );
     })
@@ -149,7 +148,7 @@ export const playlistStore = {
 
     return new Promise((resolve, reject) => {
       http.put(`playlist/${playlist.id}/sync`, { songs: map(playlist.songs, 'id') },
-        r => resolve(playlist),
+        data => resolve(playlist),
         r => reject(r)
       );
     })
@@ -164,7 +163,7 @@ export const playlistStore = {
     NProgress.start();
 
     return new Promise((resolve, reject) => {
-      http.put(`playlist/${playlist.id}`, { name: playlist.name }, r => resolve(playlist), r => reject(r));
+      http.put(`playlist/${playlist.id}`, { name: playlist.name }, data => resolve(playlist), r => reject(r));
     });
   },
 };

resources/assets/js/stores/setting.js

@@ -18,7 +18,7 @@ export const settingStore = {
 
   update() {
     return new Promise((resolve, reject) => {
-      http.post('settings', this.all, r => resolve(r), r => reject(r));
+      http.post('settings', this.all, data => resolve(data), r => reject(r));
     });
   },
 };

resources/assets/js/stores/shared.js

@@ -27,9 +27,7 @@ export const sharedStore = {
     this.reset();
 
     return new Promise((resolve, reject) => {
-      http.get('data', r => {
-        const data = r.data;
-
+      http.get('data', data => {
         // Don't allow downloading on mobile devices
         data.allowDownload = data.allowDownload && !isMobile.any;
 
@@ -48,7 +46,7 @@ export const sharedStore = {
         queueStore.init();
         settingStore.init(this.state.settings);
 
-        resolve(r)
+        resolve(data)
       }, r => reject(r));
     });
   },

resources/assets/js/stores/song.js

@@ -156,13 +156,13 @@ export const songStore = {
     return new Promise((resolve, reject) => {
       const oldCount = song.playCount;
 
-      http.post('interaction/play', { song: song.id }, r => {
+      http.post('interaction/play', { song: song.id }, data => {
         // Use the data from the server to make sure we don't miss a play from another device.
-        song.playCount = r.data.play_count;
+        song.playCount = data.play_count;
         song.album.playCount += song.playCount - oldCount;
         song.artist.playCount += song.playCount - oldCount;
 
-        resolve(r);
+        resolve(data);
       }, r => reject(r));
     });
   },
@@ -187,7 +187,7 @@ export const songStore = {
    */
   scrobble(song) {
     return new Promise((resolve, reject) => {
-      http.post(`${song.id}/scrobble/${song.playStartTime}`, r => resolve(r), r => reject(r));
+      http.post(`${song.id}/scrobble/${song.playStartTime}`, {}, data => resolve(data), r => reject(r));
     })
   },
 
@@ -202,9 +202,9 @@ export const songStore = {
       http.put('songs', {
         data,
         songs: map(songs, 'id'),
-      }, r => {
-        each(r.data, song => this.syncUpdatedSong(song));
-        resolve(r);
+      }, songs => {
+        each(songs, song => this.syncUpdatedSong(song));
+        resolve(songs);
       }, r => reject(r));
     });
   },

resources/assets/js/stores/user.js

@@ -103,7 +103,7 @@ export const userStore = {
     NProgress.start();
 
     return new Promise((resolve, reject) => {
-      http.post('me', { email, password }, r => resolve(r), r => reject(r));
+      http.post('me', { email, password }, data => resolve(data), r => reject(r));
     });
   },
 
@@ -112,7 +112,7 @@ export const userStore = {
    */
   logout() {
     return new Promise((resolve, reject) => {
-      http.delete('me', {}, r => resolve(r), r => reject(r));
+      http.delete('me', {}, data => resolve(data), r => reject(r));
     });
   },
 
@@ -148,8 +148,7 @@ export const userStore = {
     NProgress.start();
 
     return new Promise((resolve, reject) => {
-      http.post('user', { name, email, password }, r => {
-        const user = r.data;
+      http.post('user', { name, email, password }, user => {
         this.setAvatar(user);
         this.all.unshift(user);
         resolve(user);
@@ -169,7 +168,7 @@ export const userStore = {
     NProgress.start();
 
     return new Promise((resolve, reject) => {
-      http.put(`user/${user.id}`, { name, email, password }, r => {
+      http.put(`user/${user.id}`, { name, email, password }, () => {
         this.setAvatar(user);
         user.password = '';
         resolve(user);
@@ -186,7 +185,7 @@ export const userStore = {
     NProgress.start();
 
     return new Promise((resolve, reject) => {
-      http.delete(`user/${user.id}`, {}, r => {
+      http.delete(`user/${user.id}`, {}, data => {
         this.all = without(this.all, user);
 
         // Mama, just killed a man
@@ -211,7 +210,7 @@ export const userStore = {
         /**
          * Brian May enters the stage.
          */
-        resolve(r);
+        resolve(data);
       }, r => reject(r));
     });
   },