Use async/await

package.json

@@ -14,9 +14,12 @@
     "url": "https://github.com/phanan/koel"
   },
   "babel": {
-    "presets": ["es2015"]
+    "presets": [
+      "es2015"
+    ]
   },
   "eslintConfig": {
+    "parser": "babel-eslint",
     "extends": "vue",
     "rules": {
       "no-multi-str": "off"
@@ -42,6 +45,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",
+    "babel-eslint": "^7.2.3",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.23.0",
     "babel-register": "^6.23.0",

resources/assets/js/app.vue

@@ -71,12 +71,13 @@ export default {
   },
 
   methods: {
-    init () {
+    async init () {
       showOverlay()
 
       // Make the most important HTTP request to get all necessary data from the server.
       // Afterwards, init all mandatory stores and services.
-      sharedStore.init().then(() => {
+      try {
+        await sharedStore.init()
         playback.init()
         hideOverlay()
 
@@ -96,9 +97,9 @@ export default {
 
         // Let all other components know we're ready.
         event.emit('koel:ready')
-      }).catch(() => {
+      } catch (err) {
         this.authenticated = false
-      })
+      }
     },
 
     /**
@@ -196,11 +197,10 @@ export default {
       /**
        * Log the current user out and reset the application state.
        */
-      logout () {
-        userStore.logout().then((r) => {
-          ls.remove('jwt-token')
-          forceReloadWindow()
-        })
+      async logout () {
+        await userStore.logout()
+        ls.remove('jwt-token')
+        forceReloadWindow()
       },
 
       /**

resources/assets/js/components/auth/login-form.vue

@@ -20,19 +20,18 @@ export default {
   },
 
   methods: {
-    login () {
-      this.failed = false
-
-      userStore.login(this.email, this.password).then(() => {
+    async login () {
+      try {
+        await userStore.login(this.email, this.password)
         this.failed = false
 
         // Reset the password so that the next login will have this field empty.
         this.password = ''
 
         event.emit('user:loggedin')
-      }).catch(() => {
+      } catch (err) {
         this.failed = true
-      })
+      }
     }
   }
 }

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

@@ -106,10 +106,8 @@ export default {
         }
       },
 
-      'song:played': song => {
-        songInfo.fetch(song).then(song => {
-          this.song = song
-        })
+      'song:played': async song => {
+        this.song = await songInfo.fetch(song)
       }
     })
   }

resources/assets/js/components/main-wrapper/extra/youtube.vue

@@ -46,12 +46,11 @@ export default {
     /**
      * Load more videos.
      */
-    loadMore () {
+    async loadMore () {
       this.loading = true
-      youtubeService.searchVideosRelatedToSong(this.song).then(() => {
-        this.videos = this.song.youtube.items
-        this.loading = false
-      })
+      await youtubeService.searchVideosRelatedToSong(this.song)
+      this.videos = this.song.youtube.items
+      this.loading = false
     }
   }
 }

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

@@ -133,13 +133,12 @@ export default {
       download.fromAlbum(this.album)
     },
 
-    showInfo () {
+    async showInfo () {
       this.info.showing = true
       if (!this.album.info) {
         this.info.loading = true
-        albumInfoService.fetch(this.album).then(() => {
-          this.info.loading = false
-        })
+        await albumInfoService.fetch(this.album)
+        this.info.loading = false
       } else {
         this.info.loading = false
       }

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

@@ -125,13 +125,12 @@ export default {
       download.fromArtist(this.artist)
     },
 
-    showInfo () {
+    async showInfo () {
       this.info.showing = true
       if (!this.artist.info) {
         this.info.loading = true
-        artistInfoService.fetch(this.artist).then(() => {
-          this.info.loading = false
-        })
+        await artistInfoService.fetch(this.artist)
+        this.info.loading = false
       } else {
         this.info.loading = false
       }

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

@@ -107,15 +107,14 @@ export default {
     /**
      * Delete the current playlist.
      */
-    del () {
-      playlistStore.delete(this.playlist).then(() => {
-        // Reset the current playlist to our stub, so that we don't encounter
-        // any property reference error.
-        this.playlist = playlistStore.stub
+    async del () {
+      await playlistStore.delete(this.playlist)
+      // Reset the current playlist to our stub, so that we don't encounter
+      // any property reference error.
+      this.playlist = playlistStore.stub
 
-        // Switch back to Home screen
-        router.go('home')
-      })
+      // Switch back to Home screen
+      router.go('home')
     },
 
     /**

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

@@ -131,7 +131,7 @@ export default {
     /**
      * Update the current user's profile.
      */
-    update () {
+    async update () {
       const passwordFields = Array.from(
         document.querySelectorAll('#inputProfilePassword, #inputProfileConfirmPassword')
       )
@@ -143,10 +143,9 @@ export default {
 
       each(passwordFields, el => $.removeClass(el, 'error'))
 
-      userStore.updateProfile(this.pwd).then(() => {
-        this.pwd = ''
-        this.confirmPwd = ''
-      })
+      await userStore.updateProfile(this.pwd)
+      this.pwd = ''
+      this.confirmPwd = ''
     },
 
     /**

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

@@ -62,23 +62,24 @@ export default {
     /**
      * Save the settings.
      */
-    save () {
+    async save () {
       showOverlay()
 
-      settingStore.update().then(() => {
+      try {
+        await settingStore.update()
         // Make sure we're back to home first.
         router.go('home')
         forceReloadWindow()
-      }).catch(r => {
+      } catch (err) {
         let msg = 'Unknown error.'
 
-        if (r.status === 422) {
-          msg = parseValidationError(r.responseJSON)[0]
+        if (err.status === 422) {
+          msg = parseValidationError(err.responseJSON)[0]
         }
 
         hideOverlay()
         alerts.error(msg)
-      })
+      }
     }
   }
 }

resources/assets/js/components/main-wrapper/sidebar/playlists.vue

@@ -45,14 +45,13 @@ export default {
     /**
      * Store/create a new playlist.
      */
-    store () {
+    async store () {
       this.creating = false
 
-      playlistStore.store(this.newName).then(playlist => {
-        this.newName = ''
-        // Activate the new playlist right away
-        this.$nextTick(() => router.go(`playlist/${playlist.id}`))
-      })
+      const playlist = await playlistStore.store(this.newName)
+      this.newName = ''
+      // Activate the new playlist right away
+      this.$nextTick(() => router.go(`playlist/${playlist.id}`))
     }
   }
 }

resources/assets/js/components/modals/add-user-form.vue

@@ -50,12 +50,11 @@ export default {
       this.newUser = clone(userStore.stub)
     },
 
-    submit () {
+    async submit () {
       this.loading = true
-      userStore.store(this.newUser.name, this.newUser.email, this.newUser.password).then(() => {
-        this.loading = false
-        this.newUser = null
-      })
+      await userStore.store(this.newUser.name, this.newUser.email, this.newUser.password)
+      this.loading = false
+      this.newUser = null
     },
 
     cancel () {

resources/assets/js/components/modals/edit-songs-form.vue

@@ -226,7 +226,7 @@ export default {
   },
 
   methods: {
-    open (songs) {
+    async open (songs) {
       this.shown = true
       this.songs = songs
       this.currentView = 'details'
@@ -241,12 +241,11 @@ export default {
         if (!this.songs[0].infoRetrieved) {
           this.loading = true
 
-          songInfo.fetch(this.songs[0]).then(r => {
-            this.loading = false
-            this.formData.lyrics = br2nl(this.songs[0].lyrics)
-            this.formData.track = this.songs[0].track || ''
-            this.initCompilationStateCheckbox()
-          })
+          await songInfo.fetch(this.songs[0])
+          this.loading = false
+          this.formData.lyrics = br2nl(this.songs[0].lyrics)
+          this.formData.track = this.songs[0].track || ''
+          this.initCompilationStateCheckbox()
         } else {
           this.formData.lyrics = br2nl(this.songs[0].lyrics)
           this.formData.track = this.songs[0].track || ''
@@ -306,15 +305,15 @@ export default {
     /**
      * Submit the form.
      */
-    submit () {
+    async submit () {
       this.loading = true
 
-      songStore.update(this.songs, this.formData).then(() => {
-        this.loading = false
+      try {
+        await songStore.update(this.songs, this.formData)
         this.close()
-      }).catch(() => {
+      } finally {
         this.loading = false
-      })
+      }
     }
   }
 }

resources/assets/js/components/modals/edit-user-form.vue

@@ -54,14 +54,11 @@ export default {
       this.user = user
     },
 
-    submit () {
+    async submit () {
       this.loading = true
-      userStore.update(this.user, this.copiedUser.name, this.copiedUser.email, this.copiedUser.password)
-        .then(() => {
-          this.loading = false
-          this.copiedUser = null
-        }
-      )
+      await userStore.update(this.user, this.copiedUser.name, this.copiedUser.email, this.copiedUser.password)
+      this.loading = false
+      this.copiedUser = null
     },
 
     cancel () {

resources/assets/js/components/shared/add-to-menu.vue

@@ -56,18 +56,17 @@ export default {
      * Save the selected songs as a playlist.
      * As of current we don't have selective save.
      */
-    createNewPlaylistFromSongs () {
+    async createNewPlaylistFromSongs () {
       this.newPlaylistName = this.newPlaylistName.trim()
 
       if (!this.newPlaylistName) {
         return
       }
 
-      playlistStore.store(this.newPlaylistName, this.songs).then(playlist => {
-        this.newPlaylistName = ''
-        // Activate the new playlist right away
-        this.$nextTick(() => router.go(`playlist/${playlist.id}`))
-      })
+      const playlist = await playlistStore.store(this.newPlaylistName, this.songs)
+      this.newPlaylistName = ''
+      // Activate the new playlist right away
+      this.$nextTick(() => router.go(`playlist/${playlist.id}`))
 
       this.close()
     },

resources/assets/js/components/shared/user-item.vue

@@ -65,8 +65,9 @@ export default {
      * Kill off the freaking user.
      */
     del () {
-      alerts.confirm(`You’re about to unperson ${this.user.name}. Are you sure?`, () => {
-        userStore.destroy(this.user).then(() => this.$destroy())
+      alerts.confirm(`You’re about to unperson ${this.user.name}. Are you sure?`, async () => {
+        userStore.destroy(this.user)
+        this.$destroy()
       })
     }
   }

yarn.lock

@@ -348,6 +348,15 @@ babel-core@^6.20.0, babel-core@^6.23.0:
     slash "^1.0.0"
     source-map "^0.5.0"
 
+babel-eslint@^7.2.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.2.3.tgz#b2fe2d80126470f5c19442dc757253a897710827"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-traverse "^6.23.1"
+    babel-types "^6.23.0"
+    babylon "^6.17.0"
+
 babel-generator@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.23.0.tgz#6b8edab956ef3116f79d8c84c5a3c05f32a74bc5"
@@ -737,6 +746,10 @@ babylon@^6.11.0, babylon@^6.15.0:
   version "6.15.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.15.0.tgz#ba65cfa1a80e1759b0e89fb562e27dccae70348e"
 
+babylon@^6.17.0:
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.0.tgz#37da948878488b9c4e3c4038893fa3314b3fc932"
+
 backo2@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"